在React中引入tailwind css(图文详解)

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

目录

一、安装

[二、初始化 Tailwind](#二、初始化 Tailwind)

[三、配置 PostCSS](#三、配置 PostCSS)

[四、创建和配置 CSS 文件](#四、创建和配置 CSS 文件)

五、完整目录结构示例


一、安装

复制代码
npm install -D tailwindcss postcss autoprefixer
  1. Tailwind CSS 生成的庞大 CSS 文件需要优化 : Tailwind 本身生成了大量的 CSS 类,这些类可能包含许多浏览器前缀和其他属性,而这些并不是每个浏览器都需要的。通过使用 PostCSS ,你可以让 Tailwind 与其他插件(如 Autoprefixer)一起工作,自动优化和清理不必要的 CSS 规则,最终生成一个更小、更高效的 CSS 文件。

  2. Autoprefixer 确保跨浏览器兼容性: Autoprefixer 可以进一步帮助确保 CSS 的所有属性在所有目标浏览器上都能正常工作。通过自动添加所需的浏览器前缀,

  3. JIT( 即时编译)模式下优化构建速度和体积: Tailwind 的 JIT 模式依赖 PostCSS 在构建时动态生成实际使用的 CSS 类,确保最终的 CSS 文件只包含页面中需要的样式。

二、初始化 Tailwind 配置

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

复制代码
npx tailwindcss init

配置 tailwind.config.js

javascript 复制代码
// 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 模块语法

javascript 复制代码
// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

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

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

三、配置 PostCSS

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

javascript 复制代码
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

四、创建和配置 CSS 文件

javascript 复制代码
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

使用tailwind语法:

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

显示即为成功 :

五、完整目录结构示例

javascript 复制代码
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
相关推荐
知识分享小能手42 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲44 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel3 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C4 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904274 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js