一、概述

（1）简介

  • Tailwind CSS 官网：https://www.tailwindcss.cn/
  • Tailwind CSS 是一个 CSS 框架，使用初级“工具”类创建布局
  • 如 Bootstrap 等传统 CSS 框架，其使用的类通常与组件直接相关；然而，Tailwind 则采用了不同的方法，它将类作为工具集合，让用户能够自由组合这些工具来构建个性化的自定义组件
  • Tailwind 有一个条件类，用于为断点、响应状态等命名

（2）基本环境配置

代码文本编辑工具：VSCode 或其他
推荐插件：

  • 标签重命名：Auto Rename Tag
  • 实时加载：Live Server
  • PostCSS 语法支持：PostCSS Language Support
  • 代码格式化：Prettier
  • Tailwind 官方补全：Tailwind CSS IntelliSense

包管理器：Node.js 或其他
（可选）版本控制：Git

（3）创建项目

  1. 在任意位置新建一个 index.html
  2. 使用 CDN 引入 Tailwind：https://cdn.tailwindcss.com/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body></body>
</html>

二、基本功能

（1）使用颜色

文本颜色：text-[color]-[shade]

  • color：颜色名称
  • shade：色度，取值范围为 100~900，不可对黑色或白色使用
<p class="text-black">Color Black</p>
<p class="text-white">Color White</p>
<p class="text-red-500">Color Red 500</p>
<p class="text-blue-500">Color Blue 500</p>
<p class="text-gray-500">Color Gray 500</p>
<p class="text-green-500">Color Green 500</p>

背景颜色：bg-[color]-[shade]

<p class="bg-white">BgColor White</p>
<p class="bg-red-500">BgColor Red 500</p>
<p class="bg-black text-white">BgColor Black</p>

下划线颜色：underline decoration-[color]-[shade]

  • underline：添加下划线
<p class="underline">UlColor Default</p>
<p class="underline decoration-red-500">UlColor Red 500</p>
<p class="underline decoration-green-500">UlColor Green 500</p>

边框颜色：border border-[color]-[shade]

  • border：添加边框
<input type="text" class="border" />
<input type="text" class="border border-red-500" />
<input type="text" class="border border-green-500" />

间隔颜色：divide-[direct] divide-[color]-[shade]

  • divide-[direct]：添加分隔，direct 表示分隔方向，取值 x-横向、y-纵向
<div class="divide-y divide-red-500">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

轮廓线颜色：outline outline-[color]-[shade]

  • outline：添加轮廓线
<button class="outline">OlColor Default</button>
<button class="outline outline-red-500">OlColor Red 500</button>
<button class="outline outline-green-500">OlColor Green 500</button>

盒子阴影颜色：shadow-[container] shadow-[color]-[shade(/opacity)]

  • shadow-[container]：添加阴影，container 表示阴影最大宽度，取值如下

sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

  • (/opacity)：透明度，默认 100，取值 0~100
<div class="shadow-lg">SdColor Red 500</div>
<div class="shadow-lg shadow-red-500">SdColor Red 500</div>
<div class="shadow-lg shadow-red-500/20">SdColor Red 500</div>

强调颜色：accent-[color]-[shade]

<input type="checkbox" checked />
<input type="checkbox" class="accent-red-500" checked />
<input type="checkbox" class="accent-green-500" checked />

自定义颜色：-[(#xxxxx|rgb(r,g,b)|name)]

  • 十六进制、RGB、名称
<p class="text-[#4682B4]">Color #4682B4</p>
<p class="text-[rgb(46,130,180)]">Color RGB(46,130,180)</p>
<p class="text-[steelblue]">Color Steelblue</p>

（2）容器与间距

容器

<div class="container mx-auto">
  <article>
    <h3>Title</h3>
    <p>Tailwind CSS is the only framework that I've
      seen scale on large teams. It’s easy to customize,
      adapts to any design, and the build size is tiny.</p>
  </article>
</div>
  • container：标记为容器
  • mx-auto：x 轴方向（横向）上，外边距（margin）自动

外边距：m?-[number]

  • m?：m-Margin、mt-MarginTop、ml-MarginLeft、mr-MarginRight、mb-MarginBottom
  • number=number 0.25rem=number 4px
  • 如：m-2 意思为 margin: 0.5rem
<div class="bg-red-200 m-2">Margin 2</div>
<div class="bg-red-200 ml-2">Margin Left 2</div>
<div class="bg-red-200 mr-2">Margin Right 2</div>
<div class="bg-red-200 mt-2">Margin Top 2</div>
<div class="bg-red-200 mb-2">Margin Bottom 2</div>
<div class="bg-red-200 m-[20px]">Margin 20px</div>

内边距：p?-[number]

  • p?：p-Padding、pt-PaddingTop、pl-PaddingLeft、pr-PaddingRight、pb-PaddingBottom
  • number=number 0.25rem=number 4px
<div class="bg-red-200 mb-1 p-2">Padding 2</div>
<div class="bg-red-200 mb-1 pl-2">Padding Left 2</div>
<div class="bg-red-200 mb-1 pr-2">Padding Right 2</div>
<div class="bg-red-200 mb-1 pt-2">Padding Top 2</div>
<div class="bg-red-200 mb-1 pb-2">Padding Bottom 2</div>
<div class="bg-red-200 mb-1 p-[20px]">Padding 20px</div>

间距：(-)space-[direct]-[number]

  • (-)：负间距
  • direct：间隔方向，取值 x-横向、y-纵向
  • number=number 0.25rem=number 4px
<div class="flex space-x-2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="flex flex-col space-x-2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

flex：采用 Flex 布局
flex-col：Flex 布局纵向

（3）版面设计

字体：font-[family]

<div class="font-sans">Font Sans</div>
<div class="font-serif">Font Serif</div>
<div class="font-mono">Font Mono</div>

字号：text-[size]

<div class="text-xs">Text Extra Small</div>
<div class="text-sm">Text Small</div>
<div class="text-base">Text Base</div>
<div class="text-lg">Text Large</div>
<div class="text-xl">Text Extra Large</div>
<div class="text-2xl">Text 2 Extra Large</div>
<div class="text-3xl">Text 3 Extra Large</div>

字重：font-[weight]

<div class="font-light">Font Light</div>
<div class="font-normal">Font Normal</div>
<div class="font-medium">Font Medium</div>
<div class="font-semibold">Font Semibold</div>
<div class="font-bold">Font Bold</div>

字距：tracking-[space]

<div class="tracking-tight">Tracking Tight</div>
<div class="tracking-normal">Tracking Normal</div>
<div class="tracking-wide">Tracking Wide</div>

文本对齐：text-[direct]

<div class="text-left">Text Left</div>
<div class="text-center">Text Center</div>
<div class="text-right">Text Right</div>

下划线重：decoration-[weight]

<div class="underline decoration-2">Decoration 2</div>
<div class="underline decoration-4">Decoration 4</div>
<div class="underline decoration-8">Decoration 8</div>

下划线风格：decoration-[type]

<div class="underline decoration-double">Decoration Double</div>
<div class="underline decoration-dotted">Decoration Dotted</div>
<div class="underline decoration-dashed">Decoration Dashed</div>
<div class="underline decoration-wavy">Decoration Wavy</div>

装饰偏移量：underline-offset-[number]

<div class="underline underline-offset-2">Offset 2</div>
<div class="underline underline-offset-4">Offset 4</div>
<div class="underline underline-offset-8">Offset 8</div>

文本变换：

<p class="normal-case">Normal Case</p>
<p class="uppercase">uppercase</p>
<p class="lowercase">LOWERCASE</p>
<p class="capitalize">capitalize test</p>

（4）宽度与高度

宽度：w-[number]

  • number 取值 0~48
<div class="bg-black text-white mb-2 w-6">Width 1.5rem</div>
<div class="bg-black text-white mb-2 w-12">Width 3rem</div>
<div class="bg-black text-white mb-2 w-24">Width 6rem</div>