tailwind css in react

1// craco.config.js
2module.exports = {
3  style: {
4    postcss: {
5      plugins: [
6        require('tailwindcss'),
7        require('autoprefixer'),
8      ],
9    },
10  },
11}

1npx tailwindcss-cli@latest init

1npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

1  {
2    // ...
3    "scripts": {
4-     "start": "react-scripts start",
5-     "build": "react-scripts build",
6-     "test": "react-scripts test",
7+     "start": "craco start",
8+     "build": "craco build",
9+     "test": "craco test",
10      "eject": "react-scripts eject"
11    },
12  }

1// tailwind.config.js
2module.exports = {
3  purge: [],
4  darkMode: false, // or 'media' or 'class'
5  theme: {
6    extend: {},
7  },
8  variants: {
9    extend: {},
10  },
11  plugins: [],
12}

1  // src/index.js
2  import React from 'react';
3  import ReactDOM from 'react-dom';
4+ import './index.css';
5  import App from './App';
6  import reportWebVitals from './reportWebVitals';
7
8  ReactDOM.render(
9    <React.StrictMode>
10      <App />
11    </React.StrictMode>,
12    document.getElementById('root')
13  );
14
15  // ...

1npx create-react-app my-project
2cd my-project

1  // tailwind.config.js
2  module.exports = {
3-   purge: [],
4+   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
5    darkMode: false, // or 'media' or 'class'
6    theme: {
7      extend: {},
8    },
9    variants: {
10      extend: {},
11    },
12    plugins: [],
13  }

1npm install @craco/craco

1/* ./src/index.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;