i have been using tailwindcss 2 but i wanted to upgrade to 3. I followed their tutorial but is not working i dont know why.
tailwind.config.js
module.exports = { content: [ "./src/**/*.{js,jsx,,ts,tsx}", ], theme: { extend: { }, }, plugins: [], }
postcss.config.js
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
index.css
@tailwind base; @tailwind components; @tailwind utilities;
index.css
is imported in index.tsx.
index.tsx
file
import ReactDOM from 'react-dom'; import './index.css'; import 'react-toastify/dist/ReactToastify.css'; import App from './App'; import { Provider } from 'react-redux'; import { store } from './redux/store'; import { BrowserRouter } from 'react-router-dom' ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') );
package.json
{ "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@dicebear/avatars": "^4.8.5", "@dicebear/avatars-avataaars-sprites": "^4.8.5", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.15", "axios": "^0.21.1", "numeral": "^2.0.6", "react": "^17.0.2", "react-canvas-confetti": "^1.2.1", "react-cookie": "^4.0.3", "react-countdown-circle-timer": "^2.5.3", "react-dom": "^17.0.2", "react-ga": "^3.3.0", "react-google-login": "^5.2.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-select": "^4.3.1", "react-toastify": "^7.0.4", "react-window": "^1.8.6", "redux": "^4.1.1", "redux-thunk": "^2.3.0", "socket.io-client": "^4.1.3", "typescript": "^4.3.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@testing-library/cypress": "^8.0.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", "@types/jest": "^26.0.24", "@types/node": "^12.20.19", "@types/numeral": "^2.0.1", "@types/react": "^17.0.15", "@types/react-dom": "^17.0.9", "@types/react-redux": "^7.1.18", "@types/react-router-dom": "^5.1.8", "@types/react-select": "^4.0.17", "@types/react-window": "^1.8.5", "@types/redux": "^3.6.0", "@types/tailwindcss": "^2.2.1", "@types/typescript": "^2.0.0", "@typescript-eslint/eslint-plugin": "^4.29.0", "@typescript-eslint/parser": "^4.29.0", "autoprefixer": "^10.4.0", "concurrently": "^6.5.1", "cypress": "^8.3.1", "postcss": "^8.4.5", "redux-devtools-extension": "^2.13.9", "redux-mock-store": "^1.5.4", "tailwindcss": "^3.0.7" } }
Text.jsx
const Test = () => { return ( <div className='flex text-green-500'> <h1>Text Green</h1> </div> ) } export default Test
Advertisement
Answer
I found the issue, you need to update react-scripts to the latest update
npm install react-scripts@latest