tailwindcss 一览表

文章首发于 tailwindcss一览表。

引入 tailwindcss 的目的是减少编写 css ，下面列出的是 tailwindcss 一览表：

间距

默认情况下，Tailwind 包括一个丰富和全面的数字间隔比例。这些值是成比例的，所以 16 是 8 的两倍。一个间距单位等于 0.25rem，在通用浏览器中默认为 4px。

会应用 padding/margin/top/left/right/bottom/width/height/lineHeight/，p-1 = padding: 4px;/p-1 = padding: 0.25rem; 。

前缀

输入前缀会有代码提示，代码提示中包含具体内容。

特殊的，无共同前缀

Top / Right / Bottom / Left

使用 {top|right|bottom|left|inset}-0 功能类，将绝对定位的元素锚定在最近定位的父元素的任何边缘上。

可见性

定位

元素显示类型

文本装饰

文本转换

文本溢出

字体样式

悬停、焦点和其它状态

下面列出几个常用的

Hover

添加 hover: 前缀，以在 hover 状态时应用一个功能类。

<button class="bg-red-500 hover:bg-red-700 ...">
  Hover me
button>
1
2
3

Focus

添加 focus: 前缀，以在 focus 状态时应用一个功能类。

<input class="focus:ring-2 focus:ring-blue-600 ...">
1

Active

添加 active: 前缀，以在元素处于 active 状态时应用某个功能。

<button class="bg-green-500 active:bg-green-700 ...">
  Click me
button>
1
2
3

Disabled

添加 disabled: 前缀，以便当一个元素被禁用时才应用功能类。

<button class="disabled:opacity-50 ..." disabled>
  Submit
button>
1
2
3

Visited

添加 visited: 前缀，以便当一个链接被访问后才应用功能类。

<a href="#" class="text-blue-600 visited:text-purple-600 ...">Linka>
1

First-child

添加 first: 前缀，以仅当元素是父元素的第一个子元素时才应用功能类。当使用某种循环生成元素时，最为有用。

<div v-for="item in items" class="transform first:rotate-45 ...">
  {{ item }}
div>
1
2
3

Last-child

添加 last: 前缀，在仅当元素是父元素的最后一个子元素时才应用功能类。当使用某种循环生成元素时，最为有用。

<div v-for="item in items" class="transform last:rotate-45 ...">
  {{ item }}
div>
1
2
3

Odd-child

添加 odd: 前缀使得仅在元素是父级奇数子元素的时候才应用功能类。当使用某种循环生成元素时，最为有用。

<div v-for="item in items" class="transform odd:rotate-45 ...">
  {{ item }}
div>
1
2
3

Even-child

添加 even: 前缀使得仅在元素是父级偶数子元素的时候才应用功能类。当使用某种循环生成元素时，最为有用。

<div v-for="item in items" class="transform even:rotate-45 ...">
  {{ item }}
div>
1
2
3

个人配置

为了使用方便，个人增加如下配置 tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ["./public/index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], // 生产优化，删除未使用的CSS
  content: [],
  theme: {
    extend: {
      fontSize: {
        // 增加字体配置
        // text-12 = font-size: 12px;
        // text-sm = font-size: 24px;line-height: 21px;
        12: "12px",
        14: "14px",
        16: "16px",
        18: "18px",
        20: "20px",
        24: "24px",
        30: "30px",
        sm: ["14px", "21px"],
        md: ["16px", "24px"],
        lg: ["20px", "30px"],
        xl: ["24px", "36px"],
      },
      lineHeight: {
        // 增加行高配置
        // leading-12 = line-height: 12px;
        12: "12px",
        14: "14px",
        16: "16px",
        18: "18px",
        20: "20px",
        21: "21px",
        24: "24px",
        27: "27px",
        30: "30px",
        36: "36px",
        45: "45px",
      },
      borderRadius: {
        // 增加圆角配置
        // rounded-2 = border-radius: 2px;
        0: "0px",
        2: "2px",
        4: "4px",
        6: "6px",
        8: "8px",
        10: "10px",
        12: "12px",
        14: "14px",
        16: "16px",
        18: "18px",
        20: "20px",
        22: "22px",
        24: "24px",
        26: "26px",
        28: "28px",
        30: "30px",
      },
    },
  },
   // 使用变体新增状态类
  variants: {
    extend: {
      backgroundColor: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      backgroundOpacity: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      borderColor: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      borderOpacity: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      boxShadow: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      opacity: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      outline: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      textColor: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      textOpacity: ['active', 'disabled', 'visited', 'first', 'last', 'odd', 'even'],
      margin: ['first', 'last', 'odd', 'even'],
      padding: ['first', 'last', 'odd', 'even']
    }
  },
  plugins: [],
};
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

tailwind.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
1
2
3
4
5
6
7
8
9
10
11
12
13