在react中使用tailwindcss

2025专业AI写手!

于 2024-03-16 01:05:45 发布

阅读量1.2k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： React系列文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/136753158

本文详细介绍了如何在CreateReactApp项目中安装和配置TailwindCSS，包括使用npm、CRACO、PostCSS插件，以及创建和定制tailwind.config.js文件的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装tailwind css

npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

安装 CRACO

由于 Create React App 不能让您覆盖原生的 PostCSS 配置，所以我们还需要安装 CRACO 才能配置 Tailwind。

npm install @craco/craco

配置CRACO

在项目根部创建一个 craco.config.js，并添加 tailwindcss 和 autoprefixer 作为 PostCSS 插件

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

创建 Tailwind 配置文件

生成 tailwind.config.js 文件，以下命令在项目根目录创建一个最小化的 tailwind.config.j

最低0.47元/天解锁文章

200万优质内容无限畅学