Tailwind CSS 完全指南 – 现代 CSS 框架的终极选择

Tailwind CSS 简介

Tailwind CSS 是一个原子化（Utility-First）CSS 框架。它通过组合小粒度的工具类来构建界面，而不是写传统 CSS。

为什么选择 Tailwind

• 快速开发 – 无需切换文件，边写 HTML 边写样式
• 一致性 – 预定义的设计系统确保风格统一
• 响应式 – 内置响应式前缀，简单易用
• 暗色模式 – 内置暗色模式支持
• 零冗余 – 只生成使用的样式，CSS 文件小

安装

# Vite + Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      }
    },
  },
  plugins: [],
}

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

常用工具类

间距

p-4         padding: 1rem
px-4        padding-left: 1rem; padding-right: 1rem
py-2        padding-top: 0.5rem; padding-bottom: 0.5rem
m-4         margin: 1rem
mx-auto     margin-left: auto; margin-right: auto
space-y-4   > * + * { margin-top: 1rem }

Flexbox

flex              display: flex
flex-col          flex-direction: column
items-center       align-items: center
justify-center     justify-content: center
justify-between    justify-content: space-between
flex-wrap          flex-wrap: wrap
flex-1             flex: 1 1 0%
gap-4             gap: 1rem

Grid

grid              display: grid
grid-cols-3       grid-template-columns: repeat(3, minmax(0, 1fr))
col-span-2         grid-column: span 2 / span 2
gap-4              gap: 1rem

颜色

bg-blue-500       background-color: ...
text-white         color: white
border-gray-300    border-color: ...
text-red-500       color: #ef4444
hover:bg-blue-600  hover: background-color

文字

text-sm           font-size: 0.875rem
font-bold         font-weight: 700
text-center       text-align: center
leading-tight     line-height: 1.25
tracking-wide     letter-spacing: 0.025em

响应式

text-sm           小屏幕
md:text-lg         中等屏幕及以上
lg:text-xl         大屏幕及以上
xl:text-2xl        超大屏幕

暗色模式

bg-white          亮色模式背景
dark:bg-gray-900  暗色模式背景
text-gray-900     亮色模式文字
dark:text-white    暗色模式文字

组件化

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

提取组件

// Button.jsx
export function Button({ children, variant = 'primary' }) {
  const variants = {
    primary: 'bg-blue-500 hover:bg-blue-600',
    secondary: 'bg-gray-500 hover:bg-gray-600',
  }
  
  return (
    <button className={`${variants[variant]} px-4 py-2 text-white rounded`}>
      {children}
    </button>
  )
}

常用页面布局

// 居中卡片
<div className="min-h-screen flex items-center justify-center">
  <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    Content
  </div>
</div>

// 导航栏
<nav className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-900 border-b">
  <div className="font-bold text-xl">Logo</div>
  <div className="flex gap-4">
    <a>首页</a>
    <a>关于</a>
  </div>
</nav>

总结

Tailwind CSS 是现代前端开发的最佳 CSS 框架。它的原子化理念、快速开发体验、优秀的文档，使其成为 React 生态系统的首选。建议所有新项目使用 Tailwind CSS。