Tailwindcss
You can quickly build modern websites without leaving HTML
The first version of tailwindcss was developed by Adam Wathan on November 1, 2017. The project is described as a utilit-first CSS framework,
What is a tailwind
Tailwindcss is a CSS framework, it is a collection of CSS files for you to order many classes (tokenlist). It contains many commonly used CSS styles, such as shadow, underline, fill, margin, border, etc. This means that most of the time you don’t need to write CSS, because it is already predefined for you. All you need to do is add classes already defined in the tailwindcss file to your HTML code structure
How to use
Just use the CSS classes tailwind preset for you in your HTML elements
<div class="rounded-lg p-4"> Click </div>
Copy the codeUsed in create-react-app
- Create a project
npx create-react-app app-name --template typescript
cd app-name
Copy the code- The installation
tailwindcss
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Copy the codeThe Create React App does not yet support PostCSS 8, so you need to install Tailwind CSS V2.0 PostCSS 7 compatibility.
- Configuration craco
npm install @craco/craco
Copy the codeAfter installation, update scripts in package.json to craco instead of React-scripts for all scripts except eject.
{/ /... "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", "eject": "react-scripts eject" }, }Copy the codeNext, create a craco.config.js at the root of the project and add tailwindCSS and autoprefixer as PostCSS plug-ins.
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
Copy the codeIf you plan to use any other PostCSS plug-ins, you should read our documentation on using PostCSS as your preprocessor for more details on the best way to integrate them with Tailwind.
Create your profile
Next, generate your tailwind.config.js file:
npx tailwindcss-cli@latest init
Copy the codeThis will create a minimal tailwind.config.js file in your project root directory:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Copy the codeRead the configuration documentation to learn more.
Configure Tailwind to remove style declarations that are not used in production
In your tailwind.config.js file, configure the Purge option to specify all components files so that Tailwind can tree-shake unused styles in a production build.
// tailwind.config.js
module.exports = {
- purge: [],
+ purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Copy the codePlease read our separate optimization production guide for more information on tree shaking to optimize unused styles for best performance.
Introduce Tailwind in your CSS
Open the Create React App file generated for you by default./ SRC /index.css and use the @tailwind directive to include tailwind’s base, components, and Utilities styles. To replace the contents of the original file.
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the codeTailwind converts these instructions at build time into all the style files generated based on your configured design system.
Read our documentation to add base styles, extract components, and add new feature classes to get best practices for extending Tailwind with your own custom CSS.
Finally, make sure your CSS file is imported into your./ SRC /index.js file.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
+ import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// ...
Copy the codeCompare CSS/UI frameworks on the market
As a quick comparison, almost all frameworks are designed to solve the problem of the granularity of embellishment styles. Here are four different levels of granularity:
<div style=" borderRadius: '0.5rem', padding: '1rem' }"> Click </div> <div class="rounded-lg p-4"> Click </div> <div class="button"> Click </div> <Button> Click </Button>Copy the codeFrom top to bottom, the granularity is getting bigger, the constraint becomes higher, and the degree of freedom is not enough. The Button at the bottom is similar to the component ant Design provides for us, but with large granularity, it brings the trouble of custom style. TailWindCss is in the second layer, whereas Bootstrap is in the third layer. TailWindCss is popular for nothing more than better atomized CSS
Using the bootstrap development
Bootstarp is an Object Oriented CSS (CSS) based methodology and a popular way to manage style sheets. For example, with OOCSS, you can specify an HTML element with a button class instead of writing a bunch of classes and CSS styles
<button type="button" class="btn btn-primary">Primary</button>
Copy the codeBut if you need to use a particular style in a particular place, such as adding an inner margin, then bootstrap doesn’t work very well
Use tailwindcss development
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
Copy the codeAs we’ve seen, in the case of Bootstrap, the tag is much simpler, so you might ask why not use Bootstrap, because it’s simpler? Imagine a scenario: What if you wanted buttons to be slightly smaller on a particular page? Would you like to create a whole new sizing category for this unique situation? In this case, it would be easier to use many padding classes without even having to create a CSS file.
Another important tailwindCSS feature is that you can use classes to set hover, active, and Focus states. This is a feature Bootstrap has never had before
usage
The official documentation
\