我不得不升级react-scripts
npm i react-scripts@latest
content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
尝试
import styles from "./index.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
-D
安装即可。 - Anna Costalonga对于React应用程序,有专门的tailwind CSS文档。在tailwind.config.js
中的module.exports
内将内容从content: ["./src/**/*.{html,js}"]
更改为以下内容:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
这解决了我的问题。
步骤1 -
按照Tailwind官方步骤中的所有步骤进行操作。
步骤2 -
npm install tailwindcss postcss autoprefixer@^9.8.6
步骤3(适用于TypeScript无需)-
npm install react-scripts@latest
步骤4 -
npx tailwindcss init -p
步骤5 -
运行你的React应用程序
我通过重新安装autoprefixer@^9.8.6来解决了这个问题。这个视频正确地指出了这一点https://youtu.be/v6Sy6VP2yOc
我安装了postcss
和autoprefixer
到开发依赖项中,同时与tailwindcss一起使用,这对我很有效。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
craco.config.js
中替换postcss为postcssOptions,例如:// craco.config.js
module.exports = {
style: {
// why use postcssOptions? -> https://github.com/dilanx/craco/issues/353
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
详细信息请查看此问题:https://github.com/dilanx/craco/issues/353
npm i tailwindcss postcss-cli autoprefixer@^9.8.6
output.css
文件,但是该文件必须在您的页面中导入,否则它将没有任何效果。 - gbalduzzi