tailwindcss教程

发表于 更新于 分类于 阅读次数： 本文字数： 5.7k 阅读时长 ≈ 5 分钟

1. 前言

Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架，提供了基础的工具类 utility classes（如：内边距 padding、字体 text 和 font、动画 transition 等预设类），能直接在脚本标记语言中组合起来，构建出您想要的设计。

Tailwind CSS 优点

  • 可定制化程度极高
  • 减少为 class 取名字的苦恼。
  • 响应式设计
    Tailwind CSS 遵循移动优先的设计模式，断点系统很灵活。比如实现一个媒体查询，要求根据不同的屏幕宽度实现不同的图片宽度。传统写法如下
  • CSS 体积大幅降低

2. 安装tailwindcss

针对不同的试用方式, 不同的web框架有不同的安装方式, 详情请参考官方的安装指南TailwindCSS installation,
简言之, tailwindcss具有非常良好的整合性, 和大多数流行的web框架都能良好的协作.

无论我们使用哪种安装方式, 我们都需要生成tailwindcss配置文件. 这一点非常重要, 因为tailwindcss不像其它css框架, tailwindcss非常灵活, 非常容易定制.

3. 核心概念

3.1. 工具类优先基本原理

3.2. 响应式设计(Responsive design)

使用响应式变量工具类构建自适应用户界面。

Tailwind 中的每个断点工具类都可以根据不同的屏幕宽度应用不同的样式，这使得构建复杂的响应式接口变得轻而易举。

默认情况根据常见设备分辨率分为五个断点：

Breakpoint prefixMinimum widthCSS适应屏幕
sm640px@media (min-width: 640px) { … }手机竖屏
md768px@media (min-width: 768px) { … }手机横屏, 平板竖屏
lg1024px@media (min-width: 1024px) { … }平板横屏, 笔记本电脑屏幕
xl1280px@media (min-width: 1280px) { … }台式电脑屏幕
2xl1536px@media (min-width: 1536px) { … }巨屏

屏幕尺寸/分辨率/PPI大全

要添加工具类仅使其在某种屏幕尺寸生效，您所需要做的就是在工具类前面添加断点名称，如下:

1
2
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

这适用于框架中的每个工具类，这意味着您可以为给定屏幕尺寸更改任何内容 - 甚至是字母间距或光标样式之类的内容。

3.3. 深色模式(Dark mode)

使用 Tailwind CSS 为您的网站设计深色模式。

基本用法
现在，深色模式是许多操作系统的头等功能，设计网站的深色版本以配合系统默认设计变得越来越普遍。

为了使这一过程尽可能简单，Tailwind 提供了一个深色变体，可让您在启用深色模式时以不同的方式展现网站内容：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

默认情况下，这使用prefers-color-scheme CSS 媒体功能，但您也可以使用“class”策略构建支持手动切换成深色模式的网站。

上例中, 当用户切换到深色模式, 最外层的div将应用背景颜色dark:bg-slate-800, 最内侧的文字颜色也会发生改变dark:text-white dark:text-slate-400

3.3.1. 手动切换深色模式

如果您想支持手动切换深色模式而不是依赖操作系统偏好选项，请使用class策略而不是media策略：

tailwind.config.js

1
2
3
4
5
6

module.exports = {
  darkMode: 'class',
  // ...
}

现在，不再是基于操作系统偏好选项应用 dark:{class} 类，而是只要 HTML 树中出现深色类，就会应用深色模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

如果您在 Tailwind 配置中设置了前缀，请务必将其添加到 dark 类中。 例如，如果您有 tw- 前缀，则需要使用 tw-dark 类来启用深色模式。
如何将 dark 类添加到 html 元素取决于您，但常见的方法是使用一些 JS 从某处（例如 localStorage）读取首选项并相应地更新 DOM。

某些框架（如 NativeScript）有自己的方法来启用深色模式，并在深色模式处于活动状态时添加不同的类名。

您可以通过将 darkMode 设置为数组并将自定义选择器作为第二项来自定义深色模式选择器名称：

tailwind.config.js

1
2
3
4
module.exports = {
  darkMode: ['class', '[data-mode="dark"]'],
  // ...
}

3.4. 添加自定义样式

将您自己的自定义样式添加到 Tailwind 的最佳实践。

通常，使用框架时最大的挑战是弄清楚当框架无法为您处理您需要的某些内容时您应该做什么。

Tailwind 从一开始就被设计为可扩展和可定制的，因此无论您正在构建什么，您都不会觉得自己在与框架作斗争。

本指南涵盖的主题包括自定义设计令牌、如何在必要时突破这些限制、添加您自己的自定义 CSS 以及使用插件扩展框架等。

3.4.1. 定制您的主题

如果您想更改调色板、间距比例、排版比例或断点等内容，请将自定义添加到 tailwind.config.js 文件的主题部分：

tailwind.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

在主题配置文档中了解有关自定义主题的更多信息。

3.4.2. 使用任意值

虽然您通常可以使用一组受约束的design tokens来构建大部分精心制作的设计，但有时您需要突破这些约束以获得像素完美的东西。

当您发现自己确实需要像 top: 117px 这样的东西来在正确的位置获取背景图像时，请使用 Tailwind 的方括号表示法动态生成具有任意值的类：

1
2
3
4
5

<div class="top-[117px]">
  <!-- ... -->
</div>

这基本上类似于内联样式，主要好处是您可以将其与交互式修饰符（如悬停）和响应式修饰符（如 lg）结合使用：

1
2
3
<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

这适用于框架中的所有内容，包括背景颜色、字体大小、伪元素内容等：

1
2
3
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

甚至可以使用 theme 函数来引用 tailwind.config.js 文件中的定义的值：

1
2
3
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
  <!-- ... -->
</div>

当使用 CSS 变量作为任意值时，不需要将变量包装在 var(…) 中 - 只需提供实际的变量名称就足够了：

1
2
3
<div class="bg-[--my-color]">
  <!-- ... -->
</div>

3.4.3. 任意属性

如果您需要使用 不包含在Tailwind 范围内的的 CSS 属性，您还可以使用方括号表示法来编写完全任意的 CSS：

1
2
3
4
5

<div class="[mask-type:luminance]">
  <!-- ... -->
</div>

这确实很像内联样式，但同样具有可以使用修饰符的好处：

1
2
3
<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>

这对于 CSS 变量之类的东西也很有用，特别是当它们需要在不同条件下更改变量时：

1
2
3
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  <!-- ... -->
</div>

4. Colors

5. Customization

6. Typography

7. Spaces & Sizes

8. Flex

9. Grids

10. Layouts

11. Borders

12. Effects & filters

13. Animations

14. Core Concepts

15. Design System

16. Dark mode

17. 关联阅读

从@Angular/Flex-Layout 迁移到 Tailwindcss

20 个最佳 Tailwind CSS 组件库

18. 参考文档

TailwindCSS 快速入门教程

tailwind-elements