Tailwind CSS 3.0 新特性

Tailwind CSS 3.0 带来了期待已久的 JIT 模式成为默认。

JIT 引擎

默认启用

JIT 现在是默认引擎：

// tailwind.config.js
module.exports = {
  // 不需要显式配置 JIT
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
};

任意值

使用任意值，无需配置：

<div class="top-[117px] text-[#1da1f1]">
  自定义值
</div>

<div class="grid-cols-[1fr_500px_2fr]">
  自定义网格
</div>

任意变体

<!-- 任意选择器 -->
<div class="[&>*]:underline">
  所有子元素下划线
</div>

<!-- 响应式 + 任意 -->
<div class="md:[&>p]:text-lg">
  响应式子元素
</div>

新增功能

颜色系统

<!-- 更丰富的调色板 -->
<div class="bg-slate-500 text-cyan-300 border-sky-400">
  新颜色
</div>

Box Shadow 颜色

<div class="shadow-lg shadow-indigo-500/50">
  彩色阴影
</div>

Scroll Snap

<div class="snap-x snap-mandatory overflow-x-scroll">
  <div class="snap-center">Item 1</div>
  <div class="snap-center">Item 2</div>
</div>

Multi-column Layout

<div class="columns-2 gap-4">
  <p>内容自动分两列...</p>
</div>

Aspect Ratio

<!-- 原生 aspect-ratio -->
<div class="aspect-video">
  16:9 视频
</div>

<div class="aspect-square">
  1:1 正方形
</div>

Print 修饰符

<div class="print:hidden">
  打印时隐藏
</div>

<div class="print:text-black">
  打印时黑色文字
</div>

性能优化

更快的构建

# 开发模式
tailwindcss -i input.css -o output.css --watch

# 生产模式
tailwindcss -i input.css -o output.css --minify

更小的文件

JIT 只生成使用的样式：

/* 之前：几 MB */
/* 现在：几 KB */

配置改进

内联配置

<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        brand: '#1da1f1',
      }
    }
  }
}
</script>

更好的类型支持

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#1da1f1',
      },
    },
  },
};

export default config;

插件系统

创建插件

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

module.exports = plugin(function({ addUtilities, addComponents, e, config }) {
  // 添加工具类
  addUtilities({
    '.text-shadow': {
      'text-shadow': '2px 2px 4px rgba(0,0,0,0.1)',
    },
    '.text-shadow-lg': {
      'text-shadow': '4px 4px 8px rgba(0,0,0,0.2)',
    },
  });

  // 添加组件
  addComponents({
    '.card': {
      backgroundColor: '#fff',
      borderRadius: '.5rem',
      padding: '1.5rem',
      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
    },
  });
});

使用插件

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('./my-plugin'),
  ],
};

实战技巧

悬停组合

<div class="group">
  <div class="group-hover:opacity-100 opacity-0">
    悬停显示
  </div>
</div>

深色模式

<!-- class 策略 -->
<div class="bg-white dark:bg-gray-800">
  自适应暗色模式
</div>

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 或 'media'
};

动画

<div class="animate-pulse">
  脉冲动画
</div>

<div class="animate-bounce">
  弹跳动画
</div>

<div class="animate-spin">
  旋转动画
</div>

响应式设计

<!-- 移动优先 -->
<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  响应式文字
</div>

<!-- 响应式容器 -->
<div class="container mx-auto px-4 md:px-6 lg:px-8">
  响应式容器
</div>

最佳实践

组织代码

<!-- 按属性分组 -->
<div class="
  /* 布局 */
  flex flex-col gap-4
  
  /* 尺寸 */
  w-full h-64
  
  /* 间距 */
  p-4 m-2
  
  /* 外观 */
  bg-white rounded-lg shadow-md
  
  /* 交互 */
  hover:shadow-lg transition-shadow
">
  内容
</div>

提取组件

// 提取常用组合
const Button = ({ children, className }) => (
  <button className={`
    px-4 py-2
    bg-blue-500 hover:bg-blue-600
    text-white font-medium
    rounded-lg
    transition-colors
    ${className}
  `}>
    {children}
  </button>
);

迁移指南

从 v2 迁移

# 更新依赖
npm install tailwindcss@latest

# 检查配置
npx tailwindcss migrate

注意事项

• 颜色名称变化
• 移除已废弃的工具类
• 更新 content 配置

小结

Tailwind CSS 3.0 要点：

• JIT 成为默认
• 任意值支持
• 更快的构建速度

升级后开发体验和性能都有显著提升。