学习：Tailwind CSS v4 （1）

主要按钮</button><button class="btn-secondary">次要按钮

Nan_Shu_614

1032人浏览 · 2025-11-26 11:23:37

Nan_Shu_614 · 2025-11-26 11:23:37 发布

组件库框架和纯 CSS 框架

组件库框架和纯 CSS 框架是前端开发中两种不同层次的解决方案，它们的关系如下：

📊 定义对比

纯 CSS 框架

本质: 纯样式解决方案
组成: CSS 类、网格系统、工具类
作用: 提供样式基础和布局能力
使用方式: 通过添加 CSS 类来应用样式

组件库框架

本质: UI 组件 + 样式的完整解决方案
组成: 预制组件、CSS 样式、JavaScript 交互
作用: 提供可直接使用的 UI 组件
使用方式: 通过组件标签使用功能完整的 UI 元素

🔄 关系层次

纯 CSS 框架 (底层)
    ↓
组件库框架 (上层)

1. 依赖关系

组件库框架可以基于纯 CSS 框架构建
组件库框架也可以完全自研样式系统

2. 实际案例

基于纯 CSS 框架的组件库：

Bootstrap React : 基于 Bootstrap CSS 的 React 组件
Material-UI : 有时结合 CSS-in-JS 方案

自研样式的组件库：

Element Plus : 完全自定义的样式系统
Ant Design : 独立的设计语言和样式

Tailwind CSS 安装

npm install tailwindcss @tailwindcss/cli

在 CSS 中导入 Tailwind，创建src\input.css

@import "tailwindcss";

使用使用 Tailwind CSS v4 的 CLI 工具

基本构建

npx tailwindcss -i ./src/input.css -o ./dist/output.css

监视模式（开发时使用）

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

生产构建（压缩）

npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

`package.json` 为 Tailwind CSS v4 项目设置。

项目结构

Tailwind/
├── dist/
│   └── output.css     # 生成的 CSS 文件
├── src/
│   └── input.css      # 输入的 CSS 文件
├── └── views\demo.html     # 示例 HTML 文件
├── package.json       # 项目配置
└── package-lock.json  # 依赖锁定文件

使用

src\views\demo.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS v4 示例</title>
    <link href="../../dist/output.css"
        rel="stylesheet">
</head>

<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">
                Tailwind CSS v4 演示
            </h1>
            <p class="text-lg text-gray-600">
                使用最新的 Tailwind CSS v4 构建现代化界面
            </p>
        </header>
    </div>
</body>

</html>

Tailwind CSS 基础概念

概念	说明
工具类 (Utility-First)	Tailwind CSS 的核心是工具类，用于快速设置样式，直接应用到 HTML 元素上。
响应式前缀	使用如 `sm:`, `md:`, `lg:`, `xl:` 的前缀来控制不同屏幕尺寸下的样式。
颜色和尺寸	提供了预定义的颜色（如 `bg-red-500`）和尺寸（如 `text-lg`）来快速设置样式。
间距 (Spacing)	通过 `p-`, `m-`, `pt-`, `pr-` 等类控制内边距和外边距。
布局 (Layout)	提供 `flex`, `grid`, `float` 等类来实现布局控制。
文本样式	包括文本对齐、字体样式、颜色和转换的实用类，如 `text-center`, `font-bold`, `uppercase`。
背景和边框	提供背景颜色、背景图片、边框样式和颜色的工具类，如 `bg-gray-200`, `border-red-500`。
悬停和状态	使用 `hover:`, `focus:`, `active:` 等前缀为交互状态定义样式。
尺寸 (Sizing)	使用 `w-`, `h-` 类控制宽度和高度，如 `w-64`, `h-screen`。
可见性 (Visibility)	使用 `visible`, `invisible` 等类控制元素的可见性。
栅格系统 (Grid System)	提供基于 CSS Grid 的工具类，如 `grid`, `grid-cols-3`, `col-span-2`，实现响应式网格布局。
自定义配置	通过 `tailwind.config.js` 自定义颜色、间距、字体大小等，以适应项目需求。
暗色模式 (Dark Mode)	支持暗色模式，通过 `dark:` 前缀设置样式，并可在配置中启用暗色模式功能。
插件 (Plugins)	通过插件扩展功能，添加自定义的工具类或功能。
指令 (Directives)	在 CSS 文件中使用 `@tailwind` 指令引入不同层次的样式，如 `base`, `components`, `utilities`。

Tailwind CSS 配置

Tailwind v4 配置的简化与 v3 不同，Tailwind CSS v4 采用了更加简化的配置方式。

在 Tailwind v4 中，主配置通常直接在 CSS 文件中完成：

/* src/input.css */
@import "tailwindcss";

/* 这里可以添加全局样式 */
@theme {
  /* 自定义主题配置 */
}

/* 自定义工具类 */
@utility custom-bg {
  background-color: #your-color;
}

构建脚本配置

package.json 中已经有的构建脚本：

{
  "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css",
    "watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build:prod": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

这些脚本分别用于：

build : 构建生产 CSS 文件
watch : 开发模式，监听文件变化并自动重建
build:prod : 构建压缩的生产 CSS 文件

主题配置

在 CSS 文件中配置主题

Tailwind v4 允许直接在 CSS 文件中配置主题：

@import "tailwindcss";

/* 创建自定义工具类 */
@theme {
  --color-brand: rgb(141, 184, 253);
  --color-brand-dark: #1d4ed8;
  --font-family-display: "Inter", sans-serif;
}

这些自定义可以在 HTML 中直接使用，例如：


<div class="bg-brand text-brand-dark font-display p-20">
                <p> 这是一个示例</p>
</div>
<div style="background-color: var(--color-brand)">
                <p style="color: var(--color-brand-dark)"> 这是一个示例</p>
</div>
<div class="bg-brand p-20">
                <p> 这是一个示例</p>
</div>
<div class="text-brand font-display p-20">
                <p> 这是一个示例</p>
</div>

使用 JavaScript 配置文件 (可选)

虽然不常见，但如果需要更复杂的配置，仍可创建 tailwind.config.js ：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'brand': '#3b82f6',
      },
      fontFamily: {
        'display': ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

配置选项详解

内容扫描配置

Tailwind v4 通过内容扫描确定需要生成哪些类：

@import "tailwindcss";

/* 指定扫描的内容路径 */
@config "./tailwind.config.js";

或者在命令行中指定：

tailwindcss -i ./src/input.css -o ./dist/output.css --content "./src/**/*.html"

插件配置

Tailwind v4 支持插件系统，但加载方式略有变化：

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

高级配置技巧

自定义工具类

使用 @utility 创建自定义工具类：

@import "tailwindcss";

@utility btn-base {
  @apply font-semibold py-2 px-6 rounded-lg transition-colors;
}

@utility btn-primary {
  @apply font-semibold py-2 px-6 rounded-lg transition-colors bg-blue-500 hover:bg-blue-600 text-white;
}

@utility btn-secondary {
  @apply font-semibold py-2 px-6 rounded-lg transition-colors bg-gray-200 hover:bg-gray-300 text-gray-800;
}

     <!-- 按钮组 -->
        <div class="flex flex-wrap gap-4 justify-center mb-12">
            <button class="btn-primary">主要按钮</button>
            <button class="btn-secondary">次要按钮</button>
          
        </div>

变体自定义

创建自定义状态变体：

@import "tailwindcss";

@theme {
  /* 自定义颜色 */
  --color-brand: #3b82f6;
  --color-brand-dark: #1d4ed8;

  /* 自定义字体 */
  --font-family-display: "Inter", sans-serif;
}
@variant supports-grid {
  @supports (display: grid) {
    & {
      @apply grid;
    }
  }
}

@variant dark-mode {
  @media (prefers-color-scheme: dark) {
    &;
  }
}

    <div class="supports-grid p-20">
        <!-- 这个 div 在支持 grid 的浏览器中会应用 grid 布局 -->
    </div>
    <div class="dark-mode:bg-gray-800">
        <!-- 这个 div 在深色模式下会应用灰色背景 -->
    </div>

Tailwind CSS 工具类（Utility-First）

基于您项目中的代码，我来详细讲解 Tailwind CSS 的核心理念 - 工具类（Utility-First）设计方法。

什么是 Utility-First？

Utility-First（实用优先）是 Tailwind CSS 的核心设计理念。它主张使用小的、单一功能的 CSS 类（称为"工具类"）直接在 HTML 中构建界面，而不是编写传统的 CSS 规则。

原子化 CSS 的概念

Tailwind 将样式分解为最小的、不可分割的单元，每个工具类通常只做一件事：

bg-blue-500 ：设置背景颜色
text-lg ：设置文本大小
p-4 ：添加内边距
rounded-lg ：设置圆角

组合：

<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
    发送消息
</button>

这个按钮由多个工具类组成，每个类负责一个特定的样式属性。

工具类的命名规则

Tailwind 工具类遵循一致的命名规则：

属性缩写

bg → background
p → padding
m → margin
w → width
h → height
text → color 、 font-size 、 font-weight 等文字相关属性

尺寸和数值

1 = 0.25rem (4px)
4 = 1rem (16px)
8 = 2rem (32px)

例如： p-4 = padding: 1rem ， m-8 = margin: 2rem

修饰符

hover: ：鼠标悬停状态
focus: ：焦点状态
sm: 、 md: 、 lg： ：响应式断点

工具类实例分析

demo.html 中的一个元素：

<div class="container mx-auto px-4 py-8">

这行代码包含的工具类及其作用：

container ：设置容器最大宽度并水平居中
mx-auto ：水平居中（margin-left: auto; margin-right: auto）
px-4 ：水平内边距（padding-left: 1rem; padding-right: 1rem）
py-8 ：垂直内边距（padding-top: 2rem; padding-bottom: 2rem）

等效的传统 CSS：

.container {
  max-width: var(--container-md, 28rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

工具类的优势

避免类名冲突

由于每个工具类都有明确的功能，不需要创造性地命名类名，避免了类名冲突。

CSS 体积优化

Tailwind 只会生成您实际使用的工具类，不会包含未使用的样式，减小最终 CSS 文件体积。

响应式设计简化

<div class="w-full md:w-1/2 lg:w-1/3">

这行代码在不同屏幕尺寸下自动调整宽度，无需媒体查询。

快速原型开发

直接在 HTML 中调整样式，无需在不同文件间切换，提高开发效率。

工具类的主要类别

布局（Layout）

block 、 inline 、 flex 、 grid ：显示类型
hidden ：隐藏元素
container ：响应式容器

Flexbox 与 Grid

flex-row 、 flex-col ：方向
justify-center 、 items-center ：对齐方式
gap-4 ：间距
grid-cols-3 ：网格列数

间距（Spacing）

p-4 、 px-4 、 py-4 ：内边距
m-4 、 mx-4 、 my-4 ：外边距
space-y-2 ：子元素间的垂直间距

尺寸（Sizing）

w-full 、 w-1/2 ：宽度
h-screen 、 h-64 ：高度

颜色（Colors）

bg-blue-500 ：背景色
text-white ：文字颜色
border-gray-300 ：边框颜色

排版（Typography）

text-2xl ：字体大小
font-bold ：字体粗细
text-center ：文本对齐

效果（Effects）

rounded-lg ：圆角
shadow-md ：阴影
opacity-50 ：透明度

状态变体（State Variants）

Tailwind 允许为不同状态应用不同的工具类：

<button class="bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 text-white">
  按钮样式
</button>

hover: ：鼠标悬停时
focus: ：元素获得焦点时
active: ：元素被激活时

响应式设计（Responsive Design）

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 在小屏幕上占满宽度，中等屏幕占一半宽度，大屏幕占四分之一宽度 -->
</div>

响应式前缀对应断点：

sm: ：640px 及以上
md: ：768px 及以上
lg: ：1024px 及以上
xl: ：1280px 及以上

组件提取与@apply指令

当重复使用相同的工具类组合时，可以使用 @apply 指令将其提取为组件类：

/* 在 input.css 中 */
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg;
}

然后在 HTML 中使用：

<button class="btn-primary">主要按钮</button>

实际应用中的最佳实践

保持一致的间距

使用预定义的间距尺度（1-8）而不是随意值：

    <!-- 推荐 -->
    <div class="p-4 m-2 bg-light-50 border-dark-800 border-4 ">
        1
    </div>
    <!-- 不推荐 -->
    <div class="p-3.5 m-2.1 bg-light-50 border-dark-800 border-4">
        2
    </div>

移动优先设计

先设计移动端样式，然后使用断点前缀增强：

<div class="text-center md:text-left">
  <!-- 默认居中对齐，中等屏幕及以上左对齐 -->
</div>

使用变体增强交互体验

为交互元素添加状态样式：

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 transition-colors">
  按钮效果
</button>

工具类的性能考虑

虽然工具类可能导致 HTML 变得冗长，但 Tailwind 通过以下方式优化性能：

PurgeCSS：在生产构建时移除未使用的 CSS
JIT编译器：按需生成样式，而不是预设全部
CSS 压缩：生产环境自动压缩 CSS

总结

Utility-First 设计理念是 Tailwind CSS 的核心，它：

提供了一致的设计系统
简化了响应式开发
减少了 CSS 文件体积
提高了开发效率
避免了类名命名的烦恼

Tailwind CSS 状态处理

1. 伪类状态（Pseudo-classes）

交互状态

<!-- 悬停状态 -->
<button class="bg-blue-500 hover:bg-blue-700">
  悬停按钮
</button>

<!-- 焦点状态 -->
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200">

<!-- 激活状态 -->
<button class="bg-green-500 active:bg-green-700">
  点击按钮
</button>

表单状态

<!-- 禁用状态 -->
<button class="bg-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed" disabled>
  禁用按钮
</button>

<!-- 选中状态 -->
<input type="checkbox" class="checked:bg-blue-500">

<!-- 必填/可选状态 -->
<input required class="required:border-red-500 optional:border-green-500">

<!-- 有效/无效状态 -->
<input class="valid:border-green-500 invalid:border-red-500">

2. 结构伪类状态

子元素状态

<div class="space-y-4">
  <div class="first:pt-0 first:mt-0">第一个元素</div>
  <div class="last:pb-0 last:mb-0">最后一个元素</div>
  <div class="odd:bg-gray-100 even:bg-white">奇偶行</div>
  <div class="only:bg-yellow-100">唯一子元素</div>
</div>

空状态

<div class="empty:hidden">
  <!-- 内容为空时隐藏 -->
</div>

3. 组合状态

多状态组合

<button class="
  bg-blue-500 
  hover:bg-blue-700 
  focus:outline-none 
  focus:ring-2 
  focus:ring-blue-300
  active:bg-blue-800
  disabled:bg-gray-300
  disabled:cursor-not-allowed
">
  多功能按钮
</button>

4. 响应式状态

断点状态

<div class="
  bg-red-500 
  sm:bg-yellow-500 
  md:bg-green-500 
  lg:bg-blue-500 
  xl:bg-purple-500
  2xl:bg-pink-500
">
  响应式背景色
</div>

暗黑模式

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  暗黑模式支持
</div>

5. 实际应用示例

导航菜单

<nav class="bg-gray-800">
  <ul class="flex space-x-4">
    <li>
      <a href="#" class="
        text-white 
        hover:text-blue-300 
        hover:bg-gray-700 
        px-3 py-2 
        rounded
        transition-colors
        duration-200
      ">
        首页
      </a>
    </li>
    <li>
      <a href="#" class="
        text-white 
        hover:text-blue-300 
        hover:bg-gray-700 
        px-3 py-2 
        rounded
        transition-colors
        duration-200
      ">
        关于
      </a>
    </li>
  </ul>
</nav>

表单组件

<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700">用户名</label>
    <input type="text" class="
      mt-1 
      block 
      w-full 
      px-3 
      py-2 
      border 
      border-gray-300 
      rounded-md 
      shadow-sm 
      placeholder-gray-400 
      focus:outline-none 
      focus:ring-blue-500 
      focus:border-blue-500
      invalid:border-red-500
      invalid:text-red-600
      focus:invalid:border-red-500
      focus:invalid:ring-red-500
    " required>
  </div>
  
  <button type="submit" class="
    w-full 
    flex 
    justify-center 
    py-2 
    px-4 
    border 
    border-transparent 
    rounded-md 
    shadow-sm 
    text-sm 
    font-medium 
    text-white 
    bg-blue-600 
    hover:bg-blue-700 
    focus:outline-none 
    focus:ring-2 
    focus:ring-offset-2 
    focus:ring-blue-500
    disabled:bg-gray-400
    disabled:cursor-not-allowed
  ">
    提交
  </button>
</div>

6. 状态处理最佳实践

状态顺序：遵循合理的状态顺序（基础样式 → 悬停 → 焦点 → 激活）
过渡效果：为交互状态添加平滑过渡
可访问性：确保焦点状态清晰可见
响应式设计：考虑不同设备的交互体验

7. 自定义状态

如果需要更多状态，可以通过配置文件扩展：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      variants: {
        extend: {
          backgroundColor: ['checked'],
          borderColor: ['checked'],
        }
      }
    }
  }
}

这些状态处理功能让Tailwind CSS能够创建高度交互且用户友好的界面，同时保持代码的简洁性和可维护性。

Tailwind CSS 响应式设计详解

1. 移动优先设计理念

Tailwind采用移动优先的设计方法：

默认样式应用于移动设备
断点前缀用于更大的屏幕

<!-- 移动设备：红色背景，大屏幕：蓝色背景 -->
<div class="bg-red-500 md:bg-blue-500">
  响应式元素
</div>

2. 断点系统

Tailwind提供5个默认断点：

断点前缀	最小宽度	典型设备
`sm`	640px	大屏手机
`md`	768px	平板
`lg`	1024px	笔记本电脑
`xl`	1280px	大屏显示器
`2xl`	1536px	超大屏显示器

3. 基础响应式应用

布局响应式

<!-- 移动设备：单列，大屏：双列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">内容1</div>
  <div class="bg-gray-200 p-4">内容2</div>
  <div class="bg-gray-200 p-4">内容3</div>
</div>

<!-- 响应式flex布局 -->
<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/3">侧边栏</div>
  <div class="w-full md:w-2/3">主内容</div>
</div>

文本响应式

<!-- 响应式字体大小 -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  响应式标题
</h1>

<!-- 响应式文本对齐 -->
<p class="text-center sm:text-left md:text-justify">
  响应式文本对齐示例
</p>

4. 间距和尺寸响应式

边距和填充

<div class="
  m-2          <!-- 移动设备：小边距 -->
  sm:m-4       <!-- 小屏：中等边距 -->
  md:m-6       <!-- 平板：大边距 -->
  lg:m-8       <!-- 桌面：更大边距 -->
">
  响应式边距
</div>

<div class="
  p-4          <!-- 移动设备：小填充 -->
  lg:p-8       <!-- 大屏：大填充 -->
  xl:p-12      <!-- 超大屏：更大填充 -->
">
  响应式填充
</div>

尺寸响应式

<!-- 宽度响应式 -->
<div class="
  w-full      <!-- 移动设备：全宽 -->
  sm:w-3/4    <!-- 小屏：3/4宽度 -->
  md:w-1/2    <!-- 平板：半宽 -->
  lg:w-1/3    <!-- 桌面：1/3宽度 -->
">
  响应式宽度
</div>

<!-- 高度响应式 -->
<div class="
  h-32        <!-- 移动设备：固定高度 -->
  md:h-48     <!-- 平板：更高 -->
  lg:h-64     <!-- 桌面：最高 -->
">
  响应式高度
</div>

5. 显示和可见性响应式

显示/隐藏元素

<!-- 移动设备显示，桌面隐藏 -->
<div class="block lg:hidden">
  移动设备专用内容
</div>

<!-- 桌面显示，移动设备隐藏 -->
<div class="hidden lg:block">
  桌面专用内容
</div>

<!-- 多断点显示控制 -->
<div class="
  hidden      <!-- 默认隐藏 -->
  sm:block    <!-- 小屏显示 -->
  md:hidden   <!-- 平板隐藏 -->
  lg:block    <!-- 桌面显示 -->
">
  复杂显示控制
</div>

6. 实际布局示例

响应式导航栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS v4 示例</title>
    <link href="../../dist/output.css"
        rel="stylesheet">
</head>
<body>
    <nav class="bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <!-- Logo或品牌名称 -->
                <div class="flex-shrink-0">
                    <span class="text-white font-bold text-xl">Logo</span>
                </div>

                <!-- 桌面导航 -->
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#"
                            class="text-white hover:bg-gray-700 px-3 py-2 rounded-md">首页</a>
                        <a href="#"
                            class="text-white hover:bg-gray-700 px-3 py-2 rounded-md">关于</a>
                        <a href="#"
                            class="text-white hover:bg-gray-700 px-3 py-2 rounded-md">服务</a>
                    </div>
                </div>

                <!-- 移动设备汉堡菜单按钮 -->
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-white hover:text-gray-300 focus:outline-none">
                        <svg id="menu-open-icon" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                        <svg id="menu-close-icon" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动设备导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-gray-700">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#" class="text-white hover:bg-gray-600 block px-3 py-2 rounded-md">首页</a>
                <a href="#" class="text-white hover:bg-gray-600 block px-3 py-2 rounded-md">关于</a>
                <a href="#" class="text-white hover:bg-gray-600 block px-3 py-2 rounded-md">服务</a>
            </div>
        </div>
    </nav>

    <!-- 添加一些示例内容 -->
    <main class="p-8">
        <h1 class="text-2xl font-bold mb-4">Tailwind CSS v4 汉堡菜单示例</h1>
        <p class="mb-4">这是一个响应式导航栏，在移动设备上会显示汉堡菜单。</p>
        <p>请调整浏览器窗口大小或使用移动设备查看效果。</p>
    </main>

    <script>
        // 汉堡菜单功能
        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            const menuOpenIcon = document.getElementById('menu-open-icon');
            const menuCloseIcon = document.getElementById('menu-close-icon');

            mobileMenuButton.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
                menuOpenIcon.classList.toggle('hidden');
                menuCloseIcon.classList.toggle('hidden');
            });
        });
    </script>
</body>
</html>

响应式卡片网格

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <!-- 卡片1 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="image1.jpg" alt="产品">
      <div class="p-4">
        <h3 class="text-lg font-semibold mb-2">产品标题</h3>
        <p class="text-gray-600 text-sm">产品描述内容...</p>
        <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          了解更多
        </button>
      </div>
    </div>
    
    <!-- 更多卡片... -->
  </div>
</div>

7. 自定义断点

可以在配置文件中自定义断点：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      // 自定义断点
      '3xl': '1920px',
    },
  },
}

8. 响应式设计最佳实践

移动优先：始终从移动设备开始设计
渐进增强：从小屏幕向大屏幕添加功能
内容优先：确保内容在所有设备上都可读
性能考虑：避免不必要的断点使用
测试策略：在不同设备上测试响应式效果

9. 实用技巧

使用容器类限制最大宽度

<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <!-- 内容会自动在较大屏幕上居中并限制宽度 -->
</div>

响应式间距工具类

<div class="space-y-4 md:space-y-8 lg:space-y-12">
  <!-- 子元素间距随屏幕增大而增加 -->
</div>

Tailwind CSS的响应式设计系统让创建适配各种设备的界面变得非常简单直观。通过合理的断点使用，可以确保网站在所有设备上都有良好的用户体验。

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

英伟达收购 Jamba 模型的母公司AI21 — Nvidia in advanced talks to buy Israel‘s AI21 Labs for up to $3 billion

2048 AI社区

大数据领域数据复制的资源分配优化

在大数据系统中，是保障高可用性（High Availability）和容错性（Fault Tolerance）的核心机制。例如，Hadoop HDFS默认采用3副本策略，确保即使单个节点或机架故障，数据也不会丢失。随着数据规模的爆炸式增长（IDC预测2025年全球数据量将达到181ZB），传统复制策略的资源浪费问题愈发突出。如何在的前提下，，成为大数据工程师必须解决的关键问题。本文将从五个维度，全

2048 AI社区

模型量化（Quantization）、推理时的反量化（Dequantization）以及显存使用动态性

2048 AI社区

所有评论(0)

查看更多评论

Nan_Shu_614

@Nan_Shu_614

已为社区贡献5条内容

学习：Tailwind CSS v4 （1）

Nan_Shu_614

组件库框架和纯 CSS 框架

📊 定义对比

纯 CSS 框架

组件库框架

🔄 关系层次

1. 依赖关系

2. 实际案例

Tailwind CSS 安装

在 CSS 中导入 Tailwind，创建src\input.css

使用使用 Tailwind CSS v4 的 CLI 工具

基本构建

监视模式（开发时使用）

生产构建（压缩）

package.json 为 Tailwind CSS v4 项目设置。

项目结构

使用

Tailwind CSS 基础概念

Tailwind CSS 配置

构建脚本配置

主题配置

在 CSS 文件中配置主题

使用 JavaScript 配置文件 (可选)

配置选项详解

内容扫描配置

插件配置

高级配置技巧

自定义工具类

变体自定义

Tailwind CSS 工具类（Utility-First）

什么是 Utility-First？

原子化 CSS 的概念

工具类的命名规则

属性缩写

尺寸和数值

修饰符

工具类实例分析

工具类的优势

避免类名冲突

CSS 体积优化

响应式设计简化

快速原型开发

工具类的主要类别

布局（Layout）

Flexbox 与 Grid

间距（Spacing）

尺寸（Sizing）

颜色（Colors）

排版（Typography）

效果（Effects）

状态变体（State Variants）

响应式设计（Responsive Design）

组件提取与@apply指令

实际应用中的最佳实践

保持一致的间距

移动优先设计

使用变体增强交互体验

工具类的性能考虑

总结

Tailwind CSS 状态处理

1. 伪类状态（Pseudo-classes）

交互状态

表单状态

2. 结构伪类状态

子元素状态

空状态

3. 组合状态

多状态组合

4. 响应式状态

断点状态

暗黑模式

5. 实际应用示例

导航菜单

表单组件

6. 状态处理最佳实践

7. 自定义状态

Tailwind CSS 响应式设计详解

1. 移动优先设计理念

2. 断点系统

`package.json` 为 Tailwind CSS v4 项目设置。