Tailwind CSS 初学者入门指南:项目集成,主要变更内容!

网站名称 类型 网址
Tailwind CSS 官方文档 官方文档 https://tailwindcss.com/docs
Tailwind Play 在线编辑器 https://play.tailwindcss.com/
Tailwind Awesome 资源集合 https://www.tailwindawesome.com/
Tailwind CSS 中文文档 中文文档 https://www.tailwindcss.cn/
komavideo/LearnTailwindCSS Github教程 https://github.com/komavideo/LearnTailwindCSS

✨ 简介:什么是 Tailwind CSS?

Tailwind CSS 是一个实用优先的 CSS 框架,提供大量原子类(utility classes),使开发者能够快速构建响应式和现代化的用户界面。

优点包括:

  • 🚀 快速开发

  • 🔧 高度可定制

  • 🧱 原子化设计

  • 😍 社区资源丰富(例如组件库、插件等)

🛠️ Tailwind CSS V3 集成指南

  1. 创建 Vue / React 项目(使用 Vite):
bash 复制代码
npm create vite@latest my-vue-app -- --template vue
或
npm create vite@latest my-vue-app -- --template react
cd my-vue-app
npm install
  1. 安装 Tailwind CSS 及其依赖:
bash 复制代码
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
  1. 配置 tailwind.config.js
js 复制代码
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. src/assets/main.csssrc/index.css 中添加 Tailwind 指令:
css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

🛠️ Tailwind CSS V4 集成指南

  1. 创建 Vue / React 项目(使用 Vite):
bash 复制代码
npm create vite@latest my-vue-app -- --template vue
或
npm create vite@latest my-vue-app -- --template react
cd my-vue-app
npm install
  1. 安装 Tailwind CSS 及其依赖:
bash 复制代码
npm install -D tailwindcss @tailwindcss/vite
  1. 配置 vite.config.ts
js 复制代码
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
  1. src/assets/main.csssrc/index.css 中添加 Tailwind 指令:
css 复制代码
@import "tailwindcss"; 

🧠 V3 与 V4 的不同

🚫v4 不再使用 tailwind.config.js

在 Tailwind CSS v3中,我们通过 tailwind.config.js 文件来进行配置,包括内容路径、插件、主题扩展、前缀设置等。

但到了 v4,这些设置被"拆分"并迁移至 index.css 中 。

📦 内容(content)配置:自动化完成

在旧版本中,你需要手动指定项目中哪些文件会用到 Tailwind 类名,例如:

js 复制代码
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']

而在 v4 中,这一步骤完全自动化 ✅。Tailwind 会自动扫描并分析项目文件,无需再配置 content 字段。

🔌 插件配置的新方式

在 v3 中,你可以这样注册插件:

js 复制代码
// tailwind.config.js
plugins: [require('@tailwindcss/forms')]

v4 中则直接在 CSS 文件顶部导入插件,示例如下:

css 复制代码
@import "tailiwindcss";
@plugin "daisyui";

注意:插件名需根据官方文档或第三方库说明书来书写。

🧩 前缀配置方式变化

v3 中我们可以在 tailwind.config.js 文件中添加前缀:

js 复制代码
prefix: 'tw-'

v4 则需要在 CSS 文件顶部配置前缀 ,同时要求使用冒号分隔:

css 复制代码
@import "tailiwindcss" prefix(D);

⚠️ 注意:新版本前缀必须使用 冒号 分隔,例如:D:text-red-500,而非 D-text-red-500

html 复制代码
<div className="D:text-sm"> </div>

🎨 主题定制与 theme 指令

在 v3 中使用 extend 来扩展默认主题,例如:

js 复制代码
extend: {
  colors: {
    twitter: '#1DA1F2',
    orange: {
      500: '#FF5722',
    },
  }
}

v4 中这一切被迁移到 CSS 文件内的 @theme 指令中

css 复制代码
@theme {
  D-color-twitter: #1DA1F2;
  D-color-orange-500: #FF5722;
  space: initial; /* 相当于 v3 的 screens */
}
  • 可以通过变量名是否存在来判断是"新增"还是"覆盖"主题配置。

🧠 @theme 是 v4 中主题定制的核心,取代了原来的 theme.extend

🔄 配置项名称的变化

Tailwind v4 对部分配置项名称进行了统一和现代化改进,例如:

v3 名称 v4 名称 说明
screens --breakpoint-* 控制响应式断点(默认变量)
colors --color-* 所有颜色变量采用前缀命名

📌 小结:迁移指南 ✅

配置项 v3 方式 v4 方式
配置文件 tailwind.config.js 自动完成,无需tailwind.config.js
插件 plugins 在 config 中注册插件 在 CSS 文件中使用 @plugin 导入
前缀 prefix 在 config 中写 prefix: 'tw-' 在 CSS 顶部用 @prefix 设置
主题扩展 theme 使用 extend 合并设置 使用 @theme 并按变量名设置

Tailwind CSS v4 大幅简化了配置方式,早学早超神 🧙‍♂️✨!

如果你觉得这篇文章对你有帮助,不妨点个赞 ❤️、转发 🌐 或留言互动 💬!下一篇将带你解锁 如何利用Tailiwindcss 轻松完成网站的响应式设计,敬请期待!

相关推荐
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
牧杉-惊蛰2 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app