Tailwind CSS快速上手 Tailwind CSS的安装、配置、使用

MuGuiLin2025-07-23 15:57

📚前言

在Web前端开发的历史长河中，CSS的编写方式经历了多次演进，从早期的原生CSS 到 CSS预处理(Less/Sass/Stylus) 到 CSS-in-JS(Styled-Components/Emotion) 再到 Utility-First 原子化CSS。每一种演进方案其本质都是围绕"开发效率"、"运行性能"、"可维护性" 这三个核心点之间寻找最佳平衡而衍生出各类CSS库/框架/引擎。

🍀原生CSS&CSS预处理（Less / Sass / Stylus）

开发人员手动编写.css文件 、.less文件等，然后通过<link>标签 或 @import引入使用

  • 存在问题： 当随着项目变大，很快就会面临命名冲突、代码冗余、缺乏逻辑组织、难以维护等
  • 解决方案：
    • CSS命名规范(BEM)： CSS-BEM 命名规范通过严格的命名约定来约束作用域，增强代码的可读性和可维护性，是一种用于CSS模块化开发的命名约定规范，但它依赖于开发人员的自觉性，且class类名很长。
    • CSS预处理(Less / Sass / Stylus)： 引入了变量、嵌套、混入、继承等编程概念，虽然增强了CSS的组织性和可复用性，但是并未从根本上解决命名他全局污染的问题。

🍀CSS-in-JS（Styled-Components / Emotion)）

CSS-IN-JS这种解决方案，它提倡我们把CSS代码写在JavaScript代码当中，在React JSX/TSX等类似的组件化框架兴起后，也将CSS样式视为组件的一部分。

  • 核心： styled-components、Emotion将CSS样式直接写在JavaScript文件中，为每个组件生成唯一的、带哈希值的类名，从而实现"作用域化样式"，彻底避免了全局污染的问题。
  • 优势：
    • 组件化： 样式与逻辑类聚，方便复用和维护。
    • 动态样式： 可以方便的基于组件的state 或 props来动态改变样式。
  • 问题：
    • 心智负担： 要在JavaScript 和 CSS 之间来回的切换语法，而且需要一定的学习成本去学习特定库的API。
    • 运行开销： CSS样式不是提前生成的，而是在运行时解析JavaScript并动态生成CSS，所带来一定的性能损耗。

🍀Utility-First CSS(Tailwind CSS / UnoCSS)

Utility-First(功能优先)原子化CSS 是一种与传统"语义化CSS"截然不同的思路，它提供了一系列高度可组合的、功能单一的"原子类"(Atomic CSS / Utility Classes)。

  • 核心： 开发人员无需再为组件编写专门的CSS类，而是直接在HTML中组合这些原则来构建样式。

    html 复制代码 
    <!-- 传统写法：-->
<style>
    .btn-primary{
        padding: 8px 16px;
        color: white;
        border-radius: 4px;
        background-color: blue;
    }
</style>
<button class="btn-primary">提交</button>

<!-- 原子化CSS：-->
<button class="py-2 px-4 text-white rounded bg-blue-500">提交</button>

  • 优势：

    • 无需思考命名：从根本上消除了为class命名的烦恼。
    • 无需切换文件：样式和结构在一起，开发人员心流不被打断。
    • 约束与一致性：所有样式都来自预设的design tokens(在tailwind.config.js文件中定义)，保证了整个项目在视觉上的一致性。
    • 性能佳体积小：通过类似PurgeCSS等工具，在构建项目时自动分析扫描，首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 CSS 中删除未使用的选择器，从而生成更小的 CSS 文件。

🏡Tailwind CSS简介

Tailwind CSS 官网 https://tailwindcss.com

Tailwind CSS 是一个实用优先的 CSS 框架，与传统的框架（如 Bootstrap、Foundation）不同，它没有预定义的组件，而是提供了一系列原子化的 CSS 类，允许你直接在 HTML 中应用样式。

Tailwind CSS 是一个工具优先的框架，意味着它提供了大量的预定义类，而不是预设的组件,这使得开发者可以构建几乎任何设计，而不需要编写 CSS。

简而言之，只需要知道类名以及对应的属性和值范围就OK了！

📊Vue3 项目实例

为了便于项目演示，这里就以常用的 Vite + Vue3 + TypeScript + Tailwind CSS 4 为项目实例，从项目的安装、初始化配置等流程逐一说明。

1、创建项目

shell 复制代码 
# 构建Vue项目
bun create vue@latest

# 输入项目名，这里以tailwind-css-demo为例
tailwind-css-demo

# 进入tailwind-css-demo项目根目录
cd tailwind-css-demo

2、安装依赖

shell 复制代码 
# 安装vite项目依赖
bun install

# 安装Tailwind CSS引擎依赖 和@tailwindcss/vite插件
bun add -D tailwindcss @tailwindcss/vite

3、配置 vite.config.ts

Tailwind CSS 4.x最大的变化就是 "零配置" 优先，无需再配置tailwind.config.js 和 postcss.config.js 文件，所有配置都可以直接在vite.config.ts中完成。

ts 复制代码 
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

// 引入@tailwindcss/vite插件，在编译时自动将class类名对应的样式提取出来添加到style标签中
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    tailwindcss(),  // 注入tailwindcss插件
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    // host: '0.0.0.0',
    // port: 8080,
    open: true,
    cors: true,
  },
})

4、Tailwind CSS IntelliSense 扩展

在代码编辑器中，例如：常见的 Visual Studio Code、Cursor AI Code Editor 、Trae - IDE等编辑器，在扩展管理中搜索 ：Tailwind CSS IntelliSense 关键字，直接安装即可，Tailwind CSS IntelliSense - Visual Studio Marketplace，安装成功后，在HTML中编写class原子类时就会自动辅助提示，以便高效的开发。

具体了解更多扩展配置说明https://tailwindcss.com/docs/editor-setup

5、引入tailwindcss

在前端项目工程src目录中的全局的style.css 或 main.css 样式文件中引入 tailwindcss 核心库

css 复制代码 
<!-- https://tailwindcss.com/docs/preflight -->
@import "tailwindcss";

6、使用Tailwind CSS

完成以上步骤以后，就可以在项目任意HTML标签中的class属性中添加原子类了，同时还支持响应试设计：sm，md， lg，xs、xl等，例如w-lg表示在中等屏幕，以及悬停 伪类、伪元素、焦点和其他状态Hover, focus, and other states等等，都可以通过不同的修饰符，快速得到对应状态样式。

使用实用程序类（Utility Classes）进行样式设置

这是Tailwind的基石，每一个类名都代表一个 单一 、不可再分的CSS样式属性，例如，以下是常用的Tailwind CSS 原子类 与 原生CSS样式属性 对照情况。

🚀查看更多Tailwind CSS 原子类、🛠️线在尝试体验 Tailwind Play

Tailwind CSS 原子类 原生CSS样式属性
flex、grid display: flex;、display: grid;
justify-center、items-center justify-content: center;、align-items: center;
box-border box-sizing: border-box;
float-left float: left;
absolute、relative position: absolute;、position: relative;
w-px、w-[50px]、w-full width: 1px;、width: 50px;、width: 100%;
text-xs font-size: 0.75rem(12px) ;
text-<size>/<number> font-size: <size>;
text-center text-align: center;
text-white color: #fff;
font-bold font-weight: 700;
bg-white background-color: #000;
bg-red-500 background-color: #fb2c36;
shadow-2xs box-shadow: 0 1px rgb(0 0 0 / 0.05);
text-shadow-xs text-shadow: 0px 1px 1px rgb(0 0 0 / 0.2);
rounded-xs border-radius: 0.125rem (2px);
cursor-pointer cursor: pointer;

颜色（Colors）

Tailwind CSS 定义了一系列符合大众UI的色阶，可根据自己需要选择使用，当然如果在不满足你的需求时可以在方括号中，如text-[#000] 来自定义任意色值。

🚀Tailwind CSS 色值体系

html 复制代码 
<body>
    <div class="text-red-500 bg-blue-500">
    	红色文字, 蓝色背景
    </div>
    <div class="text-[#000] bg-[#fff]">
        自定义：黑色文字，白色背景
    </div>
</body>

7、自定义Tailwind CSS原子类

  • @layer 自定义原子类 ， 如果在Tailwind CSS中，原有的原子类不能满足需求时，可在全局style.css 或 main.css 样式文件中通过使用@layer{...}来添加自定义的原子类。

    css 复制代码 
    @import "tailwindcss";

:root {
    --color-primary: #409eff;
    --color-primary-hover: #155dfc;
        
    --color-success: #67c23a;
    --color-success-hover: #4c8b2f;
}

@layer {
    .item {
		position: relative;

		&::after {
			content: '';
			display: inline-block;
			position: relative;
			top: 1px;
			width: 18px;
			height: 12px;
			background: url('@/assets/img/not.webp') no-repeat center center;
			background-size: contain !important;
		}
	}

	.item_active {
		b::after {
			background: url('@/assets/img/yes.webp') no-repeat center center;
		}
	}

	.type_primary {
		border: 2px solid var(--color-primary);
		background-color: var(--color-primary-hover);
	}

	.type_success {
		color: var(--color-success);
		background-color: var(--color-success-hover);
	}
}
    html 复制代码 
    <body>
    <ul class="m-5 p-2">
        <li class="mb-10 item">
        	<span class="p-2 type_primary">primary</span>
            <span class="p-2 type_success">success</span>
        </li>
    </ul>
</body>

  • @theme 主题、变量定义 ， 在自定义CSS中，自定义设计令牌，如：颜色值，宽高、间距等，可通过@theme{...}来定义（类似原生CSS中的:root{...}），以保证项目整体样式的一致性。

    css 复制代码 
    @import "tailwindcss";

@theme {
  --mu-primary: #409eff;
  --mu-primary-hover: #155dfc;

  --mu-success: #67c23a;
  --mu-success-hover: #4c8b2f;

  --mu-warning: #e6a23c;
  --mu-warning-hover: #c88b2f;

  --mu-danger: #f56c6c;
  --mu-danger-hover: #d33f3f;

  --mu-info: #909399;
  --mu-info-hover: #7c7c7c;
}

  • @apply 组合现有工具类 ， 如果有一些原子类经常被反复的使用时，就可以通过@apply{...}将它们组合成一个新的原子类，在使用时，只需使用那个新的原子类名即可！

    css 复制代码 
    @import "tailwindcss";

.btn-primary {
	@apply px-5 py-2 rounded-md text-white bg-blue-500 hover:bg-blue-600 hover:cursor-pointer;
}
    html 复制代码 
    <body>
    <button class="px-5 py-2 rounded-md text-white bg-blue-500 hover:bg-blue-600 hover:cursor-pointer">反复使用时</button>
    
    <!-- 调用新的组合原子类名 -->
    <button class="btn-primary">组合使用后</button>
</body>

  • @utility 创建动态工具类 ，这是Tailwind CSS 4 新增的强大功能，它可以创建全新的、可被修饰的、组合式工具类，通过@utility 类名-*{...} 来动态匹配对应的样式类，其中 * 表示动态变化的样式类。

    css 复制代码 
    @import "tailwindcss";

@theme {
  --mu-primary: #409eff;
  --mu-primary-hover: #155dfc;

  --mu-primary-dark: #fff;
  --mu-primary-hover-dark: #409eff;

  --mu-success: #67c23a;
  --mu-success-hover: #4c8b2f;

  --mu-success-dark: #fff;
  --mu-success-hover-dark: #67c23a;

  --mu-warning: #e6a23c;
  --mu-warning-hover: #c88b2f;

  --mu-danger: #f56c6c;
  --mu-danger-hover: #d33f3f;

  --mu-info: #909399;
  --mu-info-hover: #7c7c7c;
}

@utility btn-* {
  @apply px-5 py-2 rounded-md text-white hover:cursor-pointer;
  background-color: --value(--mu-*);
  &:hover {
    background-color: --value(--mu-*-hover);
  }
	
   <!-- 暗色主题时的颜色 -->
  @variant dark {
    @apply text-black;
    background-color: --value(--mu-*-dark);
    &:hover {
      background-color: --value(--mu-*-hover-dark);
    }
  }
}
    html 复制代码 
    <body>
    <button class="btn-primary">主要样式颜色</button>
    <button class="btn-success">成功样式颜色</button>
    <button class="btn-warning">警告样式颜色</button>
</body>

8、扩展

除了 Tailwind CSS 功能优先的原子化 CSS 框架原子类以外，其他还有类似的原子化 CSS引擎，如：Uno CSS 即时按需的原子化 CSS 引擎，它不会预先生成任何 CSS，而是根据你在代码中实际使用的类名，动态地、即时地生成对应的 CSS 规则。

Tailwind CSS：目前依然是一个功能强大、可靠且值得信赖的选择，它定义了 Utility-First 的最佳实践。

Uno CSS 将是CSS工具未来的演进方向。它以更智能、更高效的方式解决了同样的问题，进一步提升了性能和灵活性。

最后、无论是原子化CSS框架，还是原子化CSS引擎，都会给你带来不样的开发体验，都可以去尝试用一下。

相关推荐
无法长大2 天前
如何判断项目需不需要用、能不能用Tailwind CSS
前端·css·vue.js·elementui·vue3·tailwind css
Irene199124 天前
Tailwind CSS vs Bootstrap vs ElementUI（ElementPlus） 全面对比表
elementui·bootstrap·element plus·tailwind css
Irene199124 天前
Tailwind CSS 常用特性总结表
tailwind css
Irene199124 天前
在 Vue 3 项目中使用 Tailwind CSS
vue.js·tailwind css
蓝胖子的多啦A梦1 个月前
TailwindCSS：高效构建现代化UI
前端·css·使用教程·tailwind css
GDAL1 个月前
从零开始上手 Tailwind CSS 教程
前端·css·tailwind
熊猫钓鱼>_>2 个月前
Vue3 + Tailwind CSS + DaisyUI 现代前端开发完全攻略
前端·css·vue.js·vue3·tailwind·daisyui·现代开发
wusp19942 个月前
【超完整】Tailwind CSS 实战教程
前端·css·tailwind
pan3035074792 个月前
Tailwind CSS 实战
前端·tailwind
Dontla4 个月前
Tailwind预定义样式类（框架内置）（文本样式类、布局与间距类（弹性布局、网格布局）、颜色类、响应式设计类）任意值（Arbitrary Values）功能
tailwind
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03OpenClaw Chrome扩展使用教程 - 浏览器中继控制04使用 1panel面板 部署 php网站05Linux下V2Ray安装配置指南06UV安装并设置国内源07openclaw配置教程（linux+局域网ollama）08从零搭建一个 PHP 登录注册系统（含完整源码）09Vue-skills的中文文档10Claude Code Skills 实用使用手册