Resources

Tailwind CSS 实战指南

从零开始学习 Tailwind CSS,掌握实用优先的 CSS 框架

Tailwind CSS

实用优先的 CSS ss框架

什么是 Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架,它提供了低级别的实用工具类,让你直接在 HTML 中构建快速的自定义设计。

核心特点

实用优先: 通过组合工具类快速构建界面
高度可定制: 通过配置文件完全控制设计系统
响应式设计: 轻松实现移动端优先的响应式布局
性能优化: 自动清除未使用的样式

安装与配置

使用 npm 安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

基础配置

在 tailwind.config.js 中配置:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
};

常用工具类

布局

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div>内容 1</div>
  <div>内容 2</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>网格项 1</div>
  <div>网格项 2</div>
  <div>网格项 3</div>
</div>

间距

<!-- Padding -->
<div class="p-4">padding: 1rem</div>
<div class="px-6 py-2">水平 1.5rem, 垂直 0.5rem</div>

<!-- Margin -->
<div class="m-4">margin: 1rem</div>
<div class="mt-2 mb-4">上边距 0.5rem, 下边距 1rem</div>

颜色

<div class="bg-blue-500 text-white">蓝色背景,白色文字</div>
<div class="text-gray-700">灰色文字</div>
<div class="border border-red-300">红色边框</div>

响应式设计

<!-- 移动端默认 1 列,中等屏幕 2 列,大屏幕 3 列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 内容 -->
</div>

实战示例

卡片组件

<div class="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md">
  <img class="mb-4 h-48 w-full rounded-t-lg object-cover" src="/image.jpg" alt="图片" />
  <h3 class="mb-2 text-xl font-bold text-gray-900">卡片标题</h3>
  <p class="mb-4 text-gray-600">卡片描述内容</p>
  <a href="#" class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"> 查看详情 </a>
</div>

导航栏

<nav class="flex items-center justify-between bg-white px-6 py-4 shadow-md">
  <div class="text-xl font-bold text-gray-800">Logo</div>
  <div class="hidden space-x-6 md:flex">
    <a href="#" class="text-gray-600 hover:text-blue-500">首页</a>
    <a href="#" class="text-gray-600 hover:text-blue-500">关于</a>
    <a href="#" class="text-gray-600 hover:text-blue-500">联系</a>
  </div>
  <button class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">登录</button>
</nav>

最佳实践

1. 提取组件

对于重复使用的样式,可以创建可复用组件:

<template>
  <button :class="['rounded px-4 py-2', variants[variant]]">
    {{ label }}
  </button>
</template>

<script setup>
const props = defineProps({
  variant: {
    type: String,
    default: 'primary'
  }
});

const variants = {
  primary: 'bg-blue-500 text-white hover:bg-blue-600',
  secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  danger: 'bg-red-500 text-white hover:bg-red-600'
};
</script>

2. 使用 @apply

对于复杂的组件,可以使用 @apply 指令:

.btn-primary {
  @apply rounded px-4 py-2 bg-blue-500 text-white hover:bg-blue-600;
}

3. 配置自定义主题

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#6b7280'
      },
      spacing: {
        128: '32rem'
      }
    }
  }
};

性能优化

清除未使用的样式

Tailwind CSS 通过扫描文件自动生成包含实际使用样式的 CSS 文件。确保 content 配置正确:

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

生产环境构建

npm run build

Tailwind 会自动清除所有未使用的样式,生成最小的 CSS 文件。

总结

Tailwind CSS 提供了一种快速构建现代 Web 界面的方法。通过掌握工具类的使用,你可以:

快速开发,减少 CSS 编写时间
保持设计的一致性
轻松实现响应式设计
优化最终 CSS 文件大小

开始使用 Tailwind CSS,提升你的前端开发效率!