Tailwind CSS 学习指南

东华帝君
142 阅读4分钟

Tailwind CSS 学习指南

通过分析，我为你总结了需要掌握的 Tailwind CSS 核心语法和概念：

🎨 颜色系统

基础颜色

  • text-white, text-black - 基础文本颜色
  • bg-white, bg-black - 背景颜色
  • text-neutral-300/600/700/900 - 中性色阶
  • bg-neutral-50/100/800/900 - 中性背景色

自定义颜色变量

  • text-primary-400/500/600 - 主色调文本
  • bg-primary-500/600 - 主色调背景
  • text-secondary-400/500 - 辅助色
  • border-primary-200/300 - 边框颜色

渐变色

  • bg-gradient-to-r from-primary-500 to-secondary-500 - 左到右渐变
  • bg-gradient-to-br from-primary-500/20 to-secondary-500/20 - 对角渐变
  • bg-clip-text text-transparent - 文字渐变效果

📐 布局系统

Flexbox

  • flex - 启用弹性布局
  • flex-col - 垂直方向
  • items-center - 垂直居中
  • justify-center - 水平居中
  • justify-between - 两端对齐
  • space-x-4/6/8 - 水平间距
  • space-y-3/4/6 - 垂直间距

Grid 网格

  • grid - 启用网格布局
  • grid-cols-1 md:grid-cols-2 lg:grid-cols-4 - 响应式列数
  • gap-8 lg:gap-12 - 网格间距
  • lg:col-span-1 - 跨列

容器和间距

  • container mx-auto - 居中容器
  • px-4 sm:px-6 lg:px-8 - 响应式水平内边距
  • py-16 lg:py-20 - 响应式垂直内边距
  • mb-6, mt-4, ml-10 - 外边距
  • p-8, px-4, py-3 - 内边距

📱 响应式设计

断点前缀

  • sm: - 640px+
  • md: - 768px+
  • lg: - 1024px+
  • xl: - 1280px+
  • 2xl: - 1536px+

响应式示例

/* 移动端1列，平板2列，桌面3列 */
md:grid-cols-2 lg:grid-cols-3

/* 响应式文字大小 */
text-3xl sm:text-4xl lg:text-5xl

/* 响应式显示/隐藏 */
hidden lg:block
lg:hidden

🎭 外观样式

圆角

  • rounded-md - 中等圆角
  • rounded-lg - 大圆角
  • rounded-xl - 超大圆角
  • rounded-2xl - 最大圆角
  • rounded-full - 完全圆形

阴影

  • shadow-lg - 大阴影
  • shadow-xl - 超大阴影
  • hover:shadow-xl - 悬停阴影
  • drop-shadow-lg - 投影

边框

  • border - 基础边框
  • border-2 - 2px边框
  • border-neutral-200 - 边框颜色
  • border-t - 仅顶部边框

✨ 交互效果

悬停状态

  • hover:bg-primary-600 - 悬停背景色
  • hover:text-white - 悬停文字色
  • hover:scale-105 - 悬停缩放
  • hover:shadow-xl - 悬停阴影

过渡动画

  • transition-colors - 颜色过渡
  • transition-all - 所有属性过渡
  • duration-300 - 过渡时长
  • ease-in-out - 缓动函数

变换

  • transform - 启用变换
  • scale-105 - 放大5%
  • translate-y-0 - Y轴位移
  • rotate-45 - 旋转45度

🌙 暗色模式

暗色前缀

  • dark:bg-neutral-900 - 暗色背景
  • dark:text-white - 暗色文字
  • dark:border-neutral-700 - 暗色边框
  • dark:hover:bg-neutral-700 - 暗色悬停

📝 文字排版

字体大小

  • text-sm - 小字体
  • text-base - 基础字体
  • text-lg/xl/2xl/3xl - 大字体
  • text-4xl/5xl - 超大字体

字体粗细

  • font-medium - 中等粗细
  • font-semibold - 半粗体
  • font-bold - 粗体

行高和对齐

  • leading-relaxed - 宽松行高
  • text-center - 居中对齐
  • text-left - 左对齐

🔧 实用工具

定位

  • relative - 相对定位
  • absolute - 绝对定位
  • fixed - 固定定位
  • top-0 left-0 right-0 - 位置
  • z-50 - 层级

显示

  • block - 块级元素
  • inline-block - 行内块
  • hidden - 隐藏
  • flex - 弹性布局
  • grid - 网格布局

尺寸

  • w-full - 100%宽度
  • h-16 - 固定高度
  • max-w-3xl - 最大宽度
  • min-h-screen - 最小高度

🎯 高级技巧

透明度

  • bg-white/80 - 80%透明度背景
  • bg-primary-500/5 - 5%透明度
  • opacity-50 - 50%透明度

模糊效果

  • backdrop-blur-md - 背景模糊
  • blur-3xl - 元素模糊

渐变遮罩

  • bg-gradient-to-r from-transparent to-white - 渐变遮罩

组合类名工具

// 使用 cn 函数组合类名
import { cn } from '@/lib/utils'

className={cn(
  'base-classes',
  condition && 'conditional-classes',
  variant === 'primary' && 'primary-classes'
)}

📚 学习建议

  1. 从基础开始：先掌握布局、间距、颜色
  2. 响应式优先：始终考虑移动端适配
  3. 组件化思维：将常用样式封装成组件
  4. 实践为主：通过项目实战加深理解
  5. 查阅文档：遇到问题及时查看官方文档

这个项目展示了 Tailwind CSS 在现代 Web 开发中的最佳实践，涵盖了从基础布局到高级动效的完整应用场景。

avatar
文章
阅读
粉丝