Reputation: 1
Tailwind css v3.0.24 is not working in react app.I have followed all the steps given in the official tailwindcss website but still not working.I have updated my react-script version even after that it is not working.
Here is my code.
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
package.json
{
"name": "my-portfolio-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"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"
]
}
}
App.js
import './App.css';
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Upvotes: 0
Views: 2327
Reputation: 1858
Your package.json
does not show tailwindcss
is installed as dev devDependencies remember to includes index.css
in your App.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Upvotes: 1
Reputation: 47
maybe you forget to import index.css to App.js
import './App.css';
import './index.css';
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
Upvotes: 3