当前位置：首页 > article >正文

在React中引入tailwind css（图文详解）

article 2025/1/6 3:47:09

Tailwind CSS 是一个功能强大的 CSS 框架，旨在使开发者能够以更高效、灵活的方式创建现代、响应式的网页。与传统的 CSS 框架（如 Bootstrap 或 Foundation）不同，Tailwind 采取了“实用类”（Utility-First）的设计原则，提供了一系列预定义的 CSS 类，这些类可以直接用于 HTML 元素中，从而避免了编写冗长的自定义样式代码。

一、安装

二、初始化 Tailwind

三、配置 PostCSS

四、创建和配置 CSS 文件

五、完整目录结构示例

一、安装

npm install -D tailwindcss postcss autoprefixer

Tailwind CSS 生成的庞大 CSS 文件需要优化： Tailwind 本身生成了大量的 CSS 类，这些类可能包含许多浏览器前缀和其他属性，而这些并不是每个浏览器都需要的。通过使用 PostCSS，你可以让 Tailwind 与其他插件（如 Autoprefixer）一起工作，自动优化和清理不必要的 CSS 规则，最终生成一个更小、更高效的 CSS 文件。
Autoprefixer 确保跨浏览器兼容性： Autoprefixer 可以进一步帮助确保 CSS 的所有属性在所有目标浏览器上都能正常工作。通过自动添加所需的浏览器前缀，
JIT（即时编译）模式下优化构建速度和体积： Tailwind 的 JIT 模式依赖 PostCSS 在构建时动态生成实际使用的 CSS 类，确保最终的 CSS 文件只包含页面中需要的样式。

二、初始化 Tailwind 配置

这将在项目根目录中生成一个基础的 tailwind.config.js 文件。

npx tailwindcss init

配置 tailwind.config.js

// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',  // 配置 Tailwind 处理哪些文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

请注意此时这样写会报错：

这个错误提示的意思是你在使用 ES 模块（"type": "module"）的环境中，PostCSS 配置文件 postcss.config.js 被认为是 ES 模块，而不是 CommonJS 模块。这导致在引用 module.exports 时发生错误。

此时有三种解决方法：

1、将 `postcss.config.js` 改为 `.cjs` 后缀

将 postcss.config.js 重命名为 postcss.config.cjs

2、修改 `postcss.config.js` 使用 ES 模块语法

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3、删除 `type: "module"`，使用 CommonJS

可以删除 package.json 中的 "type": "module" 配置，让项目继续使用 CommonJS。这样，你可以继续使用 .js 后缀，并且可以直接使用 module.exports

三、配置 PostCSS

在项目根目录创建或编辑 postcss.config.js 文件：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

四、创建和配置 CSS 文件

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

使用tailwind语法：

<h1 className="underline text-4xl font-bold text-blue-500">
    Hello, Tailwind CSS!
</h1>

显示即为成功：

五、完整目录结构示例

my-project/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.jsx
│   ├── index.css   ← 这里是你引入 Tailwind CSS 的文件
│   └── main.js     ← 这里引入了 index.css 文件
├── tailwind.config.js
├── postcss.config.js
├── package.json
└── vite.config.js

查看全文

http://www.kler.cn/a/464873.html