学习：Tailwind CSS v4 （2）

theme: {extend: {colors: {// 自定义深色模式颜色dark: {-- 使用自定义深色模式颜色 -->使用自定义深色模式颜色</div>Tailwind CSS的深色模式功能让创建支持深浅主题的现代Web应用变得非常简单，同时确保了良好的用户体验和可访问性。// 组合使用函数:root {这是最核心的自定义方式，通过修改配置文件来扩展Tailwind的功能。theme: {

Nan_Shu_614

1082人浏览 · 2025-11-27 10:26:56

Nan_Shu_614 · 2025-11-27 10:26:56 发布

Tailwind CSS 深色模式

1. 深色模式基础

Tailwind通过 dark: 前缀来实现深色模式：

<!-- 浅色模式：浅色背景深色文字，深色模式：深色背景浅色文字 -->
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  深色模式示例
</div>

2. 配置深色模式

在 tailwind.config.js 中配置深色模式策略：

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 或 'media'
  // ...其他配置
}

两种策略对比：

策略	描述	使用场景
`'media'`	基于系统偏好	自动跟随系统设置
`'class'`	基于CSS类名	用户可手动切换

3. 基于系统偏好的深色模式（media）

// tailwind.config.js
module.exports = {
  darkMode: 'media', // 自动检测系统偏好
}

<!-- 自动跟随系统深色模式设置 -->
<body class="bg-white dark:bg-gray-900">
  <div class="text-gray-900 dark:text-white">
    <h1 class="text-2xl font-bold">标题</h1>
    <p>内容会根据系统设置自动切换深浅色</p>
  </div>
</body>

4. 基于类名的深色模式（class）

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 手动控制深色模式
}

<!-- 通过添加/移除dark类来控制 -->
<body class="bg-white dark:bg-gray-900">
  <div class="text-gray-900 dark:text-white">
    <button onclick="document.documentElement.classList.toggle('dark')">
      切换深色模式
    </button>
  </div>
</body>

5. 完整的深色模式切换实现

HTML结构

<!DOCTYPE html>
<html lang="zh-CN" class="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深色模式示例</title>
  <script>
    // 页面加载时检查存储的设置
    if (localStorage.theme === 'dark' || 
        (!('theme' in localStorage) && 
         window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  </script>
</head>
<body class="bg-white dark:bg-gray-900 transition-colors duration-300">
  <!-- 页面内容 -->
</body>
</html>

JavaScript切换逻辑

// 切换深色模式的函数
function toggleDarkMode() {
  const html = document.documentElement
  
  if (html.classList.contains('dark')) {
    html.classList.remove('dark')
    localStorage.theme = 'light'
  } else {
    html.classList.add('dark')
    localStorage.theme = 'dark'
  }
}

// 初始化检查
function initDarkMode() {
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
  const storedTheme = localStorage.theme
  
  if (storedTheme === 'dark' || (!storedTheme && prefersDark.matches)) {
    document.documentElement.classList.add('dark')
  }
}

// 监听系统偏好变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  if (!localStorage.theme) {
    if (e.matches) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }
})

6. 深色模式UI组件示例

导航栏

<body class="bg-white dark:bg-gray-900 transition-colors duration-300">
<nav class="bg-white dark:bg-gray-800 shadow-lg transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">
          我的网站
        </h1>
      </div>
      
      <div class="flex items-center space-x-4">
        <!-- 深色模式切换按钮 -->
        <button onclick="toggleDarkMode()" class="
          p-2 
          rounded-full 
          bg-gray-200 
          dark:bg-gray-700 
          text-gray-800 
          dark:text-gray-200
          hover:bg-gray-300 
          dark:hover:bg-gray-600
          transition-colors 
          duration-200
        ">
          <svg class="w-5 h-5 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
          </svg>
          <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>
</body>

卡片组件

<div class="max-w-md mx-auto mt-8">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
      卡片标题
    </h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">
      这是一个支持深色模式的卡片组件。在深色模式下，背景和文字颜色会自动调整以确保可读性。
    </p>
    <div class="flex space-x-4">
      <button class="
        bg-blue-500 
        hover:bg-blue-600 
        dark:bg-blue-600 
        dark:hover:bg-blue-700 
        text-white 
        px-4 
        py-2 
        rounded 
        transition-colors 
        duration-200
      ">
        主要按钮
      </button>
      <button class="
        bg-gray-200 
        hover:bg-gray-300 
        dark:bg-gray-700 
        dark:hover:bg-gray-600 
        text-gray-800 
        dark:text-gray-200 
        px-4 
        py-2 
        rounded 
        transition-colors 
        duration-200
      ">
        次要按钮
      </button>
    </div>
  </div>
</div>

表单组件

<div class="max-w-md mx-auto mt-8 p-6">
  <form class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        用户名
      </label>
      <input type="text" class="
        w-full 
        px-3 
        py-2 
        border 
        border-gray-300 
        dark:border-gray-600 
        rounded 
        bg-white 
        dark:bg-gray-700 
        text-gray-900 
        dark:text-white
        placeholder-gray-500 
        dark:placeholder-gray-400
        focus:outline-none 
        focus:ring-2 
        focus:ring-blue-500 
        focus:border-transparent
      " placeholder="请输入用户名">
    </div>
    
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        密码
      </label>
      <input type="password" class="
        w-full 
        px-3 
        py-2 
        border 
        border-gray-300 
        dark:border-gray-600 
        rounded 
        bg-white 
        dark:bg-gray-700 
        text-gray-900 
        dark:text-white
        placeholder-gray-500 
        dark:placeholder-gray-400
        focus:outline-none 
        focus:ring-2 
        focus:ring-blue-500 
        focus:border-transparent
      " placeholder="请输入密码">
    </div>
  </form>
</div>

7. 深色模式颜色调色板

Tailwind提供了专门的深色模式颜色：

/* 文本颜色 */
dark:text-gray-100    /* 最浅 */
dark:text-gray-200
dark:text-gray-300
dark:text-gray-400    /* 默认正文 */
dark:text-gray-500    /* 次要文本 */

/* 背景颜色 */
dark:bg-gray-900      /* 最深背景 */
dark:bg-gray-800      /* 卡片背景 */
dark:bg-gray-700      /* 输入框背景 */
dark:bg-gray-600      /* 悬停状态 */

/* 边框颜色 */
dark:border-gray-700
dark:border-gray-600
dark:border-gray-500

8. 最佳实践

一致性：确保所有组件都支持深色模式
过渡动画：添加平滑的颜色过渡效果
可访问性：确保深色模式下的对比度足够
用户偏好：尊重用户的系统设置和手动选择
图标适配：为深浅模式提供不同的图标

9. 自定义深色模式样式

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // 自定义深色模式颜色
        dark: {
          primary: '#1a202c',
          secondary: '#2d3748',
          accent: '#4a5568'
        }
      }
    }
  }
}

<!-- 使用自定义深色模式颜色 -->
<div class="bg-white dark:bg-dark-primary">
  使用自定义深色模式颜色
</div>

Tailwind CSS的深色模式功能让创建支持深浅主题的现代Web应用变得非常简单，同时确保了良好的用户体验和可访问性。

Tailwind CSS 重用样式

1. 组件化方法（推荐）

使用 @apply 指令

/* 在CSS文件中定义可重用组件 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded transition-colors duration-200;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
  }
  
  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}

HTML中使用

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

<div class="card">
  <h3 class="text-lg font-semibold">卡片标题</h3>
  <p>卡片内容...</p>
</div>

<input type="text" class="input-field" placeholder="输入内容">

2. 使用JavaScript/模板字面量

在JavaScript中定义样式组

// styles.js
export const buttonStyles = {
  primary: 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded',
  secondary: 'bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded',
  small: 'py-1 px-2 text-sm',
  large: 'py-3 px-6 text-lg'
};

export const cardStyles = {
  base: 'bg-white rounded-lg shadow-md p-6',
  bordered: 'border border-gray-200',
  elevated: 'shadow-lg'
};

// 组合使用函数
export const getButtonClass = (variant = 'primary', size = 'base') => {
  const base = buttonStyles[variant] || buttonStyles.primary;
  const sizeClass = buttonStyles[size] || '';
  return `${base} ${sizeClass}`.trim();
};

在html中使用

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

<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-200 dark:bg-gray-900 transition-colors duration-300 p-8">
    <h1 class="text-2xl font-bold mb-6">Tailwind CSS v4 样式示例</h1>

    <!-- 使用 styles.js 中定义的按钮样式 -->
    <div class="mb-6">
        <h2 class="text-xl font-semibold mb-4">按钮样式</h2>
        <div class="flex flex-wrap gap-4 mb-4">
            <button id="primary-btn">主要按钮</button>
            <button id="secondary-btn">次要按钮</button>
            <button id="small-btn">小按钮</button>
            <button id="large-btn">大按钮</button>
        </div>
    </div>

    <!-- 使用 styles.js 中定义的卡片样式 -->
    <div class="mb-6">
        <h2 class="text-xl font-semibold mb-4">卡片样式</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div id="base-card">
                <h3 class="font-medium mb-2">基础卡片</h3>
                <p class="text-gray-600">这是一个基础卡片样式</p>
            </div>
            <div id="bordered-card">
                <h3 class="font-medium mb-2">边框卡片</h3>
                <p class="text-gray-600">这是一个带边框的卡片样式</p>
            </div>
            <div id="elevated-card">
                <h3 class="font-medium mb-2">阴影卡片</h3>
                <p class="text-gray-600">这是一个带阴影的卡片样式</p>
            </div>
        </div>
    </div>

    <!-- 输入框示例 -->
    <div class="mb-6">
        <h2 class="text-xl font-semibold mb-4">输入框示例</h2>
        <input type="text" id="input-field" placeholder="输入内容" class="w-full p-2 border rounded">
    </div>

    <script type="module">
        // 导入样式模块
        import { buttonStyles, cardStyles, getButtonClass } from '../styles.js';

        // 使用 styles.js 中定义的按钮样式
        document.getElementById('primary-btn').className = getButtonClass('primary');
        document.getElementById('secondary-btn').className = getButtonClass('secondary');
        document.getElementById('small-btn').className = getButtonClass('primary', 'small');
        document.getElementById('large-btn').className = getButtonClass('primary', 'large');

        // 使用 styles.js 中定义的卡片样式
        document.getElementById('base-card').className = cardStyles.base;
        document.getElementById('bordered-card').className = `${cardStyles.base} ${cardStyles.bordered}`;
        document.getElementById('elevated-card').className = `${cardStyles.base} ${cardStyles.elevated}`;

        // 为输入框添加样式
        document.getElementById('input-field').className += ' focus:outline-none focus:ring-2 focus:ring-blue-500';

        // 控制台输出样式信息
        console.log('按钮样式:', buttonStyles);
        console.log('卡片样式:', cardStyles);
    </script>
</body>

</html>

3. 使用CSS自定义属性（CSS变量）

定义CSS变量

:root {
  --primary-color: #3b82f6;
  --secondary-color: #6b7280;
  --border-radius: 0.375rem;
}

.btn-base {
  @apply font-bold py-2 px-4 rounded transition-colors duration-200;
}

.btn-primary {
  @apply btn-base;
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: #2563eb;
}

4. 实用工具类组合

创建实用的组合类

@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent;
  }
  
  .shadow-hover {
    @apply shadow-md hover:shadow-lg transition-shadow duration-300;
  }
  
  .border-gradient {
    @apply border-2 border-transparent bg-gradient-to-r from-blue-500 to-purple-500 bg-origin-border;
  }
}

5. 模板部分和片段

创建可重用的HTML片段

<!-- components/buttons.html -->
<button class="btn-primary {{ additionalClasses }}">
  {{ buttonText }}
</button>

<!-- components/cards.html -->
<div class="card {{ variant }}">
  <div class="card-header">
    <h3 class="card-title">{{ title }}</h3>
  </div>
  <div class="card-body">
    {{ content }}
  </div>
</div>

6. 配置Tailwind主题扩展

在tailwind.config.js中扩展

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 添加自定义间距
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      // 添加自定义颜色
      colors: {
        'brand': {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      },
      // 添加自定义动画
      animation: {
        'bounce-slow': 'bounce 2s infinite',
        'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      }
    }
  }
}

7. 实际项目中的样式重用示例

完整的样式系统示例

/* styles/components.css */
@layer components {
  /* 按钮系统 */
  .btn {
    @apply inline-flex items-center justify-center font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
  }
  
  .btn-secondary {
    @apply btn bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }
  
  .btn-md {
    @apply px-4 py-2 text-base;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  /* 卡片系统 */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }
  
  .card-body {
    @apply px-6 py-4;
  }
  
  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
  }

  /* 表单系统 */
  .form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  
  .form-error {
    @apply mt-1 text-sm text-red-600;
  }
}

在项目中使用

<!DOCTYPE html>
<html>
<head>
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
  <!-- 按钮使用 -->
  <button class="btn-primary btn-md">中等主要按钮</button>
  <button class="btn-secondary btn-sm">小号次要按钮</button>
  
  <!-- 卡片使用 -->
  <div class="card">
    <div class="card-header">
      <h3 class="text-lg font-semibold">卡片标题</h3>
    </div>
    <div class="card-body">
      <p>卡片内容...</p>
      <input type="text" class="form-input mt-3" placeholder="输入内容">
    </div>
    <div class="card-footer">
      <button class="btn-primary btn-sm">保存</button>
    </div>
  </div>
</body>
</html>

8. 高级重用技巧

使用CSS Grid模板

@layer components {
  .grid-cards {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }
  
  .grid-features {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8;
  }
}

响应式工具类组合

@layer utilities {
  .responsive-text {
    @apply text-base sm:text-lg md:text-xl lg:text-2xl;
  }
  
  .responsive-padding {
    @apply p-4 sm:p-6 md:p-8 lg:p-12;
  }
  
  .responsive-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;
  }
}

9. 最佳实践建议

保持一致性：在整个项目中保持相同的命名约定
适度抽象：不要过度抽象，保持一定的灵活性
文档化：为可重用的样式组件编写文档
性能考虑：避免创建过多不必要的CSS类
维护性：定期审查和重构样式系统

Tailwind CSS 自定义样式

1. 配置文件自定义（tailwind.config.js）

这是最核心的自定义方式，通过修改配置文件来扩展Tailwind的功能。

基础配置文件结构

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      // 在这里添加自定义配置
    },
  },
  plugins: [],
}

2. 颜色自定义

扩展颜色系统

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // 自定义品牌色
        'brand': {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
        // 单一颜色
        'primary': '#3b82f6',
        'secondary': '#6b7280',
        // 使用CSS变量
        'theme': {
          primary: 'var(--color-primary)',
          secondary: 'var(--color-secondary)',
        }
      }
    }
  }
}

使用自定义颜色

<div class="bg-brand-500 text-white p-4">
  品牌颜色示例
</div>

<button class="bg-primary hover:bg-primary-600 text-white">
  主要按钮
</button>

3. 字体和文本自定义

字体家族扩展

theme: {
  extend: {
    fontFamily: {
      // 添加自定义字体
      'custom': ['Custom Font', 'sans-serif'],
      'display': ['Oswald', 'sans-serif'],
      'body': ['Open Sans', 'sans-serif'],
    },
    // 字体大小扩展
    fontSize: {
      '2xs': '0.625rem',    // 10px
      '3xl': '1.75rem',     // 28px
      '4xl': '2.25rem',     // 36px
      '5xl': '3rem',        // 48px
    },
    // 行高扩展
    lineHeight: {
      'tight': '1.2',
      'relaxed': '1.75',
    }
  }
}

字体使用示例

<h1 class="font-display text-4xl leading-tight">
  自定义字体标题
</h1>

<p class="font-body text-lg leading-relaxed">
  使用自定义字体和行高的段落文本。
</p>

4. 间距和尺寸自定义

间距扩展

theme: {
  extend: {
    spacing: {
      // 自定义间距
      '13': '3.25rem',      // 52px
      '18': '4.5rem',       // 72px
      '88': '22rem',        // 352px
      '128': '32rem',       // 512px
      // 百分比
      '1/10': '10%',
      '9/10': '90%',
    },
    // 尺寸扩展
    maxWidth: {
      '8xl': '88rem',
      '9xl': '96rem',
    },
    height: {
      'screen-90': '90vh',
      'screen-80': '80vh',
    }
  }
}

间距使用示例

<div class="p-18 m-1/10 w-88 h-screen-90">
  自定义间距和尺寸
</div>

5. 断点自定义

自定义响应式断点

theme: {
  screens: {
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px',
    '2xl': '1536px',
    // 自定义断点
    '3xl': '1920px',
    'mobile': {'max': '767px'},
    'tablet': {'min': '768px', 'max': '1023px'},
    'desktop': {'min': '1024px'},
  }
}

自定义断点使用

<div class="
  bg-red-500 
  mobile:bg-blue-500 
  tablet:bg-green-500 
  desktop:bg-purple-500
">
  响应式背景色
</div>

6. 动画和过渡自定义

自定义动画

theme: {
  extend: {
    animation: {
      // 自定义动画
      'bounce-slow': 'bounce 2s infinite',
      'spin-slow': 'spin 3s linear infinite',
      'pulse-fast': 'pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      'fade-in': 'fadeIn 0.5s ease-in-out',
      'slide-in': 'slideIn 0.3s ease-out',
    },
    keyframes: {
      fadeIn: {
        '0%': { opacity: '0' },
        '100%': { opacity: '1' },
      },
      slideIn: {
        '0%': { transform: 'translateX(-100%)' },
        '100%': { transform: 'translateX(0)' },
      }
    },
    // 过渡时间扩展
    transitionDuration: {
      '2000': '2000ms',
      '3000': '3000ms',
    }
  }
}

动画使用示例

<div class="animate-fade-in hover:animate-bounce-slow">
  自定义动画效果
</div>

<button class="transition-all duration-2000 hover:scale-110">
  缓慢过渡效果
</button>

7. 阴影和边框自定义

阴影扩展

theme: {
  extend: {
    boxShadow: {
      // 自定义阴影
      'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
      'hard': '0 0 0 3px rgba(66, 153, 225, 0.5)',
      'glow': '0 0 20px rgba(59, 130, 246, 0.5)',
    },
    // 边框扩展
    borderWidth: {
      '3': '3px',
      '6': '6px',
    },
    borderRadius: {
      '4xl': '2rem',
      '5xl': '2.5rem',
    }
  }
}

阴影使用示例

<div class="shadow-soft border-3 border-blue-500 rounded-4xl">
  自定义阴影和边框
</div>

<button class="shadow-glow hover:shadow-hard">
  发光效果按钮
</button>

8. 插件系统自定义

创建自定义插件

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, prefix, config }) {
      // 添加自定义工具类
      const newUtilities = {
        '.text-shadow': {
          textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
        },
        '.text-shadow-lg': {
          textShadow: '4px 4px 8px rgba(0, 0, 0, 0.5)',
        },
        '.backdrop-blur-xs': {
          backdropFilter: 'blur(2px)',
        }
      }
      
      addUtilities(newUtilities, ['responsive', 'hover'])
      
      // 添加自定义组件
      const buttons = {
        '.btn-custom': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-custom-blue': {
          backgroundColor: '#3490dc',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#2779bd'
          },
        },
      }
      
      addComponents(buttons)
    })
  ]
}

插件使用示例

<h1 class="text-shadow-lg">自定义文字阴影</h1>
<div class="backdrop-blur-xs bg-white/50">毛玻璃效果</div>
<button class="btn-custom btn-custom-blue">自定义按钮</button>

9. CSS变量集成

使用CSS变量实现主题切换

/* 在CSS文件中定义变量 */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #6b7280;
  --border-radius: 0.375rem;
  --spacing-unit: 1rem;
}

/* 在Tailwind配置中使用 */
theme: {
  extend: {
    colors: {
      primary: 'var(--primary-color)',
      secondary: 'var(--secondary-color)',
    },
    borderRadius: {
      DEFAULT: 'var(--border-radius)',
    },
    spacing: {
      unit: 'var(--spacing-unit)',
    }
  }
}

10. 实际完整示例

完整的自定义配置示例

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      // 颜色系统
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      },
      // 字体系统
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      // 间距系统
      spacing: {
        '18': '4.5rem',
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      // 动画系统
      animation: {
        'fade-in-up': 'fadeInUp 0.5s ease-out',
      },
      keyframes: {
        fadeInUp: {
          '0%': { opacity: '0', transform: 'translateY(30px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        }
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

使用自定义样式的HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义样式示例</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  </style>
</head>
<body class="font-sans bg-gray-50">
  <div class="max-w-4xl mx-auto p-6">
    <!-- 使用自定义动画 -->
    <div class="animate-fade-in-up bg-brand-500 text-white p-8 rounded-lg shadow-lg">
      <h1 class="text-3xl font-bold mb-4">自定义样式演示</h1>
      <p class="text-lg opacity-90">使用自定义颜色、字体和动画效果。</p>
    </div>
    
    <!-- 使用自定义间距 -->
    <div class="mt-18 p-6 bg-white rounded-lg">
      <h2 class="text-2xl font-semibold mb-4">自定义间距</h2>
      <div class="space-y-4">
        <div class="p-4 bg-gray-100 rounded">内容块1</div>
        <div class="p-4 bg-gray-100 rounded">内容块2</div>
      </div>
    </div>
  </div>
</body>
</html>

11. 最佳实践建议

渐进式扩展：优先使用 extend 而不是覆盖默认配置
语义化命名：使用有意义的名称，如 brand-500 而不是 blue-500
保持一致性：建立设计系统，确保自定义样式的一致性
文档化：为自定义配置添加注释说明
性能考虑：避免创建过多不必要的自定义类

Tailwind CSS 指令与函数

1. @tailwind 指令（基础指令）

这是Tailwind最核心的指令，用于引入基础样式、组件和工具类。

/* 在CSS文件开头使用 */
@tailwind base;        /* 引入基础样式 */
@tailwind components;  /* 引入组件样式 */
@tailwind utilities;   /* 引入工具类样式 */

完整示例

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */
.my-custom-class {
  @apply bg-blue-500 text-white;
}

2. @apply 指令（样式组合）

@apply 是使用最频繁的指令，用于将多个Tailwind类组合成一个自定义类。

基础用法

.btn {
  @apply px-4 py-2 rounded font-semibold;
}

复杂组合示例

.card {
  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
  @apply transition-all duration-300 ease-in-out;
  @apply hover:shadow-lg hover:scale-105;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
}

响应式@apply

.responsive-card {
  @apply w-full;
  @apply sm:w-1/2 md:w-1/3 lg:w-1/4;
  @apply p-4 sm:p-6 md:p-8;
}

3. @layer 指令（层级管理）

@layer 指令用于将样式组织到不同的层级中，控制CSS的加载顺序。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* 基础样式 - 最先加载 */
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply font-sans antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-gray-900;
  }
}

@layer components {
  /* 组件样式 - 中间加载 */
  .btn {
    @apply px-4 py-2 rounded font-medium transition-colors;
  }
  
  .card {
    @apply bg-white rounded-lg shadow p-6;
  }
}

@layer utilities {
  /* 工具类样式 - 最后加载 */
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .backdrop-blur-xs {
    backdrop-filter: blur(2px);
  }
}

4. @variants 指令（变体生成）

@variants 用于为自定义类生成响应式、状态等变体。

@layer components {
  /* 为.btn生成hover、focus、active变体 */
  @variants hover, focus, active {
    .btn-primary {
      @apply bg-blue-500 text-white;
    }
  }
  
  /* 为自定义工具类生成响应式变体 */
  @variants responsive {
    .text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
  }
}

5. theme() 函数（配置访问）

theme() 函数用于访问Tailwind配置中的值。

基础用法

.custom-element {
  /* 访问配置中的颜色 */
  color: theme('colors.blue.500');
  background-color: theme('colors.gray.100');
  
  /* 访问配置中的间距 */
  padding: theme('spacing.4');
  margin: theme('spacing.2');
  
  /* 访问配置中的断点 */
  @media (min-width: theme('screens.lg')) {
    width: 50%;
  }
}

实际应用示例

:root {
  /* 使用theme()函数定义CSS变量 */
  --primary-color: theme('colors.blue.500');
  --spacing-unit: theme('spacing.4');
  --border-radius: theme('borderRadius.DEFAULT');
}

.themed-component {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
}

.responsive-theme {
  /* 响应式theme()使用 */
  font-size: theme('fontSize.sm');
  
  @media (min-width: theme('screens.md')) {
    font-size: theme('fontSize.lg');
  }
}

6. screen() 函数（媒体查询）

screen() 函数是 theme('screens.xxx') 的快捷方式，用于创建媒体查询。

/* 使用screen()函数创建响应式样式 */
@media screen(sm) {
  .responsive-element {
    @apply text-lg;
  }
}

@media screen(md) {
  .responsive-element {
    @apply text-xl;
  }
}

/* 等价于 */
@media (min-width: theme('screens.sm')) {
  .responsive-element {
    font-size: theme('fontSize.lg');
  }
}

7. 配置函数（tailwind.config.js）

在配置文件中使用的各种函数。

配置颜色函数

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        // 使用Tailwind颜色函数
        primary: colors.blue,
        secondary: colors.gray,
        // 自定义颜色函数
        brand: ({ opacityValue }) => {
          if (opacityValue !== undefined) {
            return `rgba(14, 165, 233, ${opacityValue})`
          }
          return 'rgb(14, 165, 233)'
        }
      }
    }
  }
}

8. 最佳实践

合理使用@layer：保持样式组织有序
避免过度使用@apply：只在确实需要重用时使用
利用theme()函数：保持与配置的一致性
使用@variants：为自定义类生成必要的变体
性能优化：避免创建过多的小型自定义类

Tailwind CSS 布局类

1. 容器类 (Container)

容器类用于创建响应式的居中容器。

<!-- 基础容器 -->
<div class="container mx-auto">
  <!-- 内容会自动在较大屏幕上居中 -->
</div>

<!-- 带内边距的容器 -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <!-- 响应式内边距 -->
</div>

<!-- 完整示例 -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <h1>页面标题</h1>
  <p>页面内容...</p>
</div>

2. 盒模型类 (Box Sizing)

<!-- 默认：border-box (推荐) -->
<div class="box-border">
  <!-- 边框和内边距包含在宽度内 -->
</div>

<!-- 传统盒模型 -->
<div class="box-content">
  <!-- 边框和内边距在宽度外 -->
</div>

3. 显示类 (Display)

控制元素的显示方式。

<!-- 块级元素 -->
<div class="block">块级显示</div>

<!-- 内联元素 -->
<span class="inline">内联显示</span>

<!-- 内联块级元素 -->
<div class="inline-block">内联块级</div>

<!-- Flex布局 -->
<div class="flex">Flex容器</div>

<!-- Grid布局 -->
<div class="grid">Grid容器</div>

<!-- 隐藏元素 -->
<div class="hidden">隐藏元素</div>

<!-- 响应式显示控制 -->
<div class="block md:hidden lg:block">
  <!-- 移动端显示，平板隐藏，桌面显示 -->
</div>

4. 浮动类 (Float)

<!-- 左浮动 -->
<div class="float-left">左浮动</div>

<!-- 右浮动 -->
<div class="float-right">右浮动</div>

<!-- 清除浮动 -->
<div class="clear-left">清除左浮动</div>
<div class="clear-right">清除右浮动</div>
<div class="clear-both">清除两侧浮动</div>

5. 清除浮动类 (Clear)

<div class="float-left">左浮动元素</div>
<div class="float-right">右浮动元素</div>
<div class="clear-both"><!-- 清除浮动 --></div>

6. 对象适配类 (Object Fit)

控制替换元素（如图片）的适配方式。

<!-- 容器 -->
<div class="w-48 h-48">
  <!-- 填充整个容器，可能变形 -->
  <img src="image.jpg" class="w-full h-full object-fill" alt="填充">
  
  <!-- 保持比例，填充容器，可能裁剪 -->
  <img src="image.jpg" class="w-full h-full object-cover" alt="覆盖">
  
  <!-- 保持比例，完整显示在容器内 -->
  <img src="image.jpg" class="w-full h-full object-contain" alt="包含">
  
  <!-- 无缩放 -->
  <img src="image.jpg" class="w-full h-full object-none" alt="无缩放">
  
  <!-- 向下缩放 -->
  <img src="image.jpg" class="w-full h-full object-scale-down" alt="向下缩放">
</div>

7. 对象位置类 (Object Position)

控制替换元素在容器中的位置。

<div class="w-48 h-48">
  <img src="image.jpg" class="w-full h-full object-cover object-center" alt="居中">
  <img src="image.jpg" class="w-full h-full object-cover object-top" alt="顶部">
  <img src="image.jpg" class="w-full h-full object-cover object-bottom" alt="底部">
  <img src="image.jpg" class="w-full h-full object-cover object-left" alt="左侧">
  <img src="image.jpg" class="w-full h-full object-cover object-right" alt="右侧">
</div>

8. 溢出类 (Overflow)

控制内容溢出的处理方式。

<!-- 自动滚动 -->
<div class="overflow-auto h-32">
  <!-- 内容过长时显示滚动条 -->
</div>

<!-- 隐藏溢出 -->
<div class="overflow-hidden h-32">
  <!-- 隐藏超出内容 -->
</div>

<!-- 显示滚动条 -->
<div class="overflow-scroll h-32">
  <!-- 始终显示滚动条 -->
</div>

<!-- 可见溢出 -->
<div class="overflow-visible h-32">
  <!-- 内容可以溢出容器 -->
</div>

<!-- 分别控制水平和垂直方向 -->
<div class="overflow-x-auto overflow-y-hidden">
  <!-- 水平滚动，垂直隐藏 -->
</div>

9. 定位类 (Position)

控制元素的定位方式。

<!-- 静态定位（默认） -->
<div class="static">静态定位</div>

<!-- 相对定位 -->
<div class="relative">相对定位</div>

<!-- 绝对定位 -->
<div class="absolute">绝对定位</div>

<!-- 固定定位 -->
<div class="fixed">固定定位</div>

<!-- 粘性定位 -->
<div class="sticky top-0">粘性定位</div>

10. 顶部/右侧/底部/左侧类 (Top/Right/Bottom/Left)

控制定位元素的位置。

<!-- 相对定位示例 -->
<div class="relative h-32 bg-gray-200">
  <div class="absolute top-0 left-0 bg-red-500 p-2">左上角</div>
  <div class="absolute top-0 right-0 bg-blue-500 p-2">右上角</div>
  <div class="absolute bottom-0 left-0 bg-green-500 p-2">左下角</div>
  <div class="absolute bottom-0 right-0 bg-yellow-500 p-2">右下角</div>
  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-500 p-2">居中</div>
</div>

<!-- 固定定位导航栏 -->
<nav class="fixed top-0 left-0 right-0 bg-white shadow-lg z-50">
  <!-- 固定在顶部的导航栏 -->
</nav>

<!-- 粘性定位侧边栏 -->
<aside class="sticky top-4 h-screen">
  <!-- 滚动时保持可见的侧边栏 -->
</aside>

11. 可见性类 (Visibility)

<!-- 可见 -->
<div class="visible">可见元素</div>

<!-- 不可见（仍占空间） -->
<div class="invisible">不可见元素</div>

<!-- 响应式可见性 -->
<div class="invisible md:visible">
  <!-- 移动端隐藏，桌面端可见 -->
</div>

12. Z-index类

控制元素的堆叠顺序。

    <style>
        .stack-demo {
            position: absolute;
            width: 200px;
            height: 100px;
            padding: 10px;
            color: white;
            font-weight: bold;
        }
    </style>


<body class="min-h-screen">
    <!-- 基础z-index -->
    <div class="stack-demo z-0 bg-blue-500"
        style="left: 20px; top: 20px;">z-0 底层</div>
    <div class="stack-demo z-10 bg-green-500"
        style="left: 40px; top: 40px;">z-10 中层</div>
    <div class="stack-demo z-20 bg-yellow-500"
        style="left: 60px; top: 60px;">z-20 上层</div>
    <div class="stack-demo z-30 bg-red-500"
        style="left: 80px; top: 80px;">z-30 顶层</div>
    <div class="stack-demo z-40 bg-purple-500"
        style="left: 100px; top: 100px;">z-40 最顶层</div>
    <div class="stack-demo z-50 bg-indigo-500 "
        style="left: 120px; top: 120px;">z-50 模态层</div>

    <!-- 自动z-index -->
    <div class="stack-demo z-auto bg-gray-800"
        style="left: 140px; top: 140px;">z-auto 自动堆叠</div>

</body>

13. 实际布局示例

完整的页面布局结构

<!DOCTYPE html>
<html lang="zh-CN" class="h-full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>布局类示例</title>
</head>
<body class="h-full bg-gray-100">
  <!-- 固定导航栏 -->
  <nav class="fixed top-0 left-0 right-0 bg-white shadow-lg z-50">
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="text-xl font-bold">我的网站</div>
        <div class="hidden md:flex space-x-4">
          <a href="#" class="hover:text-blue-500">首页</a>
          <a href="#" class="hover:text-blue-500">关于</a>
          <a href="#" class="hover:text-blue-500">联系</a>
        </div>
        <button class="md:hidden">菜单</button>
      </div>
    </div>
  </nav>

  <!-- 主要内容区域 -->
  <main class="pt-16 min-h-screen">
    <div class="container mx-auto px-4 py-8">
      <!-- 网格布局 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 主内容区 -->
        <div class="md:col-span-2">
          <div class="bg-white rounded-lg shadow p-6">
            <h1 class="text-3xl font-bold mb-4">主标题</h1>
            
            <!-- Flex布局示例 -->
            <div class="flex flex-wrap gap-4 mb-6">
              <div class="flex-1 min-w-[200px] bg-gray-100 p-4 rounded">Flex项目1</div>
              <div class="flex-1 min-w-[200px] bg-gray-100 p-4 rounded">Flex项目2</div>
              <div class="flex-1 min-w-[200px] bg-gray-100 p-4 rounded">Flex项目3</div>
            </div>
            
            <!-- 溢出处理示例 -->
            <div class="overflow-hidden h-32 bg-gray-50 p-4 rounded mb-6">
              <p>这是一个溢出处理示例。当内容超过容器高度时，可以使用overflow类来控制显示方式。</p>
              <p>更多内容...</p>
              <p>更多内容...</p>
              <p>更多内容...</p>
            </div>
          </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="md:col-span-1">
          <!-- 粘性定位侧边栏 -->
          <div class="sticky top-24">
            <div class="bg-white rounded-lg shadow p-6 mb-6">
              <h3 class="text-lg font-semibold mb-4">侧边栏标题</h3>
              <ul class="space-y-2">
                <li><a href="#" class="text-blue-500 hover:underline">链接1</a></li>
                <li><a href="#" class="text-blue-500 hover:underline">链接2</a></li>
                <li><a href="#" class="text-blue-500 hover:underline">链接3</a></li>
              </ul>
            </div>
            
            <!-- 图片适配示例 -->
            <div class="bg-white rounded-lg shadow overflow-hidden">
              <div class="h-48 w-full">
                <img src="image.jpg" 
                     class="w-full h-full object-cover" 
                     alt="示例图片">
              </div>
              <div class="p-4">
                <p>图片适配示例</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 浮动布局示例 -->
      <div class="mt-8 bg-white rounded-lg shadow p-6">
        <h3 class="text-xl font-semibold mb-4">浮动布局</h3>
        <div class="relative h-40 bg-gray-100 p-4">
          <div class="float-left w-20 h-20 bg-blue-500 rounded-lg flex items-center justify-center text-white">
            左浮动
          </div>
          <div class="float-right w-20 h-20 bg-green-500 rounded-lg flex items-center justify-center text-white">
            右浮动
          </div>
          <div class="clear-both"></div>
          <p class="mt-2">浮动元素周围的文本内容...</p>
        </div>
      </div>
    </div>
  </main>

  <!-- 固定底部 -->
  <footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4 text-center">
      <p>&copy; 2024 我的网站. 版权所有.</p>
    </div>
  </footer>
</body>
</html>

14. 响应式布局示例

响应式网格布局

<!-- 响应式网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
  <div class="bg-blue-100 p-4 rounded">项目1</div>
  <div class="bg-blue-200 p-4 rounded">项目2</div>
  <div class="bg-blue-300 p-4 rounded">项目3</div>
  <div class="bg-blue-400 p-4 rounded">项目4</div>
  <div class="bg-blue-500 p-4 rounded">项目5</div>
  <div class="bg-blue-600 p-4 rounded">项目6</div>
</div>

<!-- 响应式Flex布局 -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1 bg-gray-100 p-4 rounded">左侧内容</div>
  <div class="flex-1 bg-gray-200 p-4 rounded">右侧内容</div>
</div>

<!-- 响应式显示控制 -->
<div class="block md:hidden lg:block xl:hidden">
  复杂的响应式显示逻辑
</div>

15. 布局最佳实践

移动优先：从移动端布局开始设计
语义化结构：使用有意义的HTML标签
渐进增强：逐步添加复杂布局
性能考虑：避免过度复杂的嵌套
可访问性：确保布局对辅助设备友好

Tailwind CSS 与 Flexbox 和 Grid 布局

1. Flexbox 布局类

1.1 Flex容器类

<!-- 基础Flex容器 -->
<div class="flex">
  <div>Flex项目1</div>
  <div>Flex项目2</div>
</div>

<!-- Flex方向 -->
<div class="flex flex-row">水平排列（默认）</div>
<div class="flex flex-col">垂直排列</div>
<div class="flex flex-row-reverse">水平反向排列</div>
<div class="flex flex-col-reverse">垂直反向排列</div>

<!-- 响应式Flex方向 -->
<div class="flex flex-col md:flex-row">
  <!-- 移动端垂直，桌面端水平 -->
</div>

1.2 Flex项目对齐

<!-- 主轴对齐 -->
<div class="flex justify-start">左对齐</div>
<div class="flex justify-center">居中对齐</div>
<div class="flex justify-end">右对齐</div>
<div class="flex justify-between">两端对齐</div>
<div class="flex justify-around">均匀分布</div>
<div class="flex justify-evenly">完全均匀分布</div>

<!-- 交叉轴对齐 -->
<div class="flex items-start">顶部对齐</div>
<div class="flex items-center">垂直居中</div>
<div class="flex items-end">底部对齐</div>
<div class="flex items-stretch">拉伸填充</div>
<div class="flex items-baseline">基线对齐</div>

<!-- 多行对齐 -->
<div class="flex flex-wrap content-start">多行顶部对齐</div>
<div class="flex flex-wrap content-center">多行居中</div>
<div class="flex flex-wrap content-end">多行底部对齐</div>
<div class="flex flex-wrap content-between">多行两端对齐</div>
<div class="flex flex-wrap content-around">多行均匀分布</div>

1.3 Flex项目属性

<!-- 项目排序 -->
<div class="flex">
  <div class="order-1">第二项</div>
  <div class="order-2">第三项</div>
  <div class="order-first">第一项</div>
  <div class="order-last">最后一项</div>
</div>

<!-- 项目伸缩 -->
<div class="flex">
  <div class="flex-1">可伸缩项目</div>
  <div class="flex-none">固定宽度项目</div>
  <div class="flex-auto">自动伸缩项目</div>
  <div class="flex-initial">初始大小</div>
</div>

<!-- 特定伸缩比例 -->
<div class="flex">
  <div class="flex-1">1份</div>
  <div class="flex-2">2份</div>
  <div class="flex-3">3份</div>
</div>

2. Grid 布局类

2.1 Grid容器类

<!-- 基础Grid容器 -->
<div class="grid grid-cols-3 gap-4">
  <div>列1</div>
  <div>列2</div>
  <div>列3</div>
</div>

<!-- 响应式Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div>响应式列</div>
  <div>响应式列</div>
  <div>响应式列</div>
  <div>响应式列</div>
</div>

<!-- 自动列宽 -->
<div class="grid grid-cols-auto gap-4">
  <div>自动宽度</div>
  <div>较长的内容自动调整</div>
  <div>短</div>
</div>

<!-- 固定和自动混合 -->
<div class="grid grid-cols-[200px,1fr,300px] gap-4">
  <div>固定200px</div>
  <div>自动填充</div>
  <div>固定300px</div>
</div>

2.2 Grid行和列控制

<!-- 行控制 -->
<div class="grid grid-rows-3 gap-4 h-64">
  <div>行1</div>
  <div>行2</div>
  <div>行3</div>
</div>

<!-- 行列混合 -->
<div class="grid grid-cols-3 grid-rows-2 gap-4 h-64">
  <div>单元格1</div>
  <div>单元格2</div>
  <div>单元格3</div>
  <div>单元格4</div>
  <div>单元格5</div>
  <div>单元格6</div>
</div>

2.3 Grid项目定位

<!-- 列跨度 -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-1">跨1列</div>
  <div class="col-span-2">跨2列</div>
  <div class="col-span-3">跨3列</div>
  <div class="col-span-full">跨所有列</div>
</div>

<!-- 行跨度 -->
<div class="grid grid-rows-3 gap-4 h-96">
  <div class="row-span-1">跨1行</div>
  <div class="row-span-2">跨2行</div>
  <div class="row-span-3">跨3行</div>
  <div class="row-span-full">跨所有行</div>
</div>

<!-- 起始位置 -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-start-2">从第2列开始</div>
  <div class="col-end-4">到第4列结束</div>
  <div class="col-start-1 col-end-3">从1到3列</div>
</div>

3. 实际布局示例

3.1 完整的页面布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox与Grid布局示例</title>
</head>
<body class="bg-gray-100 min-h-screen">
  <!-- 导航栏 - Flexbox -->
  <nav class="bg-white shadow-lg">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- Logo区域 -->
        <div class="flex items-center">
          <div class="w-8 h-8 bg-blue-500 rounded"></div>
          <span class="ml-2 text-xl font-bold">我的网站</span>
        </div>
        
        <!-- 导航菜单 - 桌面端Flex -->
        <div class="hidden md:flex items-center space-x-6">
          <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors">首页</a>
          <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors">产品</a>
          <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors">服务</a>
          <a href="#" class="text-gray-700 hover:text-blue-500 transition-colors">关于</a>
        </div>
        
        <!-- 行动按钮 -->
        <div class="flex items-center space-x-4">
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
            登录
          </button>
          <button class="md:hidden">菜单</button>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主要内容区域 - Grid -->
  <main class="container mx-auto px-4 py-8">
    <!-- 英雄区域 - Grid -->
    <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
      <div class="flex flex-col justify-center">
        <h1 class="text-4xl font-bold mb-4">欢迎使用我们的服务</h1>
        <p class="text-lg text-gray-600 mb-6">提供最优质的产品和解决方案</p>
        <div class="flex space-x-4">
          <button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors">
            开始使用
          </button>
          <button class="border border-blue-500 text-blue-500 px-6 py-3 rounded-lg hover:bg-blue-50 transition-colors">
            了解更多
          </button>
        </div>
      </div>
      <div class="flex items-center justify-center">
        <div class="w-full h-64 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg flex items-center justify-center text-white text-2xl">
          特色图片
        </div>
      </div>
    </section>

    <!-- 特性卡片 - Grid -->
    <section class="mb-12">
      <h2 class="text-3xl font-bold text-center mb-8">我们的特性</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 卡片1 -->
        <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <span class="text-blue-500 text-xl">⚡</span>
          </div>
          <h3 class="text-xl font-semibold mb-2">快速高效</h3>
          <p class="text-gray-600 flex-1">提供快速响应的服务体验，确保用户满意度。</p>
          <button class="mt-4 text-blue-500 hover:text-blue-600 self-start">了解更多 →</button>
        </div>
        
        <!-- 卡片2 -->
        <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
            <span class="text-green-500 text-xl">🔒</span>
          </div>
          <h3 class="text-xl font-semibold mb-2">安全可靠</h3>
          <p class="text-gray-600 flex-1">采用最先进的安全技术，保护用户数据安全。</p>
          <button class="mt-4 text-blue-500 hover:text-blue-600 self-start">了解更多 →</button>
        </div>
        
        <!-- 卡片3 -->
        <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
            <span class="text-purple-500 text-xl">🛠️</span>
          </div>
          <h3 class="text-xl font-semibold mb-2">易于使用</h3>
          <p class="text-gray-600 flex-1">简洁直观的界面设计，降低用户学习成本。</p>
          <button class="mt-4 text-blue-500 hover:text-blue-600 self-start">了解更多 →</button>
        </div>
      </div>
    </section>

    <!-- 价格表 - Grid复杂布局 -->
    <section class="mb-12">
      <h2 class="text-3xl font-bold text-center mb-8">价格方案</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
        <!-- 基础版 -->
        <div class="bg-white rounded-lg shadow-lg border-2 border-gray-200 p-6 flex flex-col">
          <div class="text-center mb-6">
            <h3 class="text-xl font-semibold mb-2">基础版</h3>
            <div class="text-3xl font-bold text-gray-800">¥99<span class="text-sm font-normal text-gray-600">/月</span></div>
          </div>
          <ul class="space-y-3 mb-6 flex-1">
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>基础功能</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>5GB存储空间</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>基础支持</span>
            </li>
          </ul>
          <button class="w-full bg-gray-500 text-white py-3 rounded-lg hover:bg-gray-600 transition-colors">
            选择基础版
          </button>
        </div>
        
        <!-- 专业版（突出显示） -->
        <div class="bg-white rounded-lg shadow-xl border-2 border-blue-500 p-6 flex flex-col relative">
          <div class="absolute top-0 right-0 bg-blue-500 text-white px-3 py-1 rounded-bl-lg text-sm">
            推荐
          </div>
          <div class="text-center mb-6">
            <h3 class="text-xl font-semibold mb-2">专业版</h3>
            <div class="text-3xl font-bold text-blue-600">¥199<span class="text-sm font-normal text-gray-600">/月</span></div>
          </div>
          <ul class="space-y-3 mb-6 flex-1">
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>所有基础功能</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>50GB存储空间</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>优先支持</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>高级功能</span>
            </li>
          </ul>
          <button class="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition-colors">
            选择专业版
          </button>
        </div>
        
        <!-- 企业版 -->
        <div class="bg-white rounded-lg shadow-lg border-2 border-gray-200 p-6 flex flex-col">
          <div class="text-center mb-6">
            <h3 class="text-xl font-semibold mb-2">企业版</h3>
            <div class="text-3xl font-bold text-gray-800">¥499<span class="text-sm font-normal text-gray-600">/月</span></div>
          </div>
          <ul class="space-y-3 mb-6 flex-1">
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>所有专业功能</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>无限存储空间</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>24/7专属支持</span>
            </li>
            <li class="flex items-center">
              <span class="text-green-500 mr-2">✓</span>
              <span>定制化服务</span>
            </li>
          </ul>
          <button class="w-full bg-gray-500 text-white py-3 rounded-lg hover:bg-gray-600 transition-colors">
            选择企业版
          </button>
        </div>
      </div>
    </section>

    <!-- 团队展示 - Grid复杂定位 -->
    <section>
      <h2 class="text-3xl font-bold text-center mb-8">我们的团队</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold">张三</h3>
            <p class="text-gray-600">CEO</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="h-48 bg-gradient-to-br from-green-400 to-blue-500"></div>
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold">李四</h3>
            <p class="text-gray-600">CTO</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="h-48 bg-gradient-to-br from-purple-400 to-pink-500"></div>
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold">王五</h3>
            <p class="text-gray-600">设计师</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="h-48 bg-gradient-to-br from-yellow-400 to-red-500"></div>
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold">赵六</h3>
            <p class="text-gray-600">开发工程师</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 - Flexbox -->
  <footer class="bg-gray-800 text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div class="md:col-span-2">
          <h3 class="text-xl font-bold mb-4">关于我们</h3>
          <p class="text-gray-300">我们致力于为客户提供最优质的产品和服务，推动行业创新发展。</p>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">产品</a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">服务</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <ul class="space-y-2 text-gray-300">
            <li>邮箱: contact@example.com</li>
            <li>电话: 400-123-4567</li>
            <li>地址: 北京市朝阳区</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2024 我的公司. 版权所有.</p>
      </div>
    </div>
  </footer>
</body>
</html>

4. 高级布局技巧

4.1 复杂Grid布局

<!-- 杂志式布局 -->
<div class="grid grid-cols-4 grid-rows-3 gap-4 h-96">
  <div class="col-span-2 row-span-2 bg-blue-500 rounded-lg">主图区域</div>
  <div class="col-span-2 row-span-1 bg-green-500 rounded-lg">标题区域</div>
  <div class="col-span-1 row-span-1 bg-yellow-500 rounded-lg">侧边1</div>
  <div class="col-span-1 row-span-1 bg-red-500 rounded-lg">侧边2</div>
  <div class="col-span-2 row-span-1 bg-purple-500 rounded-lg">底部区域</div>
</div>

<!-- 响应式图片墙 -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
  <div class="aspect-square bg-gray-300"></div>
  <div class="aspect-square bg-gray-400"></div>
  <div class="aspect-square bg-gray-500"></div>
  <div class="aspect-square bg-gray-600"></div>
  <div class="aspect-square bg-gray-300"></div>
  <div class="aspect-square bg-gray-400"></div>
  <div class="aspect-square bg-gray-500"></div>
  <div class="aspect-square bg-gray-600"></div>
</div>

4.2 Flex与Grid混合布局

<!-- 卡片组内的Flex布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  <div class="flex flex-col bg-white rounded-lg shadow-md p-6">
    <div class="flex items-center mb-4">
      <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
        A
      </div>
      <div class="flex-1">
        <h3 class="font-semibold">标题</h3>
        <p class="text-sm text-gray-600">副标题</p>
      </div>
      <button class="text-blue-500 hover:text-blue-600">操作</button>
    </div>
    <p class="text-gray-700 flex-1">卡片内容描述...</p>
    <div class="flex justify-between items-center mt-4">
      <span class="text-sm text-gray-500">标签</span>
      <div class="flex space-x-2">
        <button class="text-gray-500 hover:text-gray-700">分享</button>
        <button class="text-gray-500 hover:text-gray-700">收藏</button>
      </div>
    </div>
  </div>
</div>

5. 布局最佳实践

移动优先：从移动端布局开始，逐步增强
语义化选择：根据内容结构选择合适的布局方式
性能优化：避免过度复杂的嵌套和定位
可访问性：确保布局对屏幕阅读器友好
渐进增强：为不支持Grid的浏览器提供Fallback

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），传统复制策略的资源浪费问题愈发突出。如何在的前提下，，成为大数据工程师必须解决的关键问题。本文将从五个维度，全