62 - Tailwind CSS 实战教程

编程教程 管理员 2026年06月23日 208 次阅读 721 字 约 3 分钟
适用人群：有HTML/CSS基础
难度：低-中
预计学习时间：10-15小时

为什么学 Tailwind CSS？

优势说明
效率极高不用写CSS文件，直接在HTML中写类名
设计一致内置设计系统，统一风格
体积小生产环境自动移除未使用的CSS
灵活可自定义主题和配置
流行2024-2025最流行的CSS框架

核心概念速查

<!-- 基本用法 -->
<div class="p-4 bg-white rounded-lg shadow-md">
  <h1 class="text-2xl font-bold text-gray-800">标题</h1>
  <p class="mt-2 text-gray-600">内容描述</p>
  <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    点击按钮
  </button>
</div>

<!-- Flex布局 -->
<div class="flex items-center justify-between gap-4">
  <span>左侧</span>
  <span>右侧</span>
</div>

<!-- Grid布局 -->
<div class="grid grid-cols-3 gap-4">
  <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>

<!-- 响应式 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 手机全宽，平板半宽，电脑三分之一 -->
</div>

<!-- 暗色模式 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  自动适配暗色模式
</div>

<!-- 动画 -->
<div class="transition-all duration-300 ease-in-out hover:scale-105">
  悬停放大
</div>

<!-- 表单 -->
<input class="w-full px-3 py-2 border border-gray-300 rounded-lg
              focus:ring-2 focus:ring-blue-500 focus:border-blue-500
              placeholder-gray-400" 
       placeholder="请输入...">

<!-- 卡片组件 -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="image.jpg" alt="">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">卡片标题</div>
    <p class="text-gray-700 text-base">卡片描述内容...</p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm
                 font-semibold text-gray-700 mr-2 mb-2">标签1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm
                 font-semibold text-gray-700 mr-2 mb-2">标签2</span>
  </div>
</div>

常用类速查表

类别类名说明
间距p-4, m-2, gap-4padding/margin/gap
尺寸w-full, h-screen, max-w-xl宽高
排版text-xl, font-bold, text-center文字
颜色bg-blue-500, text-gray-800背景/文字颜色
边框border, rounded-lg, shadow-md边框/圆角/阴影
布局flex, grid, items-centerFlex/Grid
响应式sm:, md:, lg:, xl:断点前缀
状态hover:, focus:, dark:交互/暗色
动画transition, duration-300, animate-过渡/动画

推荐资源

资源说明
Tailwind官方文档最好的参考手册
Tailwind UI官方组件库（付费）
daisyUI免费Tailwind组件库
Headless UI无样式可访问组件
HyperUI免费Tailwind组件模板
返回首页