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

14 votes139 views5 answers
React conditional class
Javascript React
0 vote121 views1 answer
React Native Segmented Control Tab
Javascript React
0 vote128 views2 answers
Read and save excel with react
Javascript React
12 votes140 views2 answers
How to integrate redux dev tool to react application
Javascript React
15 votes126 views1 answer
React forwardref
Javascript React
0 vote144 views1 answer
React js usehistory push and pass props
Javascript React
0 vote162 views1 answer
How disabled react-select
Javascript React
0 vote163 views1 answer
Activez la compression de texte react js
Javascript React
0 vote138 views3 answers
React router browser refresh
Javascript React
0 vote142 views1 answer
Duplicate module name: React Native hasteimpl react native android
Javascript React