Tailwind CSS 开发入门：掌握基础语法要点

在前端开发中，Tailwind CSS 以原子化设计和实用类系统，构建精美页面的得力工具，摒弃传统 CSS 繁琐写法。掌握其基础语法是熟练运用它的关键，下面将详细介绍核心基础语法。

一、核心基础语法

1. 颜色类

Tailwind CSS 提供了丰富的颜色类，用于设置元素的背景色、文本颜色等。

语法格式

{属性}-{颜色}-{深浅度}

示例

文本颜色：

<p class="text-red-500">这是红色文本</p>

在上述代码里，text 表示设置文本颜色，red 是颜色名称，500 代表颜色的深浅度。

背景颜色：

<div class="bg-blue-300">这是浅蓝色背景</div>

这里的 bg 意味着设置背景颜色，blue 是颜色，300 是颜色深浅度。

2. 间距类

间距类用于设置元素的内边距（padding）和外边距（margin）。

语法格式

{属性简写}{方向}-{尺寸}

示例

内边距：

<div class="p-4">这是一个有内边距的元素</div>

p 代表 padding，4 是预设的尺寸值。

<div class="pt-6">这是一个顶部有内边距的元素</div>

pt 表示 padding-top，6 是尺寸值。

外边距：

<div class="mb-8">这是一个底部有外边距的元素</div>

mb 指的是 margin-bottom，8 是尺寸值。

3. 字体类

字体类用于设置字体的大小、粗细、对齐方式等。

示例

<h1 class="text-4xl">这是一个大标题</h1>

text-4xl 把字体大小设为四倍大字体。

字体粗细：

<p class="font-bold">这是加粗的文本</p>

font-bold 让文本字体加粗。

文本对齐：

<div class="text-center">这是居中对齐的文本</div>

text-center 使文本居中对齐。

4. 布局类

布局类可用来设置元素的显示方式、浮动、定位等。

示例

显示方式：

<div class="flex">这是一个弹性布局的元素</div>

flex 把元素的显示方式设为弹性布局。

浮动：

<div class="float-left">这是向左浮动的元素</div>

float-left 让元素向左浮动。

定位：

<div class="fixed top-0 left-0">这是固定定位在左上角的元素</div>

fixed 表示固定定位，top-0 和 left-0 把元素定位到左上角。

5. 响应式前缀

Tailwind CSS 支持响应式设计，通过添加响应式前缀，可以在不同屏幕尺寸下应用不同的样式。

常用前缀

sm:：小屏幕（≥640px）
md:：中等屏幕（≥768px）
lg:：大屏幕（≥1024px）
xl:：特大屏幕（≥1280px）

示例

<div class="bg-red-500 sm:bg-blue-500 md:bg-green-500">
  小屏幕时背景为红色，中等屏幕为蓝色，大屏幕为绿色
</div>

6. 状态变体

状态变体用于在元素处于特定状态时应用不同的样式，如鼠标悬停、聚焦等。

常用变体

hover:：鼠标悬停状态
focus:：元素获得焦点状态

示例

<a href="#" class="text-blue-500 hover:text-red-500">
  鼠标悬停时文本颜色变红
</a>

在这段代码中，正常状态下文本颜色是蓝色，鼠标悬停时变为红色。

二、实战示例：基础产品展示页面

1. 构建页面框架

使用 Kooboo 在线创建网站，选择新建空白站点 -> 设计页面，构建大致的页面框架

2. 引入 Tailwind CSS

在<head></head>中引入 Tailwind CSS 框架、其运行时脚本以及 Font Awesome 图标库，从而让你能够使用 Tailwind CSS 的实用类来快速构建页面样式，利用 Font Awesome 图标库来添加丰富的图标，并且可以通过运行时脚本对 Tailwind CSS 进行动态配置。

// 通过 link 标签从 CDN（内容分发网络）引入了 Tailwind CSS 框架的最小化版本
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

// 使用 script 标签从 CDN 引入了 Tailwind CSS 的运行时脚本。
// 这个脚本允许你在项目里动态配置 Tailwind CSS，例如通过 JavaScript 来修改 Tailwind 的配置、启用或禁用某些功能等。
<script src="https://cdn.tailwindcss.com"></script>

// 通过 link 标签从 CDN 引入了 Font Awesome 图标库的最小化版本。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

3. 设置导航栏区域

<!-- 导航栏 -->
    <nav class="bg-gray-800 text-white py-4 border-b-2 border-gray-600">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold hover:text-gray-300">产品展示</a>
            <div class="space-x-4">
                <a href="#" class="hover:text-gray-300 hover:border-b-2 hover:border-white">首页</a>
                <a href="#" class="hover:text-gray-300 hover:border-b-2 hover:border-white">产品</a>
                <a href="#" class="hover:text-gray-300 hover:border-b-2 hover:border-white">关于我们</a>
            </div>
        </div>
    </nav>

整体容器：
- <nav> 标签是 HTML5 中用于定义导航链接的标签。
- bg-gray-800 为导航栏设置了深灰色的背景颜色。
- text-white 让导航栏内的文字颜色为白色。
- py-4 给导航栏添加了垂直方向的内边距。
- border-b-2 border-gray-600 为导航栏底部添加了一条 2px 宽的深灰色边框。

4. 引导区域

 <!-- 引导区域 -->
    <section class="bg-gray-800 text-white py-16 flex-grow flex items-center justify-center">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-bold mb-4">优质产品，满足您的需求</h1>
            <p class="text-lg mb-8">我们提供多种高品质的产品，为您的生活带来便利。</p>
            <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">查看所有产品</a>
        </div>
    </section>

整体容器：
- <section> 标签用于定义页面中的一个章节，这里作为英雄区域。
- bg-gray-800 为英雄区域设置了深灰色背景。
- text-white 让文字颜色为白色。
- py-16 为英雄区域添加了较大的垂直内边距。
- flex-grow 使该区域占据剩余的可用空间。
- flex items-center justify-center 让内容在垂直和水平方向上都居中显示。

5. 产品列表区域

<!-- 产品列表 -->
    <main class="container mx-auto px-4 py-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 hidden md:block">
        <div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/200/200" alt="产品图片" class="w-full h-48 object-cover mb-4">
            <h2 class="text-xl font-bold mb-2">产品名称 1</h2>
            <p class="text-gray-600 mb-4">这是产品 1 的描述信息，它具有很多优秀的特性。</p>
            <a href="#" class="text-blue-500 hover:underline">查看详情</a>
        </div>
        <div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/200/200" alt="产品图片" class="w-full h-48 object-cover mb-4">
            <h2 class="text-xl font-bold mb-2">产品名称 2</h2>
            <p class="text-gray-600 mb-4">这是产品 2 的描述信息，功能十分强大。</p>
            <a href="#" class="text-blue-500 hover:underline">查看详情</a>
        </div>
        <div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/200/200" alt="产品图片" class="w-full h-48 object-cover mb-4">
            <h2 class="text-xl font-bold mb-2">产品名称 3</h2>
            <p class="text-gray-600 mb-4">这是产品 3 的描述信息，值得拥有。</p>
            <a href="#" class="text-blue-500 hover:underline">查看详情</a>
        </div>
    </main>

整体容器：
- <main> 标签用于定义文档的主要内容。
- container mx-auto px-4 让产品列表水平居中并添加水平内边距。
- py-4 为产品列表添加了垂直内边距。
- grid 使容器成为网格布局容器。
- grid-cols-1 md:grid-cols-2 lg:grid-cols-3 表示在小屏幕下为 1 列，中等屏幕下为 2 列，大屏幕下为 3 列。
- gap-6 为网格项之间添加了间距。
- hidden md:block 表示在小屏幕下隐藏，中等及以上屏幕显示。

6. 页脚

<!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-4">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; 2025 产品展示版权所有</p>
            <div class="mt-2 space-x-4">
                <a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
                <a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </footer>