Tailwind CSS 不适用于 React App
Posted
技术标签:
【中文标题】Tailwind CSS 不适用于 React App【英文标题】:Tailwind CSS does not work with React App 【发布时间】:2021-09-04 21:28:35 【问题描述】:我正在尝试使用 react 应用程序添加顺风 css。我遵循了顺风文档,如何使用反应设置顺风。
我尝试使用 tailwind 最新版本。我检查了 Nodejs 和 npm 是否安装完美。
但是当我运行npm run start
时,它总是会出错。我无法解决问题。
package.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"
请任何人帮忙。
【问题讨论】:
你试过重新安装node_modules
了吗?
这不是顺风错误
对不起大家,这个错误是在反应脚本模块中。现在工作正常。谢谢大家。
【参考方案1】:
如果你遵循顺风文档的方式,那么试试这个,在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 CSS 不适用于 React App的主要内容,如果未能解决你的问题,请参考以下文章
我使用 Tailwind 制作的 CSS 不适用于使用 gridsome 构建 netlify
Tailwind CSS flexbox gap 不适用于 iPhone Chrome
使用 Tailwind 时如何使用 Webpack 缩小 CSS