Tailwind CSS 最佳实践 #

<!-- 推荐顺序：布局 → 尺寸 → 间距 → 视觉 → 状态 -->
<button class="
  flex items-center justify-center
  w-full h-12
  px-4 py-2
  bg-blue-500 text-white rounded-lg shadow
  hover:bg-blue-600 focus:ring-2 focus:ring-blue-500
  transition-colors
">
  按钮
</button>

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

<div class="
  relative
  flex items-center justify-between
  w-full
  px-6 py-4
  bg-white
  border-b border-gray-200
  shadow-sm
  hover:shadow-md
  transition-shadow
">
  内容
</div>

<!-- 第一次：直接使用实用类 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  按钮
</button>

<!-- 第二次：继续使用实用类 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  按钮
</button>

<!-- 第三次：考虑提取组件 -->
<Button>按钮</Button>

// React 组件
function Button({ children, variant = 'primary', size = 'md' }) {
  const variants = {
    primary: 'bg-blue-500 hover:bg-blue-600 text-white',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
    outline: 'border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white',
  }
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg',
  }
  
  return (
    <button className={`
      inline-flex items-center justify-center
      rounded font-medium
      ${variants[variant]}
      ${sizes[size]}
      transition-colors
    `}>
      {children}
    </button>
  )
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2 rounded font-medium;
    @apply transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }
}

/* 不推荐：过度使用 @apply */
.card {
  @apply bg-white rounded-lg shadow-md p-6 m-4 border border-gray-200 hover:shadow-lg transition-shadow;
}

/* 推荐：保持简洁 */
.card {
  @apply bg-white rounded-lg shadow-md;
  padding: 1.5rem;
}

// 推荐：语义化颜色名
colors: {
  primary: '#3b82f6',
  secondary: '#6b7280',
  success: '#22c55e',
  warning: '#f59e0b',
  danger: '#ef4444',
}

// 不推荐：具体颜色名
colors: {
  blue: '#3b82f6',
  gray: '#6b7280',
  green: '#22c55e',
}

// 推荐：清晰的组件名
<Card>
  <CardHeader>标题</CardHeader>
  <CardBody>内容</CardBody>
  <CardFooter>底部</CardFooter>
</Card>

// 不推荐：模糊的命名
<Box>
  <BoxHeader>标题</BoxHeader>
  <BoxContent>内容</BoxContent>
</Box>

<!-- 推荐：移动优先 -->
<div class="text-sm md:text-base lg:text-lg">
  响应式文字
</div>

<!-- 不推荐：桌面优先 -->
<div class="text-lg md:text-base lg:text-sm">
  响应式文字
</div>

<!-- 使用合理的断点 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  卡片网格
</div>

<!-- 推荐：统一的配色 -->
<div class="
  bg-white dark:bg-gray-800
  text-gray-900 dark:text-white
  border-gray-200 dark:border-gray-700
">
  内容
</div>

// 推荐：使用主题配置
module.exports = {
  theme: {
    extend: {
      colors: {
        surface: {
          DEFAULT: '#ffffff',
          dark: '#1f2937',
        },
      },
    },
  },
}

// 推荐：精确指定路径
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
}

// 不推荐：扫描所有文件
module.exports = {
  content: ['./**/*'],
}

// 不推荐：动态拼接类名
<div class={`text-${color}-500`}>

// 推荐：完整类名映射
const colorClasses = {
  red: 'text-red-500',
  blue: 'text-blue-500',
  green: 'text-green-500',
}

<div class={colorClasses[color]}>

// 对于必须动态生成的类
module.exports = {
  safelist: [
    'text-red-500',
    'text-blue-500',
    'text-green-500',
  ],
}

<!-- 始终提供可见的焦点状态 -->
<button class="
  bg-blue-500 text-white px-4 py-2 rounded
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
">
  按钮
</button>

<!-- 确保足够的对比度 -->
<p class="text-gray-900 dark:text-white">
  高对比度文字
</p>

<!-- 避免低对比度 -->
<p class="text-gray-400">
  低对比度文字（不推荐）
</p>

<!-- 推荐：语义化标签 -->
<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

<!-- 不推荐：滥用 div -->
<div>
  <div><div>首页</div></div>
  <div><div>关于</div></div>
</div>

// tailwind.config.js
module.exports = {
  // 内容路径
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  
  // 暗色模式
  darkMode: 'class',
  
  // 主题扩展
  theme: {
    extend: {
      // 颜色
      colors: {},
      
      // 间距
      spacing: {},
      
      // 字体
      fontFamily: {},
    },
  },
  
  // 插件
  plugins: [],
}

<!-- 
  卡片组件
  用途：展示内容卡片
  变体：default, highlighted, bordered
-->
<div class="bg-white rounded-lg shadow-md p-6">
  卡片内容
</div>

<!-- 使用组件抽象 -->
<Button variant="primary" size="lg">
  按钮
</Button>

// 使用主题配置保持一致性
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
}

// 使用组件和良好的代码组织
function Card({ title, children }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h3 className="text-lg font-semibold">{title}</h3>
      <div className="mt-2">{children}</div>
    </div>
  )
}