每次看着设计稿做前端界面都要写一大堆 CSS 代码，在使用 v0.dev 或者一些其他图片转代码的工具时发现它们都会优先使用 Tailwind CSS，了解了发现貌似也挺好玩。

设计理念上，与 传统 CSS 使用类选择器、ID 和元素选择器来定义样式来做到精细控制相比，Tailwind CSS 预先提供了一些常见样式的类，通过组合类名就能够快速实现复杂的布局和样式，能够快速开发和原型设计。

用法区别

传统 CSS 是一般是给一个元素定义一个类，然后编写这个类具体的样式，但 Tailwind CSS 是用多个类名组合的方式控制样式，举个例子：

以上是两个蓝色按钮，上面是传统 CSS ，下面是 Tailwind CSS：

<!-- HTML -->
<button class="my-button">点击我</button>
​
<!-- CSS -->
<style>
    .my-button {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
<button class="bg-blue-700 text-white py-2.5 px-5 rounded">点击我</button>

我们可以直观的看到 Tailwind CSS 只用了一行代码就取得了和传统 CSS 几乎相同的效果。

再来做一个卡片：

<!-- HTML -->
<div class="card">
    <h2>卡片标题</h2>
    <p>卡片内容</p>
</div>
​
<!-- CSS -->
<style>
    .card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>
<div class="bg-white border border-gray-300 rounded-lg p-5 shadow-md">
    <h2>卡片标题</h2>
    <p>卡片内容</p>
</div>

Tailwind CSS 安装方式

Tailwind CSS 可以通过 npm 安装：

npm install tailwindcss

也可以通过 CDN 引入：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

Tailwind CSS 常用类

  • 背景颜色：bg-<color>-<num>

  • 字体颜色：text-<color>

  • 内边距：p-<num>

示例：

<div class="bg-blue-500 text-white p-4">背景色为蓝色，白色字体，内边距为 1rem（4 像素） 的盒子</div>

  • 字体大小：text-<num><unit>

    • text-xs：字体大小为 0.75rem（12 像素）

    • text-sm：字体大小为 0.875rem（14 像素）

    • text-base：字体大小为 1rem（16 像素）

    • text-lg：字体大小为 1.125rem（18 像素）

    • text-xl：字体大小为 1.25rem（20 像素）

    • text-2xl：字体大小为 1.5rem（24 像素）

    • text-3xl：字体大小为 1.875rem（30 像素）

    • text-4xl：字体大小为 2.25rem（36 像素）

    • text-5xl：字体大小为 3rem（48 像素）

    • text-6xl：字体大小为 3.75rem（60 像素）

    • text-7xl：字体大小为 4.5rem（72 像素）

    • text-8xl：字体大小为 6rem（96 像素）

    • text-9xl：字体大小为 8rem（128 像素）

  • 字体粗细：font-<thickness>

    • font-thin：字体粗细为 100

    • font-extralight：字体粗细为 200

    • font-light：字体粗细为 300

    • font-normal：字体粗细为 400

    • font-medium：字体粗细为 500

    • font-semibold：字体粗细为 600

    • font-bold：字体粗细为 700

    • font-extrabold：字体粗细为 800

    • font-black：字体粗细为 900

  • 文本对齐：text-center

  • 外边距：m-<num>

示例：

<div class="bg-blue-500 text-white m-4 font-bold text-center text-4xl">背景色为蓝色，白色字体，外边距为 1rem（4 像素） 的盒子，粗字体，字体居中，字体大小 36 像素的盒子</div>

  • 带边框：border

  • 边框颜色：border-<color>-<num>

  • 圆角：rouded-<range>

    • rounded-none：无圆角

    • rounded-sm：小圆角（0.125rem）

    • rounded：默认圆角（0.25rem）

    • rounded-md：中等圆角（0.375rem）

    • rounded-lg：大圆角（0.5rem）

    • rounded-xl：超大圆角（0.75rem）

    • rounded-2xl：2倍超大圆角（1rem）

    • rounded-3xl：3倍超大圆角（1.5rem）

    • rounded-full：完全圆角（形成圆形）

示例：

<div class="border border-gray-300 p-4 rounded-lg">这是带灰色边框，大圆角的盒子</div>

  • 高度：h-<height>

  • 宽度：w-<width>

  • 阴影：shadow-<range>

    • 同圆角

示例：

<div class="w-1/2 h-32 shadow-lg ">宽度为50%，高度 32，有阴影的盒子</div>