Tailwind CSS 技巧和窍门

本文档将持续更新。

响应式设计技巧

移动优先方法

Tailwind CSS 采用移动优先的方法。始终从最小屏幕开始设计：

<!-- 移动端：全宽，平板：一半宽度，桌面：三分之一宽度 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  内容
</div>

隐藏/显示元素

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

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

布局技巧

完美居中

<!-- 水平和垂直居中 -->
<div class="flex items-center justify-center min-h-screen">
  <div>居中内容</div>
</div>

<!-- 使用 Grid 居中 -->
<div class="grid place-items-center min-h-screen">
  <div>居中内容</div>
</div>

粘性页脚

<div class="min-h-screen flex flex-col">
  <header class="bg-blue-500 p-4">头部</header>
  <main class="flex-1 p-4">主要内容</main>
  <footer class="bg-gray-800 text-white p-4">页脚</footer>
</div>

卡片网格

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow-md p-6">卡片 1</div>
  <div class="bg-white rounded-lg shadow-md p-6">卡片 2</div>
  <div class="bg-white rounded-lg shadow-md p-6">卡片 3</div>
</div>

组件样式

按钮变体

<!-- 主要按钮 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  主要按钮
</button>

<!-- 次要按钮 -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  次要按钮
</button>

<!-- 危险按钮 -->
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  删除
</button>

输入框样式

<!-- 基本输入框 -->
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="用户名">

<!-- 带图标的输入框 -->
<div class="relative">
  <input class="pl-10 pr-4 py-2 border rounded-lg w-full" type="text" placeholder="搜索...">
  <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
  </div>
</div>

实用工具

截断文本

<!-- 单行截断 -->
<p class="truncate">这是一段很长的文本，会被截断...</p>

<!-- 多行截断（需要自定义 CSS） -->
<p class="line-clamp-3">这是一段很长的文本，会在三行后被截断...</p>

渐变背景

<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  渐变背景
</div>

<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
  多色渐变
</div>

阴影效果

<!-- 不同级别的阴影 -->
<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">最大阴影</div>

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

动画和过渡

悬停效果

<button class="transform hover:scale-105 transition duration-300 ease-in-out">
  悬停放大
</button>

<div class="hover:shadow-lg transition-shadow duration-300">
  悬停阴影
</div>

加载动画

<!-- 旋转动画 -->
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>

<!-- 脉冲动画 -->
<div class="animate-pulse bg-gray-300 h-4 rounded"></div>

<!-- 弹跳动画 -->
<div class="animate-bounce bg-blue-500 h-6 w-6 rounded-full"></div>

深色模式

基本深色模式

<!-- 在 HTML 标签上添加 dark 类 -->
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  支持深色模式的内容
</div>

切换深色模式

// 切换深色模式的 JavaScript
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

性能优化

清除未使用的样式

在 tailwind.config.js 中配置清除：

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/index.html',
  ],
  // ...
}

自定义工具类

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
}

调试技巧

边框调试

<!-- 快速添加边框来调试布局 -->
<div class="border border-red-500">
  调试容器
</div>

背景颜色调试

<!-- 使用不同背景色来可视化布局 -->
<div class="bg-red-100">
  <div class="bg-blue-100">
    <div class="bg-green-100">
      嵌套容器
    </div>
  </div>
</div>

常见模式

卡片组件

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="image.jpg" alt="图片">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">标题</div>
    <p class="text-gray-700 text-base">
      描述文本...
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#标签</span>
  </div>
</div>

导航栏

<nav class="bg-blue-500 p-6">
  <div class="flex items-center justify-between">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
      <span class="font-semibold text-xl tracking-tight">品牌</span>
    </div>
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20">
          <title>菜单</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

这些技巧应该能帮助你更有效地使用 Tailwind CSS。记住，实践是掌握这些技巧的最好方法！