Tailwind CSS 实战

h5打开以查看

1. 快速开始

安装 Tailwind

复制代码

# 通过 npm 安装
npm install -D tailwindcss
npx tailwindcss init

# 或使用 CDN (开发环境)
<link href="https://cdn.tailwindcss.com" rel="stylesheet">

基础配置

javascript

复制代码

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 核心概念实战

响应式设计

html

复制代码

<!-- 移动端优先的响应式设计 -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
  <h1 class="text-lg sm:text-xl md:text-2xl">响应式标题</h1>
  <p class="text-sm md:text-base">内容文本</p>
</div>

布局实战

html

复制代码

<!-- Flexbox 布局 -->
<div class="flex flex-col md:flex-row gap-4 p-6">
  <div class="flex-1 bg-blue-500 p-4 rounded-lg">侧边栏</div>
  <div class="flex-3 bg-white p-4 shadow rounded-lg">主内容</div>
</div>

<!-- Grid 布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-gray-100 p-4 rounded">卡片 1</div>
  <div class="bg-gray-100 p-4 rounded">卡片 2</div>
  <div class="bg-gray-100 p-4 rounded">卡片 3</div>
</div>

3. 组件实战案例

导航栏组件

html

复制代码

<nav class="bg-white shadow-lg sticky top-0">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <!-- Logo -->
      <div class="flex items-center">
        <h1 class="text-2xl font-bold text-blue-600">Logo</h1>
      </div>
      
      <!-- 导航链接 -->
      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">首页</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">产品</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 transition">关于</a>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden">
        <svg class="w-6 h-6">...</svg>
      </button>
    </div>
  </div>
</nav>

卡片组件

html

复制代码

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="卡片图片">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">卡片标题</h3>
    <p class="text-gray-600 mb-4">这是一个漂亮的卡片组件，使用 Tailwind CSS 构建。</p>
    <div class="flex justify-between items-center">
      <span class="text-2xl font-bold text-blue-600">$99</span>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition">
        立即购买
      </button>
    </div>
  </div>
</div>

表单组件

html

复制代码

<form class="max-w-md mx-auto bg-white p-6 rounded-lg shadow">
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2">用户名</label>
    <input type="text" 
           class="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"
           placeholder="请输入用户名">
  </div>
  
  <div class="mb-6">
    <label class="block text-gray-700 text-sm font-bold mb-2">密码</label>
    <input type="password"
           class="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"
           placeholder="请输入密码">
  </div>
  
  <button class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition">
    登录
  </button>
</form>

4. 高级技巧

自定义配置

javascript

复制代码

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          100: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

使用自定义颜色

html

复制代码

<button class="bg-brand-500 hover:bg-brand-700 text-white py-2 px-4 rounded">
  品牌按钮
</button>

动画和交互

html

复制代码

<!-- Hover 效果 -->
<button class="transform hover:scale-105 transition duration-300 bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg shadow-lg hover:shadow-xl">
  悬停效果
</button>

<!-- 加载动画 -->
<div class="flex space-x-2">
  <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce"></div>
  <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce delay-100"></div>
  <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce delay-200"></div>
</div>

5. 实用工具类

常用组合

html

复制代码

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

<!-- 渐变背景 -->
<div class="bg-gradient-to-br from-purple-400 via-pink-500 to-red-500"></div>

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

<!-- 自定义响应式 -->
<div class="w-[200px] h-[calc(100vh-4rem)] bg-[#1da1f2]">
  自定义值
</div>

6. 性能优化

PurgeCSS 配置

javascript

复制代码

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./public/index.html"
  ],
  // 生产环境会自动移除未使用的样式
}

h5打开以查看