顺风css 3.0。5不与react一起工作。我已经按照《tailwind css官方安装指南》安装了tailwind css(https://tailwindcss.com/docs/guides/create-react-app).我写的代码如下。
包裹json
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.5.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.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"
]
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.7"
}
}
SRC/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
SRC/app.js
import "./index.css";
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
我认为你需要更新你的创建-反应应用程序版本,你正在使用版本4,它需要像Craco这样的东西来让你本地覆盖PostCSS配置
尝试使用此命令npm install-g create react app
全局更新您的create react app,然后重试此步骤https://tailwindcss.com/docs/guides/create-react-app
更新你的create-react-app仅在当前项目npm安装react-scripts@latest