[英]Tailwind css 3.0.5 classes is not working with react
Tailwind css 3.0.5 is not working with react. Tailwind css 3.0.5 不适用于 React。 I have installed tailwind css as per the official installation guide of the tailwind css ( https://tailwindcss.com/docs/guides/create-react-app ).
我已经按照 tailwind css ( https://tailwindcss.com/docs/guides/create-react-app ) 的官方安装指南安装了 tailwind css。 The code which, I have written is below.
我写的代码如下。
package.json package.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 src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
postcss.config.js postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/app.js源代码/app.js
import "./index.css";
function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
export default App;
I think you need to update your create-react-app version, you're using version 4 which need something like Craco to let you override the PostCSS configuration natively我认为你需要更新你的 create-react-app 版本,你正在使用版本 4,它需要像Craco这样的东西来让你本机覆盖 PostCSS 配置
Try to update your create-react-app with this command npm install -g create-react-app
尝试使用此命令更新您的 create-react-app
npm install -g create-react-app
then try this step again https://tailwindcss.com/docs/guides/create-react-app然后再次尝试此步骤https://tailwindcss.com/docs/guides/create-react-app
Just update your react-script from v4 to lastest 5 version by: npm install react-scripts@latest.只需通过以下方式将您的 react-script 从 v4 更新到最新的 5 版本:npm install react-scripts@latest。 If you will stay with version 4 you have to use craco
如果您要使用第 4 版,则必须使用 craco
That was helpful for me这对我很有帮助
Uninstall your create-react-app globally.全局卸载你的 create-react-app。 Then do
然后做
npx create-react-app appname
After that follow the documentation for the framework create-react-app and you will be fine.之后按照框架 create-react-app 的文档,你会没事的。 https://tailwindcss.com/docs/guides/create-react-app
https://tailwindcss.com/docs/guides/create-react-app
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.