Tailwind CSS 是一个高度可定制的基础层 CSS 框架,它为您提供了构建定制化设计所需的所有构建块,而无需重新覆盖任何内建于框架中的设计风格。
步骤一、安装依赖
npm install tailwindcss@compat postcss@^7 autoprefixer@^9
注意:如果直接按照 tailwindcss 官网中的安装方式 npm install tailwindcss 可能会出现版本问题。
步骤二、在构建链中将 Tailwind 添加为PostCSS插件。
在文章:create-react-app 修改 webpack 配置 讲述了如何配置 webpack,现在我们需要在 create-react-app 修改 webpack 配置 这篇文章的基础上进行配置。
执行完步骤一后,在 config-overrides.js 中添加如下代码。
步骤三、将 Tailwind 添加到你的 CSS 代码中
在 create-react-app 文件的 index.css 文件中添加如下代码:
@import"tailwindcss/base";
@import"tailwindcss/components";
@import"tailwindcss/utilities";
步骤四、创建您的Tailwind配置文件(可选)
执行命令:npx tailwindcss init 会自动在项目根目录下创建一个 tailwind.config.js 文件,文件内容为
当然除了使用命令 npx tailwindcss init 创建 tailwind.config.js 也可以手动创建。
在 tailwind.config.js 中可以对 tailwindCSS 做一些自定义配置,详情见官网
参考网址:https://stackoverflow.com/questions/64903529/postcss-plugin-errors-with-rails-6-and-tailwindcss