Tailwind CSS 教程简介

    欢迎来到 Tailwind CSS 教程！

    什么是 Tailwind CSS？

    Tailwind CSS 是一个功能类优先（Utility-First）的 CSS 框架。

    不同于传统的组件化 CSS 框架（如 Bootstrap、Bulma），Tailwind 并不提供预设好的组件类名（如 btn, card）。相反，它提供了一系列底层的、细粒度的工具类，比如 flex, pt-4, text-center 和 rotate-90，允许你直接在 HTML 中组合这些类名来构建任何设计。

    Tailwind CSS 的核心优势

    1. 不再为类名发愁：你不需要再绞尽脑汁去想诸如 sidebar-inner-wrapper 这样的类名，直接在 HTML 中描述样式即可。
    2. CSS 停止膨胀：传统写法中，每次新增一个特性，CSS 文件都会变大。而 Tailwind 是原子化的，复用性极高，配合 JIT（即时编译）模式，生产环境的 CSS 文件通常极小。
    3. 响应式设计变得极其简单：通过类似 md:flex, lg:hidden 的前缀，你可以轻松地为不同屏幕尺寸编写样式。
    4. 高度可定制：通过 tailwind.config.js，你可以覆盖所有的默认调色板、间距比例、排版缩放等，完美适配你的设计规范。

    本教程将包含什么？

    本教程旨在带你从零开始掌握 Tailwind CSS 的核心开发模式：

    1. Tailwind CSS 的安装与集成（Vite, Next.js, Angular 等环境）
    2. 核心概念：功能类优先（Utility-First）、状态变量（Hover, Focus 等）
    3. 响应式设计与暗黑模式配置
    4. 定制化你的 Tailwind 主题（配置 tailwind.config.js）
    5. 提取组件：如何使用 @apply 或是组件框架提取复用样式
    6. 官方插件使用指南（如 Typography, Forms）

    本文为轻叶全栈手册原创内容，转载请注明出处。