Tailwind css v3.0.24在react应用程序中不起作用

Question

Tailwind css v3.0.24在react应用程序中不工作。我已经遵循了官方tailwindcss网站上给出的所有步骤，但仍然没有工作。我已经更新了我的react脚本版本，即使在那之后它也不起作用。

这是我的密码。

tailwind.config.js

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

软件包.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;

postss.config.js

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

Answer 1

也许您忘记了将index.css导入App.js

import './App.css';
import './index.css';
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;

Answer 2

您的package.json未显示tailwindcss已安装为devdevDependencies请记住在App.js中包含index.css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p