Tailwind css in react

  {
    // ...
    "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"
    },
  }

Source: tailwindcss.com

Tailwind css in react

npx tailwindcss-cli@latest init

Source: tailwindcss.com

Tailwind css in react

npm install @craco/craco

Source: tailwindcss.com

Tailwind css in react

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Source: tailwindcss.com

Tailwind css in react

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

Source: tailwindcss.com

Tailwind css in react

  // 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: [],
  }

Source: tailwindcss.com

Similar codes

0 vote144 views1 answer
Table td remove unknown padding in td
CSS
5 votes137 views3 answers
Keep background image fixed during scroll using css
CSS
0 vote152 views1 answer
Horizontal rule plus text
CSS
0 vote162 views1 answer
Spanning Items Across Rows and Columns
CSS
15 votes156 views4 answers
Sass
CSS
185 votes319 views6 answers
Background image css
CSS
33 votes130 views5 answers
Css strikethrough html text
CSS
0 vote149 views1 answer
Html invisible hr
CSS
1 vote179 views1 answer
Ie11 flex 1
CSS
0 vote138 views1 answer
Import scss
CSS