Tailwind CSS 教程

Tailwind CSS 教程

Tailwind CSS 教程

Tailwind CSS 是一个实用性(utility-first)CSS 框架,通过组合原子类快速构建界面,无需编写自定义 CSS。

本教程包含

• 基础篇:简介、安装(CDN/NPM)、配置、工具类、状态处理
• 设计篇:响应式、深色模式、重用样式、自定义、指令与函数
• 布局篇:布局、Flex/Grid、间距、尺寸、表格
• 样式篇:排版、背景、边框、阴影、动画

核心思想

<!-- 传统 CSS:先写类,再写样式文件 -->
<button class="btn-primary">按钮</button>

<!-- Tailwind:直接用工具类组合 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  按钮
</button>

特点

• 快速开发,无需切换 HTML/CSS
• 设计一致(统一间距/颜色/字号体系)
• 按需生成,生产包体积小
• 高度可定制(tailwind.config.js)

Tailwind CSS 简介

Tailwind CSS 简介

Tailwind CSS 由 Adam Wathan 于 2017 年创建,是目前最流行的 CSS 框架之一。

Utility-First(实用优先)

// 传统框架(Bootstrap): 预置组件
<button class="btn btn-primary">

// Tailwind: 原子类组合
<button class="bg-blue-500 text-white px-4 py-2 rounded">

优势

• 无需命名类名(告别 BEM)
• 不写 CSS 也能完成布局
• 类名即文档,样式一目了然
• 与组件框架(React/Vue)完美配合

可能的缺点

• HTML 类名冗长
• 需要记忆类名(@apply 可缓解)
• 学习曲线主要在"知道有什么类"

版本演进

v1 2019  初版
v2 2020  支持 JIT 前身
v3 2021  JIT 引擎,按需生成
v4 2025  新版,更快更简(需 Node 20+)

与 CSS-in-JS 对比

Tailwind: 编译期生成 CSS
CSS Modules / styled-components: 运行期或构建期样式隔离

Tailwind CSS 安装(CDN)

Tailwind CSS 安装(CDN)

最快上手方式:通过 CDN 引入,无需构建工具。

Play CDN(开发用)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

CDN 配置

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: "#1e40af",
        },
      },
    },
  };
</script>

注意事项

1. CDN 版不推荐用于生产(运行时生成样式,性能差)
2. 仅适合原型/演示/学习
3. 生产环境必须用构建方式

用 CDN 体验

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  <div class="p-8">
    <p class="text-indigo-500 font-semibold">示例卡片</p>
    <h2 class="text-2xl font-bold">标题</h2>
    <p class="text-gray-500">描述文字...</p>
  </div>
</div>

Tailwind CSS 4 安装(NPM)

Tailwind CSS 4 安装(NPM)

Tailwind CSS v4 大幅简化了安装流程,推荐用于生产项目。

v4 安装步骤

# 1. 初始化项目
npm init -y
npm install tailwindcss @tailwindcss/vite

# 2. 在 CSS 中引入(只需一行!)
@import "tailwindcss";

Vite 配置

// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

HTML 中使用

<div class="flex items-center justify-center h-screen bg-gray-100">
  <h1 class="text-4xl font-bold text-center">Tailwind v4</h1>
</div>

v4 新特性

@import "tailwindcss"      一行引入
CSS-first 配置(用 @theme 替代 JS 配置)
更快的构建引擎
原生级联层(Cascade Layers)

v4 自定义主题(CSS 方式)

@import "tailwindcss";

@theme {
  --color-brand: #1e40af;
  --font-display: "Noto Sans SC", sans-serif;
}

/* 生成类: bg-brand / font-display */

Tailwind CSS 3 安装(NPM)

Tailwind CSS 3 安装(NPM)

v3 是使用最广泛的版本,通过 PostCSS 集成到构建流程。

安装依赖

npm install -D tailwindcss postcss autoprefixer

初始化

npx tailwindcss init -p
# 生成 tailwind.config.js 和 postcss.config.js

配置内容扫描

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS 引入指令

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

构建

# 生产构建
NODE_ENV=production npx tailwindcss -i ./src/style.css -o ./dist/style.css --minify

v3 vs v4 主要区别

v3: tailwind.config.js 配置,PostCSS 插件
v4: CSS-first 配置,原生 Vite 插件,更少配置

Tailwind CSS 基础概念

Tailwind CSS 基础概念

理解核心概念:设计令牌、工具类、伪类变体、响应式前缀。

设计令牌(Design Tokens)

颜色:  blue-500, red-600, gray-100
字号:  text-sm, text-xl, text-4xl
间距:  p-4, m-2, gap-8, space-x-4
圆角:  rounded, rounded-lg, rounded-full
阴影:  shadow, shadow-lg
字体:  font-bold, font-medium

工具类命名规则

[属性]-[值] 或 [属性]-[修饰]-[值]
bg-blue-500        背景色
text-sm            字号
px-4               水平内边距
max-w-md           最大宽度
border-t-2         上边框2px

伪类变体

hover:   鼠标悬停
focus:   聚焦
active:  激活
disabled: 禁用
first: / last:  首/末子元素
odd: / even:    奇/偶子元素
placeholder:    占位符

响应式前缀

sm:   ≥640px    md: ≥768px
lg:  ≥1024px    xl: ≥1280px   2xl: ≥1536px

<div class="text-sm md:text-base lg:text-lg">

其他变体

group-hover:   组悬停(配合 group 类)
dark:          深色模式
motion-safe: / motion-reduce:  动画偏好

Tailwind CSS 配置

Tailwind CSS 配置

通过配置文件自定义设计系统,扩展默认主题。

配置文件结构(v3)

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],   // 扫描文件
  theme: {
    extend: {
      colors: {
        primary: {
          light: "#4f7cff",
          DEFAULT: "#2563eb",
          dark: "#1e40af",
        },
      },
      fontSize: {
        xxs: "0.65rem",
      },
      spacing: {
        18: "4.5rem",
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
  plugins: [],
};

extend vs 覆盖

extend: 在默认主题上增加(推荐)
直接写 theme.colors: 完全替换默认

变体配置(v3)

// 为插件启用变体(如 forms)
plugins: [
  require("@tailwindcss/forms"),
],

v4 CSS 配置

@import "tailwindcss";

@theme {
  --color-primary: #2563eb;
  --spacing-18: 4.5rem;
}

@custom-variant dark (&:where(.dark, .dark *));

常用配置场景

品牌色/字体/间距体系
断点自定义(screens)
自定义容器宽度(container)
暗色模式开关(darkMode)

Tailwind CSS 工具类

Tailwind CSS 工具类

系统了解 Tailwind 的工具类体系,是高效使用的关键。

分类总览

布局:   flex, grid, block, hidden, container
间距:   m-*, p-*, space-*, gap-*
尺寸:   w-*, h-*, min-w-*, max-h-*
排版:   text-*, font-*, tracking-*, leading-*
背景:   bg-*, bg-gradient-*
边框:   border-*, rounded-*, outline-*
效果:   shadow-*, opacity-*, blur-*
动画:   transition-*, animate-*
表格:   table-*, border-collapse

常用速查

flex            display: flex
items-center    垂直居中
justify-between 水平两端对齐
w-full          宽度100%
h-screen        高度100vh
text-center     居中
bg-white        白色背景
rounded-lg      圆角
shadow-md       阴影
transition      过渡

类名组合示例

<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
  <span class="text-lg font-semibold">标题</span>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    按钮
  </button>
</div>

查询方式

官方文档搜索栏(cheatsheet)
IDE 插件: Tailwind CSS IntelliSense 自动提示

Tailwind CSS 状态处理

Tailwind CSS 状态处理

通过变体前缀处理伪类状态,实现交互样式。

常用状态

hover:    悬停
focus:    聚焦
active:   按下
visited:  已访问
disabled: 禁用
checked:  勾选
first-child / last-child
odd / even
group-hover / group-focus
peer-*:  兄弟元素联动

悬停示例

<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-800 transition-colors">
  按钮
</button>

<a href="#" class="text-blue-500 hover:text-blue-700 hover:underline">链接</a>

group 组悬停

<div class="group bg-white hover:bg-gray-50 p-4 rounded-lg">
  <h3 class="group-hover:text-blue-600">卡片标题</h3>
  <p class="opacity-0 group-hover:opacity-100 transition">悬停才显示</p>
</div>

peer 兄弟联动

<input type="checkbox" class="peer">
<p class="hidden peer-checked:block">勾选后显示此内容</p>

focus-visible 与焦点

<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none border rounded px-3 py-2">

disabled/checked

<button disabled class="disabled:opacity-50 disabled:cursor-not-allowed">禁用</button>

Tailwind CSS 响应式设计

Tailwind CSS 响应式设计

使用断点前缀让布局适配不同屏幕尺寸,移动优先。

断点体系

无前缀  移动端(基础样式)
sm:      ≥640px  平板竖屏
md:      ≥768px  平板横屏
lg:      ≥1024px 桌面
xl:      ≥1280px 大屏
2xl:     ≥1536px 超大屏

移动优先原则

/* 先写移动端,再用断点增强 */
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div>卡片 1</div>
  <div>卡片 2</div>
  <div>卡片 3</div>
</div>

响应式示例

<div class="flex flex-col md:flex-row items-center justify-between p-4">
  <h1 class="text-xl md:text-2xl lg:text-3xl font-bold">标题</h1>
  <nav class="hidden md:flex gap-4">   <!-- 移动端隐藏导航 -->
    <a href="#">首页</a>
    <a href="#">关于</a>
  </nav>
</div>

响应式间距与字体

p-4 md:p-8          内边距随断点增大
text-sm md:text-base  字号渐进
w-full md:w-1/2     宽度适配

容器(Container)

<div class="container mx-auto px-4">
  <!-- 居中且自适应最大宽度 -->
</div>

自定义断点

// tailwind.config.js
screens: {
  "3xl": "1800px",
}

Tailwind CSS 深色模式

Tailwind CSS 深色模式

用 dark: 变体实现深色模式,支持跟随系统或手动切换。

启用深色模式(v3)

// tailwind.config.js
module.exports = {
  darkMode: "class",   // 基于 class 切换
  // 或 "media"(默认,跟随系统)
}

使用 dark: 变体

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="dark:text-white">深色模式示例</h1>
  <p class="text-gray-600 dark:text-gray-400">描述文字</p>
</div>

跟随系统(media)

// 无需配置,直接用
<div class="dark:bg-gray-900"></div>
// 浏览器自动根据系统外观切换

class 模式切换

// 在 html 根元素加 .dark 类
document.documentElement.classList.add("dark")

// JS 切换
const toggle = () => {
  document.documentElement.classList.toggle("dark")
}

v4 深色模式

@custom-variant dark (&:where(.dark, .dark *));
// 同样在 html 加 .dark 类

完整示例

<body class="bg-white dark:bg-gray-900 transition-colors">
  <header class="bg-gray-100 dark:bg-gray-800">...</header>
  <main class="text-gray-900 dark:text-white">...</main>
</body>

Tailwind CSS 重用样式

Tailwind CSS 重用样式

避免重复类名,用 @apply、组件抽象和组件库方式复用样式。

1. @apply(提取公共样式)

/* 在 CSS 中组合工具类 */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors;
  }
  .card {
    @apply bg-white rounded-xl shadow-md p-6;
  }
}

<button class="btn-primary">保存</button>
<div class="card">内容</div>

2. 前端组件抽象

// React 中封装组件
function Button({ children, className = "" }) {
  return (
    <button className={`px-4 py-2 bg-blue-500 text-white rounded ${className}`}>
      {children}
    </button>
  );
}

3. @layer 指令

@layer base {      /* 全局基础样式 */
  h1 { @apply text-2xl font-bold; }
}
@layer components { /* 组件样式 */
  .btn { @apply ...; }
}
@layer utilities {  /* 自定义工具类 */
  .text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
}

4. 组件库配合

Headless UI(官方无样式组件)
shadcn/ui(React 组件,基于 Tailwind)

注意事项

@apply 在 v4 中继续支持
避免过度抽象:简单页面直接用类名更快

Tailwind CSS 自定义样式

Tailwind CSS 自定义样式

扩展默认主题之外的颜色、字体、间距等设计令牌。

扩展颜色(v3)

// tailwind.config.js
theme: {
  extend: {
    colors: {
      brand: "#6366f1",
      ocean: {
        50: "#eef2ff",
        500: "#6366f1",
        900: "#312e81",
      },
    },
  },
}

// 使用
bg-brand / text-ocean-500 / border-ocean-900

扩展间距与尺寸

spacing: { 18: "4.5rem" }      // p-18
width: { "13": "3.25rem" }     // w-13
maxWidth: { "8xl": "96rem" }   // max-w-8xl

扩展字体与字号

fontFamily: { display: ["Noto Sans SC", "sans-serif"] }
fontSize: { "2xs": "0.625rem" }

任意值(Arbitrary Values)

// 无需配置,直接写任意值
bg-[#1da1f2]
text-[24px]
w-[300px]
mt-[3.5rem]
grid-cols-[200px_1fr]
font-["Noto_Sans_SC"]   // 下划线代替空格

v4 CSS-first 自定义

@theme {
  --color-brand: #6366f1;
  --radius-brand: 1.5rem;
}

自定义工具类(plugin)

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        ".text-shadow": { textShadow: "0 2px 4px rgba(0,0,0,0.2)" },
      });
    }),
  ],
};

Tailwind CSS 指令与函数

Tailwind CSS 指令与函数

了解 @tailwind、@apply、@layer 指令与 theme() 等函数。

@tailwind 指令(v3)

@tailwind base;        /* 基础重置样式 */
@tailwind components;  /* 组件类 */
@tailwind utilities;   /* 工具类 */
@tailwind variants;    /* 变体(可选) */

@apply 指令

.btn {
  @apply px-4 py-2 rounded bg-blue-500 text-white;
  @apply hover:bg-blue-600;   /* 可带变体 */
}

@layer 指令

@layer base {
  /* 覆盖基础样式 */
  body { @apply antialiased; }
}

@layer components {
  /* 自定义组件类(比 utilities 优先级低) */
}

@layer utilities {
  /* 自定义工具类(优先级最高) */
}

theme() 函数

/* 在 CSS 中引用配置值 */
.my-card {
  color: theme("colors.blue.500");
  padding: theme("spacing.4");
  border-radius: theme("borderRadius.lg");
}

/* 带默认值 */
padding: theme("spacing.18", "3rem");

@screen 指令(旧版)

@screen md {
  /* 等价于 @media (min-width: 768px) */
}

v4 变化

@import "tailwindcss" 替代 @tailwind 三指令
@theme 替代 theme() 部分用法
@custom-variant 自定义变体

Tailwind CSS 布局类

Tailwind CSS 布局类

布局相关工具类:display、position、overflow、visibility。

Display

block        display: block
inline-block display: inline-block
inline       display: inline
flex         display: flex
grid         display: grid
hidden       display: none
table        display: table

<div class="hidden md:block">响应式显示</div>

Position

static / fixed / absolute / relative / sticky

<div class="relative">
  <span class="absolute top-0 right-0">角标</span>
</div>

top-0 right-0 bottom-0 left-0   偏移
inset-0                         全占位
z-10 z-20 z-50                  层级

Flex 布局

flex-col / flex-row            方向
flex-wrap / flex-nowrap        换行
flex-1 flex-auto flex-none     伸缩
items-start / center / end     交叉轴
justify-center / between / end 主轴
gap-2 gap-4                    间距

Grid 布局

grid-cols-1 / grid-cols-3      列数
grid-rows-2                    行数
col-span-2 row-span-2          跨列行
place-items-center             双向居中
grid-flow-col                  列流

其他

overflow-hidden / overflow-auto
overscroll-contain
object-cover(图片填充)
float-left / float-right(旧布局)

Tailwind CSS Flexbox & Grid

Tailwind CSS Flexbox & Grid

Tailwind 对 Flexbox 和 Grid 提供了完整的工具类支持。

Flexbox 核心

<div class="flex items-center justify-between gap-4">
  <div>左</div>
  <div>中</div>
  <div>右</div>
</div>

flex-row / flex-col            主轴方向
items-center                   交叉轴居中
items-start / items-end / items-stretch
justify-start / center / between / around / evenly
flex-1                         均分剩余空间
flex-shrink-0                  不收缩
flex-grow                      伸展

Grid 核心

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

grid-cols-[200px_1fr]   自定义列
grid-template-rows  →  grid-rows-*
col-span-2 / row-span-2  合并单元格
col-start-2 / row-end-4  起止线
auto-cols-fr / auto-rows-min

响应式网格

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 移动1列,平板2列,桌面4列 -->
</div>

实用示例:卡片网格

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  {cards.map(card => (
    <div class="bg-white rounded-lg shadow p-6">{card.title}</div>
  ))}
</div>

Tailwind CSS 间距

Tailwind CSS 间距

间距工具类基于 0.25rem 的倍率体系,覆盖 padding、margin、gap。

Padding(内边距)

p-0    0
p-1    0.25rem
p-2    0.5rem
p-4    1rem
p-8    2rem
p-16   4rem

px-4   水平
py-2   垂直
pt-4 pr-4 pb-4 pl-4  单方向

Margin(外边距)

m-0 m-2 m-4 m-8
mx-auto   水平居中(常用!)
mt-4 mb-4 ml-4 mr-4
-mt-4     负边距

Gap(间距,Grid/Flex)

gap-4      行+列间距
gap-x-4    列间距
gap-y-2    行间距

Space(兄弟间距)

space-x-4  水平相邻间距
space-y-4  垂直相邻间距
<div class="space-y-4">
  <p>第一行</p>
  <p>第二行</p>
</div>

自定义间距

// 任意值
p-[17px]  mt-[3rem]

// 配置
extend: { spacing: { 18: "4.5rem" } }

注意

间距体系保持一致是 Tailwind 的设计优势
推荐使用默认尺度,避免随意写任意值

Tailwind CSS 尺寸控制

Tailwind CSS 尺寸控制

宽度、高度、最小/最大尺寸的控制类。

宽度

w-0 w-4 w-16 w-64     固定宽度(0.25rem 倍数)
w-1/2 w-1/3 w-2/3     百分比
w-full                100%
w-screen               100vw
w-auto                 自适应
max-w-md max-w-xl max-w-7xl   最大宽度
min-w-0                最小宽度0(防止溢出)

高度

h-4 h-16 h-64         固定高度
h-1/2                  百分比
h-full                 100%
h-screen                100vh
h-auto                 自适应
max-h-64 min-h-screen  最大/最小高度

常用组合

<div class="w-full max-w-md mx-auto">   <!-- 居中限宽 -->
<div class="h-screen flex items-center justify-center">  <!-- 全屏居中 -->
<img class="w-full h-48 object-cover">  <!-- 图片填充裁剪 -->

尺寸与响应式

w-full md:w-1/2 lg:w-1/3   不同断点宽度
h-32 md:h-48

任意值

w-[350px] h-[200px] max-w-[90vw]

容器类

container mx-auto    自动最大宽度居中
size-16              同时设置宽高(3.2+ 新语法)

Tailwind CSS 表格

Tailwind CSS 表格

用 Tailwind 工具类快速美化表格。

基础表格

<table class="w-full text-sm text-left">
  <thead class="bg-gray-50 text-gray-600 uppercase">
    <tr>
      <th class="px-4 py-3">姓名</th>
      <th class="px-4 py-3">城市</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-200">
    <tr class="hover:bg-gray-50">
      <td class="px-4 py-3">Alice</td>
      <td class="px-4 py-3">北京</td>
    </tr>
  </tbody>
</table>

表格专用类

table            display: table
table-auto       自动列宽(默认)
table-fixed      固定列宽
border-collapse  合并边框
border-separate  分离边框
table-row / table-cell

斑马纹

<tr class="odd:bg-white even:bg-gray-50">

表格容器(溢出滚动)

<div class="overflow-x-auto rounded-lg border border-gray-200">
  <table class="min-w-full divide-y divide-gray-200">...</table>
</div>

响应式表格

移动端: 外层 overflow-x-auto 横向滚动
或 md:table 恢复展示(移动端用卡片式布局)

综合美化

<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">...

Tailwind CSS 排版

Tailwind CSS 排版

文本相关的全部工具类:字号、字重、行高、字距、对齐。

字号

text-xs  (12px)  text-sm (14px)
text-base (16px) text-lg (18px)
text-xl  (20px)  text-2xl (24px)
text-3xl (30px) ... text-9xl (128px)

字重与样式

font-normal(400) font-medium(500)
font-semibold(600) font-bold(700)
font-light(300) font-thin(100)
italic / not-italic
underline / line-through / no-underline

行高与字距

leading-none leading-tight leading-normal leading-loose
tracking-tight tracking-normal tracking-wider(字间距)

对齐与换行

text-left text-center text-right text-justify
whitespace-nowrap / whitespace-pre-line
break-words / truncate(单行省略)

颜色

text-gray-500 text-blue-600 text-white
text-transparent bg-clip-text(渐变文字)

排版插件

npm install -D @tailwindcss/typography

// 配置
plugins: [require("@tailwindcss/typography")]

// 使用:给文章内容容器加 prose
<article class="prose prose-lg">
  <h1>标题</h1>
  <p>正文自动排版</p>
</article>

综合示例

<h1 class="text-3xl font-bold tracking-tight text-gray-900">大标题</h1>
<p class="mt-2 text-gray-500 leading-relaxed">描述文本...</p>

Tailwind CSS 背景颜色

Tailwind CSS 背景颜色

背景色、渐变、背景图与透明度控制。

背景色

bg-white bg-black bg-transparent
bg-gray-100 bg-blue-500 bg-red-600
bg-opacity-50      背景透明度50%
bg-[#1da1f2]       任意色值

渐变

bg-gradient-to-r            向右渐变
bg-gradient-to-br           右下
from-blue-500 via-purple-500 to-pink-500

<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-xl">
  渐变卡片
</div>

背景图

bg-cover         背景铺满
bg-contain        完整显示
bg-center         居中
bg-no-repeat      不重复
bg-[url('/img/bg.png')]   任意背景图

<div class="bg-cover bg-center h-64" style="background-image: url(...)">

背景位置与大小

bg-top bg-bottom bg-left bg-right
bg-fixed(固定)/ bg-scroll
bg-auto / bg-cover / bg-contain

半透明叠加

<div class="relative">
  <img class="opacity-60" src="...">
  <div class="absolute inset-0 bg-black/40"></div>  <!-- 暗化层 -->
</div>

hover 变色

<button class="bg-blue-500 hover:bg-blue-700">按钮</button>

Tailwind CSS 边框

Tailwind CSS 边框

边框宽度、颜色、样式与圆角控制。

边框宽度

border          1px(默认)
border-0 border-2 border-4 border-8
border-t border-r border-b border-l  单边
border-x border-y                    水平/垂直

边框颜色

border-gray-200 border-blue-500 border-red-600
border-transparent
border-[#1da1f2]   任意颜色

边框样式

border-solid border-dashed border-dotted border-none

圆角

rounded         0.25rem
rounded-sm rounded-md rounded-lg rounded-xl rounded-2xl rounded-3xl
rounded-full     圆形/胶囊
rounded-t-lg rounded-b-lg rounded-l-lg rounded-r-lg
rounded-tl-full  单角

<button class="rounded-full px-6 py-2">胶囊按钮</button>

轮廓与分隔

outline-none           去除默认轮廓(配 focus:ring)
outline-2 outline-blue-500
divide-y divide-gray-200   列表分隔线
divide-x

聚焦环(Ring)

<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none rounded border">

ring-1 ring-blue-500     常显环
ring-offset-2            环偏移

综合卡片

<div class="border border-gray-200 rounded-xl hover:border-blue-400 transition">
  卡片内容
</div>

Tailwind CSS 阴影

Tailwind CSS 阴影

盒子阴影与滤镜效果,让元素有层次感。

阴影等级

shadow-sm       小而柔和
shadow          默认
shadow-md       中等
shadow-lg       大
shadow-xl       特大
shadow-2xl      超大
shadow-inner    内阴影
shadow-none     无

<div class="shadow-lg p-6 rounded-xl">卡片</div>

彩色阴影

shadow-blue-500/50  带颜色和透明度
shadow-lg shadow-blue-200

悬停阴影

<div class="shadow-md hover:shadow-xl transition-shadow">
  悬停阴影加深
</div>

滤镜类

blur-sm blur-md blur-lg     模糊
brightness-50 brightness-110  亮度
contrast-75 contrast-125     对比度
grayscale                    灰度
saturate-150                 饱和度
sepia                        褐色
invert                       反色

透明度

opacity-0 opacity-50 opacity-100

遮罩混合

mix-blend-multiply / mix-blend-overlay
bg-blend-multiply

综合示例

<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300">
  <img class="w-full h-48 object-cover" src="...">
  <div class="p-6">内容</div>
</div>

Tailwind CSS 动画

Tailwind CSS 动画

过渡、变换与内置动画,为界面添加动效。

过渡(Transition)

transition             基础过渡
transition-colors      仅颜色
transition-opacity     透明度
transition-transform   变换
transition-all         全部
duration-150 duration-300 duration-700   时长
ease-in ease-out ease-in-out             缓动
delay-100 delay-300    延迟

变换(Transform)

scale-95 scale-105         缩放
rotate-45 rotate-180       旋转
translate-x-4 -translate-y-2 平移
skew-x-6                   倾斜
origin-center origin-top-left  变换原点

<button class="hover:scale-105 transition-transform">缩放按钮</button>

内置动画

animate-spin      旋转(加载)
animate-ping      脉冲
animate-pulse     呼吸
animate-bounce    弹跳
animate-none      关闭

组合动效

<div class="transition-all duration-300 hover:scale-105 hover:shadow-2xl">卡片</div>

<button class="transition-colors duration-200 hover:bg-blue-600 active:scale-95">按钮</button>

自定义动画

// tailwind.config.js
theme: {
  extend: {
    keyframes: {
      fadeIn: {
        "0%": { opacity: "0" },
        "100%": { opacity: "1" },
      },
    },
    animation: {
      "fade-in": "fadeIn 0.5s ease-in-out",
    },
  },
}

// 使用
<div class="animate-fade-in">

入场动画配合

<div class="animate-pulse">加载骨架屏</div>
<div class="animate-spin w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full"></div>  <!-- 转圈加载 -->

注意

motion-reduce:transition-none  尊重用户减少动画偏好
避免过度动画影响体验