Tailwind CSS实用技巧与最佳实践

Tailwind CSS实用技巧与最佳实践

Tailwind CSS是一款实用优先（Utility-First）的CSS框架，它通过大量的原子类让开发者可以快速构建自定义UI，而无需编写自定义CSS。本文将分享Tailwind CSS的实用技巧和最佳实践。

一、核心概念

<!-- 传统CSS方式 -->
<div class="card">
  <h2 class="card-title">标题</h2>
  <p class="card-text">内容</p>
</div>

<!-- Tailwind方式 -->
<div class="rounded-lg shadow-lg p-6 bg-white">
  <h2 class="text-xl font-bold text-gray-900">标题</h2>
  <p class="mt-2 text-gray-600">内容</p>
</div>

二、响应式设计

<!-- 移动优先的响应式 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <!-- 手机1列，平板2列，桌面3列，大屏4列 -->
</div>

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

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

三、自定义配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
      spacing: {
        "18": "4.5rem",
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
  ],
}

四、性能优化

// PurgeCSS - 自动移除未使用的样式
// tailwind.config.js
module.exports = {
  purge: [
    "./src/**/*.html",
    "./src/**/*.js",
    "./src/**/*.vue",
  "./src/**/*.jsx",
  ],
}

// JIT模式 - 按需生成样式
// 支持任意值
class="text-[#1da1f2]"
class="grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
class="top-[120px]"

Tailwind CSS的原子类方式虽然初看有些不习惯，但一旦掌握就能极大地提升开发效率。配合组件抽象和自定义配置，可以在保持一致性的同时实现灵活的设计。