This project was bootstrapped with Create React App.
- npm install tailwindcss
- npx tailwindcss init(It will create tailwind.config.js)
- Make a file postcss.config.js and add,
module.exports = { plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
} - npm add postcss-cli (check the package.json for updates in dependencies)
- npm install [email protected] (compatible with "tailwindcss": "1.8.10")
- In the src/index.css file add:
@tailwind base;
@tailwind components;
@tailwind utilities;
- In the package.json file, add the scripts as:
"scripts": {
"build:css": "postcss src/index.css -o src/tailwind.css",
"watch:css": "postcss src/index.css -o src/tailwind.css -w",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
} - In src/App.js add
import './tailwind.css'; - In the src/index.js also add:
import './index.css';
import App from './App';
(Although they are already included still, confirm it so as to reflect the tailwind css effects of our components.) - npm run build:css (It will create the tailwind.css file in src)
- npm start