React中使用tailwind报错
按官网的方法安装,,最后
npm run start
会报错哦
UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function
查阅了各种网站没有找到答案,最后在github上面找到了解答:github
原因是
CRACO
还没有支持create-react-app 5
版本
接下来上配置步骤,大部分和官网配置步骤相同,有差异的地方我做了标注
附:官网配置步骤
创建您的工程
如果您还没有建立一个新的 Create React App 项目,请先创建一个新的项目。最常见的方法是使用 Create React App:
npx create-react-app my-project
cd my-project
初始化 Tailwind CSS
安装 Tailwind 以及其它依赖项:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS 中,我们建议您安装 autoprefixer 去处理这个问题,就像上面的代码片段所展示的那样。
官网安装的是postcss7兼容版本,我这里直接安装
postcss8
安装和配置 CRACO
由于 Create React App 不能让您覆盖原生的 PostCSS 配置,所以我们还需要安装 CRACO 才能配置 Tailwind。
npm i @craco/craco@7.0.0-alpha.3
官网的命令是
npm install @craco/craco
,这样会导致craco版本不够新,也就是运行报错的关键,所以使用我这边的命令,安装最新版本的craco
安装完毕后,更新 package.json
文件中的 scripts
,将 eject
以外的所有脚本都用 craco
代替 react-scripts
。
接下来,在项目根部创建一个 craco.config.js
,并添加 tailwindcss
和 autoprefixer
作为 PostCSS 插件。
// craco.config.js
module.exports = {
style: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
注意这里把官网里的
postcss
改成了postcssOptions
创建您的配置文件
接下来,生成您的 tailwind.config.js
文件:
npx tailwindcss-cli@latest init
这将会在您的项目根目录创建一个最小化的 tailwind.config.js
文件:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
配置 Tailwind 来移除生产环境下没有使用到的样式声明
在您的 tailwind.config.js
文件中,配置 purge
选项指定所有的 components 文件,使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。
在您的 CSS 中引入 Tailwind
打开 Create React App 默认为您生成的 ./src/index.css 文件 并使用 @tailwind
指令来包含 Tailwind的 base
、 components
和 utilities
样式,来替换掉原来的文件内容。
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。
阅读我们的文档添加基础样式,提取组件,和添加新的功能类,以获得用您自己的自定义 CSS 扩展 Tailwind 的最佳实践。
最后,确保您的 CSS 文件被导入到您的 ./src/index.js
文件中。
您已经完成了所有步骤!现在,当您运行 npm run start
, Tailwind CSS 就可以在您的 Create React App 项目中使用了。