How to use Tailwind ui in ReactJS?

[nadirhussainnn]

1. Visit this documentation and this
2. Or follow these steps

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

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

npm install @craco/craco

And change your package.json as

Create craco.config.js named file with package.json file level as

Then add this code in craco.config.js file // craco.config.js module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }

Execute npx tailwindcss-cli@latest init command in terminal, it will create tailwind.config.js file as

Put this code in tailwind.config.js file

module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('@tailwindcss/forms'), ], } Now in index.css file remove whole css code and put

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

import index.css in index.js (imported by default).

Now install npm install @headlessui/react @heroicons/react and npm i @tailwindcss/forms

and use import tailwindcss/tailwind.css in App.js as

YOU ARE READY TO USE tailwind ui and tailwind css in your project.