Skip to main content

Tailwind CSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Go to Docs →

Configuration files#

Tailwind plugin produces the two necessary config files: tailwind.config.js and craco.config.js
See Tailwind configuration docs →

Include Tailwind in your CSS#

Tailwind is imported directly in App.tsx

src/App.tsx
import "tailwindcss/tailwind.css";

You can also include tailwind in your custom css →

Purging unused styles#

tailwind.config.js is configured to purge unused styles in pages and components.

tailwind.config.js
module.exports = {    purge: ["./src/**/*.tsx"]}

See guide on optimizing for production on Tailwind docs →

Configuring PostCSS#

Since Create React App doesn't let you override the PostCSS configuration natively. We need to create a craco.config.js file to set up Tailwind with React properly.

craco.config.js
module.exports = {    style: {      postcss: {        plugins: [          require('tailwindcss'),          require('autoprefixer'),        ],      },    },  }

Adding Tailwind CSS to your project later#

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @craco/craco
package.json
{    // ...    "scripts": {-   "start": "react-scripts start",-   "build": "react-scripts build",-   "test": "react-scripts test",+   "start": "craco start",+   "build": "craco build",+   "test": "craco test",  },}

Refer to official documentation for detailed installation. →