tailwindcss 3 没有在反应中加载 css
Posted
技术标签:
【中文标题】tailwindcss 3 没有在反应中加载 css【英文标题】:tailwindcss 3 is not loading css in react 【发布时间】:2022-01-23 22:29:37 【问题描述】:我一直在使用 tailwindcss 2,但我想升级到 3。我按照他们的教程进行操作,但不知道为什么。
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
导入到index.tsx.
index.tsx
文件
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
【问题讨论】:
尝试将您的配置内容字符串替换为 this = ["./src/**/*.html,js"], 【参考方案1】:我发现了问题,你需要更新 react-scripts 到最新的更新
npm install react-scripts@latest
【讨论】:
我遇到了同样的问题。 Tailwind 首先工作,但随后停止。我安装了 react-scripts@latest 但没有任何改变。我通过删除全局样式表中的@tailwind base; ...
来修复它,然后将其添加回来。奇怪的错误,但也许它可以帮助某人以上是关于tailwindcss 3 没有在反应中加载 css的主要内容,如果未能解决你的问题,请参考以下文章