๐ 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 ๐.