🌟 Create a React application via:
npx create-react-app your-app-name
🌟 Inside your application's folder run this commands in terminal:
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli@latest
npx tailwind init tailwind.js --full
🌟 Create a file in the React Appliction called postcss.config.js
🌟 Add this code in postcss.config.js
:
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss("./tailwind.js"),
require("autoprefixer")
]
}
🌟 In src folder create assets
folder
🌟 In assets folder create a file tailwind.css
🌟 Add the following imports in tailwind.css
:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
🌟 In assets folder create a file main.css
(the imports in tailwind.css
are compiled into this main.css
which we will include into our application)
🌟 In the package.json
file edit & add the following scripts:
"start": "npm run watch:css && react-scripts start",
"build": "npm run 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"
🌟 In the index.js
file remove the following line and and replace it with the following line respectively:
import './index.css';
import './assets/main.css';
🌟 Hurray 🥳🥳🥳 Thats all the knowledge you need to integrate TailwindCSS with React. The NetNinja's YouTube Tutorial and the TailwindCSS documentation will help you learn TailwindCSS more, thankyou 👊.