TalwindCSS is an awesome CSS framework that we can use to style anything with ease and get our webpage to look better. Integrating TailwindCSS with React is not so simple at first as lots of different things have to installed and not just doing two npm install and it will be done. I made it hell simpler now to do this. You can have a review over this and let me know if this works fine for you.
Installing React App
npx create-react-app .
Installing TailwindCSS
npm i -D tailwindcss postcss-cli autoprefixer
Here -D means dev dependencies
'
Here postcss is used for compiling tailwindcss and also allows us to use autoprefixer
Installing Tailwind config file
npx tailwind init tailwind.js --full
Create a postcss config file
touch postcss.config.js
Add in the following code in postcss.config.css
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')
]
}
- Now open src folder and create a file named assets and create two CSS files in it named main.css and tailwind.css
Add the below code in tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Now go to package.json as we want to create some extra scripts:-
Your scripts code should look like this:-
"scripts": {
"start": "npm run watch:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css" : "postcss src/assets/tailwind.css -o src/assets/main.css",
"watch:css" : "postcss src/assets/tailwind.css -o src/assets/main.css"
},
After doing this I faced error of not found postcss and autoprefixer, I just installed both of them using:-
npm i postcss
npm i autoprefixer
Now one last work to do is change the css file name in index.js
import './assets/main.css';
You should have this to import all the tailwindcss.