1) Create a react application(with a name of your choice):
create-react-app tailwind-react
2) Install the following dev dependencies:
npm i -D tailwindcss postcss-cli autoprefixer
3) Generate the tailwind config file (has a list of all the classes):
npx tailwind init tailwind.js -full
4) Create a postcss.config.js file:
touch postcss.config.js
5) Write the following code in postcss.config.js:
const tailwind = require("tailwindcss");
module.exports = {
plugins: {
tailwindcss("./tailwind.js)
require("autoprefixer)
}
}
6) In the src folder create a new folder 'assets' and create 2 new files "tailwind.css" and "main.css"
cd src
mkdir assets && cd assets
touch tailwind.css main.css
7) In tailwind.css write the following piece of code:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utility";
8)Now, in package.json add follwing to
"scripts":{}
"start": "npm run watch:css && react-scripts start",
"build": "npm build build:css && react-scripts build",
"build:css":"postcss src/assets/tailwind.css -o src/assets/main.css",
"watch:css":"postcss src/assets/tailwind.css -o src/assets/main.css",
Your scripts object should look something 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"
},
9) Finally, run your react app:
npm run start
or
npm start
For a video demonstration of this entire process, please refer to @traversymedia
's video
https://www.youtube.com/watch?v=FiGmAI5e91M&t=488s
Top comments (13)
It will help in managing data in a easy way with all the features on building data table using react table. sorts de rupture
Great post, thanks!
Nice man 👍🏻!!
Thanks @vashuharitasya
Would you prefer to use ViteJS instead of CRA for a React project? Why / why not?
ViteJS is sponsored by TailwindLabs
Nice bro!
Thanks @vaishnavigit07 :)
Well explained 👍
Thanks @sanidhyakashyap :)
Noice!
Thanks @vksuvam :)
Thanks ! For me, I use Vite, which have a native tailwindcss integration
I don't know about Vite, thanks for the information! I'll definitely check it out!