create react app and tailwind
1. npx create-react-app . 2. npm i -D tailwindcss postcss-cli autoprefixer or npm install tailwindcss@latest postcss@latest autoprefixer@latest //postcss - transform our compile css // autoprefixer - set vendor prefixes within our css automatically when needed //Generate npc config file 3.npx tailwind init tailwind.js --full // Create post css config file 4. touch postcss.config.js //open postcss.config.js //add this to the file __________________________________________ const tailwindcss = require('tailwindcss'); module.exports = { plugins: [ tailwindcss('./tailwind.js'), require('autoprefixer') ] } __________________________________________ 5. inside scr, create assets folder src/assets - create tailwind.css and main.css in tailwind, add this code //this will compile to the main css that will include in our app ___________________________________________ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; ___________________________________________ 6. Open package.json and add this iside the 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" ____________________________________________ 7. run 'npm start' add this to index.js _____________________________________ import React from 'react'; import ReactDOM from 'react-dom'; import './assets/main.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); _________________________________ install router 1. npm i --save react-router-dom