[英]Tailwind CSS does not work with React App
我正在尝试使用 React 应用程序添加 tailwind css。 我遵循了 tailwind 文档,如何使用 react 设置 tailwind。
我尝试使用 tailwind 最新版本。我检查了 Nodejs 和 npm 是否已完美安装。
但是当我运行npm run start
,它总是会出错。 我无法解决问题。
包.json
{
"name": "tailwind-css",
"version": "0.1.0",
"homepage": "",
"private": true,
"dependencies": {
"@craco/craco": "^6.1.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"engines": {
"npm": "6.14.6",
"node": "12.18.4"
},
"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": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.2"
}
}
请任何人帮助。
只需将您的 react-script 从 v4 更新到最新的 5 版本:npm install react-scripts@latest。 如果您要使用第 4 版,则必须使用 craco
这对我很有帮助
如果您遵循顺风文档方式,请在package.json
尝试此操作
"scripts": {
"start": "craco start && postcss src/css/app.css -o public/app.css", <--- need to inser postcss script as your css reference path.
"build": "craco build",
并像这样检查你的craco.config.js
。
module.exports = {
style: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
};
快乐编码!
试试吧 在tailwind.config.js中写这个
模块.exports =
{
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}"
].
..///
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.