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

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

一、安装
二、初始化 Tailwind
三、配置 PostCSS
四、创建和配置 CSS 文件
五、完整目录布局示例

---

一、安装

1. 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 文件。

1. npx tailwindcss init

复制代码

 配置 tailwind.config.js

1. // tailwind.config.js
2. module.exports = {
3.   content: [
4.     './index.html',
5.     './src/**/*.{js,ts,jsx,tsx}',  // 配置 Tailwind 处理哪些文件
6.   ],
7.   theme: {
8.     extend: {},
9.   },
10.   plugins: [],
11. }

复制代码

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

这个错误提示的意思是你在使用 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 模块语法

1. // postcss.config.js
2. export default {
3.   plugins: {
4.     tailwindcss: {},
5.     autoprefixer: {},
6.   },
7. };

复制代码

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

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

三、配置 PostCSS

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

1. // postcss.config.js
2. module.exports = {
3.   plugins: {
4.     tailwindcss: {},
5.     autoprefixer: {},
6.   },
7. }

复制代码

四、创建和配置 CSS 文件

1. /* src/index.css */
2. @tailwind base;
3. @tailwind components;
4. @tailwind utilities;

复制代码

使用tailwind语法： 

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

复制代码

表现即为成功 ：

五、完整目录布局示例

1. my-project/
2. ├── node_modules/
3. ├── public/
4. │   └── index.html
5. ├── src/
6. │   ├── assets/
7. │   ├── components/
8. │   ├── App.jsx
9. │   ├── index.css   ← 这里是你引入 Tailwind CSS 的文件
10. │   └── main.js     ← 这里引入了 index.css 文件
11. ├── tailwind.config.js
12. ├── postcss.config.js
13. ├── package.json
14. └── vite.config.js

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。