This content originally appeared on DEV Community and was authored by Nishit Bansal
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
This content originally appeared on DEV Community and was authored by Nishit Bansal
Nishit Bansal | Sciencx (2021-10-27T05:13:56+00:00) How to integrate TailwindCSS with ReactJS ? (In 9 easy steps). Retrieved from https://www.scien.cx/2021/10/27/how-to-integrate-tailwindcss-with-reactjs-in-9-easy-steps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.