蓁祎家进步中

# tailwind 书写规则

返回：tailwind

# 学习过程

# !important

在class前加上【!】即可

<Select.Option key={item} className={`${themeType} hover:!bg-primary-color`}>{item}</Select.Option>
1

# 自定义颜色透明度问题

hover:shadow-yellow-gardenia/[.3]

bg-red-500/[0.4]

/* 以下写法貌似只支持内置的色板颜色 */
bg-red-500/40；
border-red-gooseCrown/40；/*也支持了。。。。*/
1
2
3
4
5
6
7

终极解释

theme: {
    extend: {
      screens: {
        dxl: '1536px',
      },
      colors: {
        red: myColors.ChineseColors.red,
        purple: myColors.ChineseColors.purple,
        blue: myColors.ChineseColors.blue,
        yellow: myColors.ChineseColors.yellow,
        gray: myColors.ChineseColors.gray,
        indigo: myColors.ChineseColors.indigo,
        green: myColors.ChineseColors.green,
        custom: {
          back: 'var(--color-bg)',
          cardBg: 'var(--color-card-bg)',
          bd: 'var(--color-border-color)', // '#ec2c64',
          base: 'var(--color-base)',
          txt: {
            base: 'var(--color-text-color)',
            soft: 'var(--color-text-soft)',
          },
          disabled: 'var(--color-disabled)',
        },
      },
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
  • bd: 'var(--color-border-color)'：这种不可以增加自定义的透明度
  • bd: '#ec2c64'：这种可以增加透明度控制

# 长度定义

数字 长度
full 100%
screen 100vm/100vh
0 0
px 1px
0.5 0.125rem
1 0.25rem
1.5 0.375rem
2 0.5rem
2.5 0.625rem
3 0.75rem
3.5 0.875rem
4 1rem
5 1.25rem
6 1.5rem
7 1.75rem
8 2rem
9 2.25rem
10 2.5rem
11 2.75rem
12 3rem
14 3.5rem
16 4rem
20 5rem
24 6rem
28 7rem
32 8rem
36 9rem
40 10rem
44 11rem
48 12rem
52 13rem
56 14rem
60 15rem
64 16rem
72 18rem
80 20rem
96 24rem

也可以自定义全局距离

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        "72": "18rem",
        "84": "21rem",
        "96": "24rem",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# display

class 对应的实际 css
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;
<div class="flex space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>
1
2
3
4
5

# flex

# Flex Direction

控制 Flex 子项的方向的功能类

Class Properties
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;

# Flex Wrap

Utilities for controlling how flex items wrap.

Class Properties
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;

# Flex 项目

用于控制 flex 项目放大和缩小的功能类。

Class Properties
flex-1 flex: 1 1 0%;
flex-auto flex: 1 1 auto;
flex-initial flex: 0 1 auto;
flex-none flex: none;
  • 使用 flex-initial 允许 flex 项目在考虑到其初始尺寸的情况下缩小但不放大
  • 使用 flex-1 允许 flex 项目根据需要放大和缩小，忽略其初始尺寸。
  • 使用 flex-auto 允许一个 flex 项目在考虑到其初始大小的情况下放大和缩小：
  • 使用 flex-none 来阻止一个 flex 项目的放大和缩小：
  • 定制

By default, Tailwind provides four flex utilities. You change, add, or remove these by editing the theme.flex section of your Tailwind config.

// tailwind.config.js
module.exports = {
  theme: {
    flex: {
      "1": "1 1 0%",
      auto: "1 1 auto",
      initial: "0 1 auto",
      inherit: "inherit",
      none: "none",
      "2": "2 2 0%",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13

# Flex Grow

控制 flex 项目放大的功能类

Class Properties
flex-grow-0 flex-grow: 0;
flex-grow flex-grow: 1;
  • 使用 flex-grow 允许一个 flex 项目放大，以填充任何可用空间。
  • 使用 flex-grow-0 阻止一个 flex 项目放大
  • 定制

By default, Tailwind provides two flex-grow utilities. You change, add, or remove these by editing the theme.flexGrow section of your Tailwind config.

// tailwind.config.js
module.exports = {
  theme: {
    flexGrow: {
      "0": 0,
      DEFAULT: 1,
      DEFAULT: 2,
      "1": 1,
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# Flex Shrink

控制 flex 项目缩小的功能类

Class Properties
flex-shrink-0 flex-shrink: 0;
flex-shrink flex-shrink: 1;
  • 使用 flex-shrink 允许一个 flex 项目在必要的时候缩小：
  • 使用 flex-shrink-0 阻止一个 flex 项目缩小:
  • 定制
// tailwind.config.js
module.exports = {
  theme: {
    flexShrink: {
      "0": 0,
      DEFAULT: 1,
      DEFAULT: 2,
      "1": 1,
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# flex&grid order

Utilities for controlling the order of flex and grid items.

Class Properties
order-1 order: 1;
order-2 order: 2;
order-3 order: 3;
order-4 order: 4;
order-5 order: 5;
order-6 order: 6;
order-7 order: 7;
order-8 order: 8;
order-9 order: 9;
order-10 order: 10;
order-11 order: 11;
order-12 order: 12;
order-first order: -9999;
order-last order: 9999;
order-none order: 0;

# 定制 flex&grid order

By default, Tailwind provides utilities for order-first, order-last, order-none, and an order-{number} utility for the numbers 1 through 12. You change, add, or remove these by editing the theme.order section of your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    order: {
      first: "-9999",
      last: "9999",
      //   none: "0",
      normal: "0",
      "1": "1",
      "2": "2",
      "3": "3",
      "4": "4",
      "5": "5",
      "6": "6",
      "7": "7",
      "8": "8",
      "9": "9",
      "10": "10",
      "11": "11",
      "12": "12",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# flex&grid gap

Utilities for controlling gutters between grid and flexbox items.

Class Properties
gap-0 gap: 0px;
gap-x-0 column-gap: 0px;
gap-y-0 row-gap: 0px;
gap-px gap: 1px;
gap-x-px column-gap: 1px;
gap-y-px row-gap: 1px;
gap-0.5 gap: 0.125rem;
gap-x-0.5 column-gap: 0.125rem;
gap-y-0.5 row-gap: 0.125rem;
gap-1 gap: 0.25rem;
gap-x-1 column-gap: 0.25rem;
gap-y-1 row-gap: 0.25rem;

# 定制间隙长度

您可以在您的 tailwind.config.js 文件中的 theme.spacing 或 theme.extend.spacing 部分自定义全局间距比例。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        "72": "18rem",
        "84": "21rem",
        "96": "24rem",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

要单独定制间隙比例，请使用 Tailwind 主题配置的 gap 部分。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gap: {
        "11": "2.75rem",
        "13": "3.25rem",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# Justify Content

用于控制 flex 和 grid 项目如何沿着容器的主轴定位的功能类。

Class Properties
justify-start justify-content: flex-start;
justify-end justify-content: flex-end;
justify-center justify-content: center;
justify-between justify-content: space-between;
justify-around justify-content: space-around;
justify-evenly justify-content: space-evenly;

禁用

如果您不打算在您的项目中使用 justify-content 功能，您可以通过在配置文件的 corePlugins 部分将 justifyContent 属性设置为 false 来完全禁用它们：

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    justifyContent: false,
  },
};
1
2
3
4
5
6
7

# Justify Items

用于控制网格项目如何沿其内联轴对齐的功能类。

Class Properties
justify-items-start justify-items: start;
justify-items-end justify-items: end;
justify-items-center justify-items: center;
justify-items-stretch justify-items: stretch;

禁用

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    justifyItems: false,
  },
};
1
2
3
4
5
6
7

# Justify Self

用于控制单个网格项如何沿其内联轴对齐的功能类。

Class Properties
justify-self-auto justify-self: auto;
justify-self-start justify-self: start;
justify-self-end justify-self: end;
justify-self-center justify-self: center;
justify-self-stretch justify-self: stretch;

# flex:Align Content

用于控制在多行 flex 和网格容器中行的位置的功能类。

Class Properties
content-center align-content: center;
content-start align-content: flex-start;
content-end align-content: flex-end;
content-between align-content: space-between;
content-around align-content: space-around;
content-evenly align-content: space-evenly;

# flex:Align Items

用于控制 Flex 和网格项如何沿着容器的横轴定位的功能类。

Class Properties
items-start align-items: flex-start;
items-end align-items: flex-end;
items-center align-items: center;
items-baseline align-items: baseline;
items-stretch align-items: stretch;

# flex:Align Self

用于控制单个 flex 或网格项如何沿其容器的交叉轴定位的功能类。

Class Properties
self-auto align-self: auto;
self-start align-self: flex-start;
self-end align-self: flex-end;
self-center align-self: center;
self-stretch align-self: stretch;
self-baseline align-self: baseline;

# grid:Place Content

用于同时控制内容如何在水平和垂直方向上对齐的功能类

Class Properties
place-content-center place-content: center;
place-content-start place-content: start;
place-content-end place-content: end;
place-content-between place-content: space-between;
place-content-around place-content: space-around;
place-content-evenly place-content: space-evenly;
place-content-stretch place-content: stretch;

# grid:Place Items

用于同时控制项目如何在水平和垂直方向对齐的功能类。

Class Properties
place-items-start place-items: start;
place-items-end place-items: end;
place-items-center place-items: center;
place-items-stretch place-items: stretch;

# grid:Place Self

用于同时控制单个项目如何在水平和垂直方向上对齐的功能类

Class Properties
place-self-auto place-self: auto;
place-self-start place-self: start;
place-self-end place-self: end;
place-self-center place-self: center;
place-self-stretch place-self: stretch;

# float

Class Properties
float-right float: right;
float-left float: left;
float-none float: none;

# 清楚 float

Class Properties
clear-left clear: left;
clear-right clear: right;
clear-both clear: both;
clear-none clear: none;

# Object Fit

Class Properties
object-contain object-fit: contain;
object-cover object-fit: cover;
object-fill object-fit: fill;
object-none object-fit: none;
object-scale-down object-fit: scale-down;

# Object Position

Class Properties
object-bottom object-position: bottom;
object-center object-position: center;
object-left object-position: left;
object-left-bottom object-position: left bottom;
object-left-top object-position: left top;
object-right object-position: right;
object-right-bottom object-position: right bottom;
object-right-top object-position: right top;
object-top object-position: top;

# object position 定制

By default, Tailwind provides nine object position utilities. You can change, add, or remove these by editing the theme.objectPosition section of your Tailwind config.

  // tailwind.config.js
  module.exports = {
    theme: {
      objectPosition: {
        bottom: 'bottom',
        center: 'center',
        left: 'left',
       'left-bottom': 'left bottom',
       'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
       'center-bottom': 'center bottom'
       'center-top': 'center top',
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 变体 objct position

默认情况下， 针对 object position 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 objectPosition 属性来控制为 object position 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      // ...
      objectPosition: ["hover", "focus"],
    },
  },
};
1
2
3
4
5
6
7
8
9

# 禁用 object position

如果您不打算在您的项目中使用 object position 功能，您可以通过在配置文件的 corePlugins 部分将 objectPosition 属性设置为 false 来完全禁用它们：

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    objectPosition: false,
  },
};
1
2
3
4
5
6
7

# 溢出 overflow

用于控制元素如何处理超出容器的内容的功能类。

Class Properties
overflow-auto overflow: auto;
overflow-hidden overflow: hidden;
overflow-visible overflow: visible;
overflow-scroll overflow: scroll;
overflow-x-auto overflow-x: auto;
overflow-y-auto overflow-y: auto;
overflow-x-hidden overflow-x: hidden;
overflow-y-hidden overflow-y: hidden;
overflow-x-visible overflow-x: visible;
overflow-y-visible overflow-y: visible;
overflow-x-scroll overflow-x: scroll;
overflow-y-scroll overflow-y: scroll;

使用 overflow-auto 在一个元素的内容溢出该元素的边界时为其添加滚动条。不像 .overflow-scroll 总是显示滚动条，这个功能类只在需要滚动时才会显示。

# 禁用 overflow

如果您不打算在您的项目中使用 overflow 功能，您可以通过在配置文件的 corePlugins 部分将 overflow 属性设置为 false 来完全禁用它们：

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    overflow: false,
  },
};
1
2
3
4
5
6
7

# Overscroll Behavior

用于控制浏览器到达滚动区域边界时的行为的功能类。

Class Properties
overscroll-auto overscroll-behavior: auto;
overscroll-contain overscroll-behavior: contain;
overscroll-none overscroll-behavior: none;
overscroll-y-auto overscroll-behavior-y: auto;
overscroll-y-contain overscroll-behavior-y: contain;
overscroll-y-none overscroll-behavior-y: none;
overscroll-x-auto overscroll-behavior-x: auto;
overscroll-x-contain overscroll-behavior-x: contain;
overscroll-x-none overscroll-behavior-x: none;
  • 使用 overscroll-auto 使用户能够在到达基础滚动区域的边界时继续滚动其父滚动区域。
  • 使用 overscroll-contain 来防止目标区域的滚动触发父元素的滚动，但在支持的操作系统中，当滚动到容器的末端时，保留”反弹”效果。
  • 使用 overscroll-none 来防止目标区域的滚动触发父元素的滚动，也防止在滚动过容器的末端时产生”反弹”效果。

# 禁用 Overscroll Behavior

如果您不打算在您的项目中使用 overscroll-behavior 功能，您可以通过在配置文件的 corePlugins 部分将 overscrollBehavior 属性设置为 false 来完全禁用它们：

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    overscrollBehavior: false,
  },
};
1
2
3
4
5
6
7

# 定位 position

用于控制元素在 DOM 中的位置的功能类。

Class Properties
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;
  • 使用 static 根据常规的文档流来定位元素。
    • 任何偏移都将被忽略，而且该元素不会作为绝对定位的子元素的位置参考。
  • Relative:使用 relative 根据常规的文档流来定位元素。
    • 偏移量是相对于元素的正常位置计算的，并且该元素将作为绝对定位的子元素的位置参考。
  • Absolute:使用 absolute 将一个元素定位在文档常规流之外，使相邻元素的行为就像该元素不存在一样。
    • 偏移量是相对于最近的位置不是 static 的父元素计算的，而且该元素将作为其他绝对定位的子元素的位置参考。
  • Fixed:使用 fixed 来定位一个元素相对于浏览器窗视口的位置。
    • 偏移量是相对于视口计算的，且该元素将作为绝对定位的子元素的位置参考。
  • sticky: Use sticky to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.偏移量是相对于元素的正常位置计算的，且该元素将作为其绝对定位的子元素的位置参考。
<div>
  <div class="sticky top-0 ...">Sticky Heading 1</div>
  <p class="py-4">Quisque cursus...</p>
</div>
<div>
  <div class="sticky top-0 ...">Sticky Heading 2</div>
  <p class="py-4">Integer lacinia...</p>
</div>
<div>
  <div class="sticky top-0 ...">Sticky Heading 3</div>
  <p class="py-4">Nullam mauris...</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

# 禁用 position

如果您不打算在您的项目中使用 position 功能，您可以通过在配置文件的 corePlugins 部分将 position 属性设置为 false 来完全禁用它们：

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    position: false,
  },
};
1
2
3
4
5
6
7

# Top / Right / Bottom / Left

Class Properties
inset-0 top: 0px;right: 0px;bottom: 0px;left: 0px;
-inset-0 top: 0px;right: 0px;bottom: 0px;left: 0px;
inset-x-0 left: 0px;right: 0px;
-inset-x-0 left: 0px;right: 0px;
inset-y-0 top: 0px;bottom: 0px;
-inset-y-0 top: 0px;bottom: 0px;
top-0 top: 0px;
-top-0 top: 0px;
right-0 right: 0px;
-right-0 right: 0px;
bottom-0 bottom: 0px;
-bottom-0 bottom: 0px;
left-0 left: 0px;
-left-0 left: 0px;
inset-px top: 1px;right: 1px;bottom: 1px;left: 1px;
-inset-px top: -1px;right: -1px;bottom: -1px;left: -1px;
inset-x-px left: 1px;right: 1px;
-inset-x-px left: -1px;right: -1px;
inset-y-px top: 1px;bottom: 1px;
-inset-y-px top: -1px;bottom: -1px;
top-px top: 1px;
-top-px top: -1px;
right-px right: 1px;
-right-px right: -1px;
inset-0.5 top: 0.125rem;right: 0.125rem;bottom: 0.125rem;left: 0.125rem;
-inset-0.5 top: -0.125rem;right: -0.125rem;bottom: -0.125rem;left: -0.125rem;
inset-x-0.5 left: 0.125rem;right: 0.125rem;
-inset-x-0.5 left: -0.125rem;right: -0.125rem;
inset-y-0.5 top: 0.125rem;bottom: 0.125rem;
-inset-y-0.5 top: -0.125rem;bottom: -0.125rem;
inset-1/2 top: 50%;right: 50%;bottom: 50%;left: 50%;
inset-1/3 top: 33.333333%;right: 33.333333%;bottom: 33.333333%;left: 33.333333%;
inset-2/3 top: 66.666667%;right: 66.666667%;bottom: 66.666667%;left: 66.666667%;
inset-1/4 top: 25%;right: 25%;bottom: 25%;left: 25%;
inset-2/4 top: 50%;right: 50%;bottom: 50%;left: 50%;
inset-full top: 100%;right: 100%;bottom: 100%;left: 100%;

# 禁用 Top / Right / Bottom / Left

如果您不打算在您的项目中使用 top, right, bottom, left, and inset 功能，您可以通过在配置文件的 corePlugins 部分将 inset 属性设置为 false 来完全禁用它们：

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    inset: false,
  },
};
1
2
3
4
5
6
7

# Z-Index

用于控制元素的堆栈顺序的功能类。

Class Properties
z-0 z-index: 0;
z-10 z-index: 10;
z-20 z-index: 20;
z-30 z-index: 30;
z-40 z-index: 40;
z-50 z-index: 50;
z-auto z-index: auto;

# 定制 Z-Index

By default, Tailwind provides six numeric z-index utilities and an auto utility. You change, add, or remove these by editing the theme.zIndex section of your Tailwind config.

// tailwind.config.js
module.exports = {
  theme: {
    zIndex: {
      "0": 0,
      "10": 10,
      "20": 20,
      "30": 30,
      "40": 40,
      "50": 50,
      "25": 25,
      "50": 50,
      "75": 75,
      "100": 100,
      auto: "auto",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 间距

# 内边距

控制元素内边距的功能类

  • 使用 p{t|r|b|l}-{size} 功能类控制元素一侧的内边距。
  • 使用 px-{size} 控制元素水平方向的内边距。
  • 使用 py-{size} 控制元素垂直方向的内边距。
  • 使用 p-{size} 功能类控制元素四个边的内边距。
Class Properties
p-0 padding: 0px;
p-px padding: 1px;
p-0.5 padding: 0.125rem;
p-1 padding: 0.25rem;
p-1.5 padding: 0.375rem;
p-2 padding: 0.5rem;
p-2.5 padding: 0.625rem;
p-3 padding: 0.75rem;
p-3.5 padding: 0.875rem;
p-4 padding: 1rem;
px-0 padding-left: 0px;padding-right: 0px;
px-px padding-left: 1px;padding-right: 1px;
px-0.5 padding-left: 0.125rem;padding-right: 0.125rem;
px-1 padding-left: 0.25rem;padding-right: 0.25rem;
py-0 padding-top: 0px;padding-bottom: 0px;
py-px padding-top: 1px;padding-bottom: 1px;
py-0.5 padding-top: 0.125rem;padding-bottom: 0.125rem;
py-1 padding-top: 0.25rem;padding-bottom: 0.25rem;
py-1.5 padding-top: 0.375rem;padding-bottom: 0.375rem;
py-2 padding-top: 0.5rem;padding-bottom: 0.5rem;
pt-0 padding-top: 0px;
pt-px padding-top: 1px;
pt-0.5 padding-top: 0.125rem;
pt-1 padding-top: 0.25rem;
pt-1.5 padding-top: 0.375rem;
pt-2 padding-top: 0.5rem;
pr-0 padding-right: 0px;
pr-px padding-right: 1px;
pr-0.5 padding-right: 0.125rem;
pr-1 padding-right: 0.25rem;
pr-1.5 padding-right: 0.375rem;
pr-2 padding-right: 0.5rem;
pb-0 padding-bottom: 0px;
pb-px padding-bottom: 1px;
pb-0.5 padding-bottom: 0.125rem;
pb-1 padding-bottom: 0.25rem;
pb-1.5 padding-bottom: 0.375rem;
pb-2 padding-bottom: 0.5rem;
pl-0 padding-left: 0px;
pl-px padding-left: 1px;
pl-0.5 padding-left: 0.125rem;
pl-1 padding-left: 0.25rem;
pl-1.5 padding-left: 0.375rem;
pl-2 padding-left: 0.5rem;

# 外边距

控制元素外边距的功能类

  • 使用 m{t|r|b|l}-{size} 功能类控制元素一侧的外边距。
  • 使用 mx-{size} 功能类控制元素水平方向的外边距。
  • 使用 my-{size} 功能类控制元素垂直方向的外边距。
  • 使用 m-{size} 功能类控制元素四个边的外边距。

# Space Between

用于控制子元素之间的间隔的功能类。

Class Properties
space-x-0 > * + * --tw-space-x-reverse: 0;margin-right: calc(0px * var(--tw-space-x-reverse));margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
space-x-0.5 > * + * --tw-space-x-reverse: 0;margin-right: calc(0.125rem * var(--tw-space-x-reverse));margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1 > * + * --tw-space-x-reverse: 0;margin-right: calc(0.25rem * var(--tw-space-x-reverse));margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1.5 > * + * --tw-space-x-reverse: 0;margin-right: calc(0.375rem * var(--tw-space-x-reverse));margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
space-x-2 > * + * --tw-space-x-reverse: 0;margin-right: calc(0.5rem * var(--tw-space-x-reverse));margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  • 使用 space-x-{amount} 功能类控制元素之间的水平空间。
<div class="flex space-x-4 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
4
5
  • 使用 space-y-{amount} 功能类控制元素之间的垂直空间。
  • 反转子元素顺序:如果您的元素是按相反的顺序排列的(例如使用 flex-row-reverse 或 flex-col-reverse)，使用 space-x-reverse 或 space-y-reverse 实用程序来确保空间被添加到每个元素的正确一侧。

# 字体

# 字体序列

控制元素字体序列的功能类。

Class Properties
font-sans font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-serif font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-mono font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  • 使用 font-sans 应用一个网络安全的无衬线字体系列
  • 使用 font-serif 来应用网络安全的衬线字体系列
  • 使用 font-mono 来应用一个网络安全的等宽字体系列：

# 字体大小

用来控制元素字体大小的功能类

Class Properties
text-xs font-size: 0.75rem;line-height: 1rem;
text-sm font-size: 0.875rem;line-height: 1.25rem;
text-base font-size: 1rem;line-height: 1.5rem;
text-lg font-size: 1.125rem;line-height: 1.75rem;
text-xl font-size: 1.25rem;line-height: 1.75rem;
text-2xl font-size: 1.5rem;line-height: 2rem;
text-3xl font-size: 1.875rem;line-height: 2.25rem;
text-4xl font-size: 2.25rem;line-height: 2.5rem;
text-5xl font-size: 3rem;line-height: 1;
text-6xl font-size: 3.75rem;line-height: 1;
text-7xl font-size: 4.5rem;line-height: 1;
text-8xl font-size: 6rem;line-height: 1;
text-9xl font-size: 8rem;line-height: 1;

定制

By default, Tailwind provides 10 font-size utilities. You change, add, or remove these by editing the theme.fontSize section of your Tailwind config.

字体大小

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      xs: ".75rem",
      sm: ".875rem",
      tiny: ".875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "4rem",
      "7xl": "5rem",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

默认行高

您可以在您的 tailwind.config.js 文件中使用 [fontSize, lineHeight] 形式的元组为您的每个字体大小提供一个默认的行高。

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ["14px", "20px"],
      base: ["16px", "24px"],
      lg: ["20px", "28px"],
      xl: ["24px", "32px"],
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

You can also specify a default line-height using object syntax:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: [
        "14px",
        {
          lineHeight: "20px",
        },
      ],
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13

默认字母间距

如果您还想为字体大小提供一个默认的字母间距值，您可以在您的 tailwind.config.js 文件中使用 [fontSize, { letterSpacing, lineHeight }] 这样的元组来实现。

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      "2xl": [
        "24px",
        {
          letterSpacing: "-0.01em",
        },
      ],
      // Or with a default line-height as well
      "3xl": [
        "32px",
        {
          letterSpacing: "-0.02em",
          lineHeight: "40px",
        },
      ],
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 字体样式

用来控制字体样式的功能类。

Class Properties
italic font-style: italic;
not-italic font-style: normal;

# 字体粗细

用来控制字体粗细的功能类

Class Properties
font-thin font-weight: 100;
font-extralight font-weight: 200;
font-light font-weight: 300;
font-normal font-weight: 400;
font-medium font-weight: 500;
font-semibold font-weight: 600;
font-bold font-weight: 700;
font-extrabold font-weight: 800;
font-black font-weight: 900;

定制

// tailwind.config.js
module.exports = {
  theme: {
    fontWeight: {
      hairline: 100,
      "extra-light": 100,
      thin: 200,
      light: 300,
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
      extrabold: 800,
      "extra-bold": 800,
      black: 900,
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 字母间距

用于控制元素的字距（字母间距）的功能类。

Class Properties
tracking-tighter letter-spacing: -0.05em;
tracking-tight letter-spacing: -0.025em;
tracking-normal letter-spacing: 0em;
tracking-wide letter-spacing: 0.025em;
tracking-wider letter-spacing: 0.05em;
tracking-widest letter-spacing: 0.1em;

# 行高

用于控制元素的前行距（行高）的功能类。

Class Properties
leading-3 line-height: .75rem;
leading-4 line-height: 1rem;
leading-5 line-height: 1.25rem;
leading-6 line-height: 1.5rem;
leading-7 line-height: 1.75rem;
leading-8 line-height: 2rem;
leading-9 line-height: 2.25rem;
leading-10 line-height: 2.5rem;
leading-none line-height: 1;
leading-tight line-height: 1.25;
leading-snug line-height: 1.375;
leading-normal line-height: 1.5;
leading-relaxed line-height: 1.625;
leading-loose line-height: 2;
  • 使用 leading-none、 leading-tight、 leading-snug、 leading-normal、 leading-relaxed 和 leading-loose 等功能类，根据元素当前的字体大小，给它一个相对的行高。

定制

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      lineHeight: {
        "extra-loose": "2.5",
        "12": "3rem",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 文本溢出

用于控制元素中文本溢出的功能类。

Class Properties
truncate overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
overflow-ellipsis text-overflow: ellipsis;
overflow-clip text-overflow: clip;

# 垂直对齐

用于控制内联或表格单元格的垂直对齐的功能类。

Class Properties
align-baseline vertical-align: baseline;
align-top vertical-align: top;
align-middle vertical-align: middle;
align-bottom vertical-align: bottom;
align-text-top vertical-align: text-top;
align-text-bottom vertical-align: text-bottom;

# 空格

用于控制元素的空格属性的功能类。

Class Properties
whitespace-normal white-space: normal;
whitespace-nowrap white-space: nowrap;
whitespace-pre white-space: pre;
whitespace-pre-line white-space: pre-line;
whitespace-pre-wrap white-space: pre-wrap;
  • 使用 whitespace-normal 使文本在元素中正常包裹。换行和空格将被折叠。
  • 使用 whitespace-nowrap 来防止文本在元素中被包裹。换行和空格将被折叠。
  • 使用 whitespace-pre 来保留元素中的换行和空格。文本不会被包装。
  • 使用 whitespace-pre-line 保留换行，但不保留元素中的空格。文本将被正常包装。
  • 使用 whitespace-pre-wrap 来保留元素中的换行和空格。文本将被正常包装。

# 文本换行

用于控制元素中的换行符的功能类。

Class Properties
break-normal overflow-wrap: normal;word-break: normal;
break-words overflow-wrap: break-word;
break-all word-break: break-all;

# 背景

# 背景图像固定

用于控制背景图片在滚动时的表现的功能类。

Class Properties
bg-fixed background-attachment: fixed;
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;
  • 使用 bg-fixed 来固定相对于视口的背景图片
  • 使用 bg-local 来滚动容器和视口的背景图片。
  • 使用 bg-scroll 来滚动背景图片与视口，而不是容器

# 背景图像裁剪

用于控制元素背景的边界框的实用功能类。

Class Properties
bg-clip-border background-clip: border-box;
bg-clip-padding background-clip: padding-box;
bg-clip-content background-clip: content-box;
bg-clip-text background-clip: text;

# 背景颜色

用于控制元素背景色的功能类。

Class Properties
bg-transparent background-color: transparent;
bg-current background-color: currentColor;
bg-black --tw-bg-opacity: 1;background-color: rgba(0, 0, 0, var(--tw-bg-opacity));

# 悬停

要控制元素在悬停时的背景色，请在任何现有的背景色功能类中添加 hover: 前缀。例如，使用 hover:bg-red-700 在悬停时应用 bg-red-700 功能类。

# 定制颜色

您可以通过编辑 tailwind.config.js 文件中的 theme.colors 变量来自定义您的调色板，或者使用 Tailwind 配置中的 theme.backgroundColor 部分来自定义背景色。

// tailwind.config.js
module.exports = {
  theme: {
    backgroundColor: (theme) => ({
      ...theme("colors"),
      primary: "#3490dc",
      secondary: "#ffed4a",
      danger: "#e3342f",
    }),
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 背景颜色不透明度

用于控制元素背景色不透明度的功能类。

Class Properties
bg-opacity-0 --tw-bg-opacity: 0;
bg-opacity-5 --tw-bg-opacity: 0.05;
bg-opacity-10 --tw-bg-opacity: 0.1;
bg-opacity-20 --tw-bg-opacity: 0.2;
bg-opacity-25 --tw-bg-opacity: 0.25;
bg-opacity-30 --tw-bg-opacity: 0.3;
bg-opacity-40 --tw-bg-opacity: 0.4;
bg-opacity-50 --tw-bg-opacity: 0.5;
bg-opacity-60 --tw-bg-opacity: 0.6;
bg-opacity-70 --tw-bg-opacity: 0.7;
bg-opacity-75 --tw-bg-opacity: 0.75;
bg-opacity-80 --tw-bg-opacity: 0.8;
bg-opacity-90 --tw-bg-opacity: 0.9;
bg-opacity-95 --tw-bg-opacity: 0.95;
bg-opacity-100 --tw-bg-opacity: 1;

# 定制不透明度

要一次性自定义所有与不透明度相关的功能类的不透明度值，请使用您的 tailwind.config.js 主题配置中的 opacity 部分。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      opacity: {
        "15": "0.15",
        "35": "0.35",
        "65": "0.65",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

如果您只想自定义背景不透明度功能类，请使用 backgroundOpacity 部分。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundOpacity: {
        "10": "0.1",
        "20": "0.2",
        "95": "0.95",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# Background OriginTailwind CSS version v2.2+

Utilities for controlling how an element's background is positioned relative to borders, padding, and content.

Class Properties
bg-origin-border background-origin: border-box;
bg-origin-padding background-origin: padding-box;
bg-origin-content background-origin: content-box;

# 背景图像位置

用于控制元素背景图片位置的功能类

Class Properties
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-top background-position: top;

# 定制图像位置

By default, Tailwind provides nine background-position utilities. You change, add, or remove these by editing the theme.backgroundPosition section of your Tailwind config.

// tailwind.config.js
module.exports = {
  theme: {
    backgroundPosition: {
      bottom: "bottom",
      "bottom-4": "center bottom 1rem",
      center: "center",
      left: "left",
      //   "left-bottom": "left bottom",
      //   "left-top": "left top",
      right: "right",
      "right-bottom": "right bottom",
      "right-top": "right top",
      top: "top",
      "top-4": "center top 1rem",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 背景图像重复

用于控制元素背景图像重复的功能类。

Class Properties
bg-repeat background-repeat: repeat;
bg-no-repeat background-repeat: no-repeat;
bg-repeat-x background-repeat: repeat-x;
bg-repeat-y background-repeat: repeat-y;
bg-repeat-round background-repeat: round;
bg-repeat-space background-repeat: space;

# 背景图像大小

用于控制元素背景图背景大小的功能类。

Class Properties
bg-auto background-size: auto;
bg-cover background-size: cover;
bg-contain background-size: contain;

# 背景图像

用于控制元素背景图片的功能类。

Class Properties
bg-none background-image: none;
bg-gradient-to-t background-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-tr background-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-r background-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-br background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-b background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-bl background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-l background-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tl background-image: linear-gradient(to top left, var(--tw-gradient-stops));

线性渐变

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 ..."></div>
1

定制

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        "hero-pattern": "url('/img/hero-pattern.svg')",
        "footer-texture": "url('/img/footer-texture.png')",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 渐变色停止

  • 使用 from-{color} 功能类设置渐变的起始颜色。
  • 使用 via-{color} 功能类为渐变添加中间色。
  • 使用 to-{color} 功能类设置渐变的结束颜色。
  • 如果没有出现 to-{color}，带有 from-{color} 和 via-{color} 的梯度将默认为淡出为透明。
  • Only specify a from color and fade to transparent automatically

# 定制渐变色停止

默认情况下， Tailwind 将整个默认调色板作为渐变色停止。

By default, Tailwind makes the entire default color palette available as gradient color stops.

// tailwind.config.js
module.exports = {
  theme: {
    gradientColorStops: (theme) => ({
      ...theme("colors"),
      primary: "#3490dc",
      secondary: "#ffed4a",
      danger: "#e3342f",
    }),
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 边框

# 边框圆角

Class Properties
rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem;
rounded border-radius: 0.25rem;
rounded-md border-radius: 0.375rem;
rounded-lg border-radius: 0.5rem;
rounded-xl border-radius: 0.75rem;
rounded-2xl border-radius: 1rem;
rounded-3xl border-radius: 1.5rem;
rounded-full border-radius: 9999px;
rounded-t-none border-top-left-radius: 0px;border-top-right-radius: 0px;
rounded-t-sm border-top-left-radius: 0.125rem;border-top-right-radius: 0.125rem;
rounded-t border-top-left-radius: 0.25rem;border-top-right-radius: 0.25rem;
rounded-t-md border-top-left-radius: 0.375rem;border-top-right-radius: 0.375rem;
rounded-t-lg border-top-left-radius: 0.5rem;border-top-right-radius: 0.5rem;
rounded-t-xl border-top-left-radius: 0.75rem;border-top-right-radius: 0.75rem;
rounded-r-none border-top-right-radius: 0px;border-bottom-right-radius: 0px;
rounded-r-sm border-top-right-radius: 0.125rem;border-bottom-right-radius: 0.125rem;
rounded-r border-top-right-radius: 0.25rem;border-bottom-right-radius: 0.25rem;
rounded-r-md border-top-right-radius: 0.375rem;border-bottom-right-radius: 0.375rem;
rounded-r-lg border-top-right-radius: 0.5rem;border-bottom-right-radius: 0.5rem;
rounded-r-xl border-top-right-radius: 0.75rem;border-bottom-right-radius: 0.75rem;
rounded-b-none border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;
rounded-b-sm border-bottom-right-radius: 0.125rem;border-bottom-left-radius: 0.125rem;
rounded-b border-bottom-right-radius: 0.25rem;border-bottom-left-radius: 0.25rem;
rounded-b-md border-bottom-right-radius: 0.375rem;border-bottom-left-radius: 0.375rem;
rounded-b-lg border-bottom-right-radius: 0.5rem;border-bottom-left-radius: 0.5rem;
rounded-b-xl border-bottom-right-radius: 0.75rem;border-bottom-left-radius: 0.75rem;
rounded-b-2xl border-bottom-right-radius: 1rem;border-bottom-left-radius: 1rem;
rounded-l-none border-top-left-radius: 0px;border-bottom-left-radius: 0px;
rounded-l-sm border-top-left-radius: 0.125rem;border-bottom-left-radius: 0.125rem;
rounded-l border-top-left-radius: 0.25rem;border-bottom-left-radius: 0.25rem;
rounded-l-md border-top-left-radius: 0.375rem;border-bottom-left-radius: 0.375rem;
rounded-l-lg border-top-left-radius: 0.5rem;border-bottom-left-radius: 0.5rem;
rounded-l-xl border-top-left-radius: 0.75rem;border-bottom-left-radius: 0.75rem;
rounded-tl-none border-top-left-radius: 0px;
rounded-tl-sm border-top-left-radius: 0.125rem;
rounded-tl border-top-left-radius: 0.25rem;
rounded-tl-md border-top-left-radius: 0.375rem;
rounded-tl-lg border-top-left-radius: 0.5rem;
rounded-tl-xl border-top-left-radius: 0.75rem;
  • 使用 .rounded-sm, .rounded, 或 .rounded-lg 等实用功能类来应用不同的边框半径大小到一个元素上。
  • 使用 rounded-full 功能类来创建药丸形 💊 和圆圈
  • 独立设置每条边框的圆角效果 Use rounded-{t|r|b|l}{-size?} to only round one side of an element.
  • 独立设置每个边角的圆角效果，使用 rounded-{tl|tr|br|bl}{-size?} 只将圆角应用到元素的一个边角上。

定制边框半径

// tailwind.config.js
module.exports = {
  theme: {
    borderRadius: {
      none: "0",
      sm: "0.125rem",
      //   DEFAULT: "0.25rem",
      DEFAULT: "4px",
      //   md: "0.375rem",
      //   lg: "0.5rem",
      //   full: "9999px",
      large: "12px",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 边框厚度

用于控制元素边框宽度的功能类。

Class Properties
border-0 border-width: 0px;
border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;
border border-width: 1px;
border-t-0 border-top-width: 0px;
border-t-2 border-top-width: 2px;
border-t-4 border-top-width: 4px;
border-t-8 border-top-width: 8px;
border-t border-top-width: 1px;

# 边框样式

用于控制元素边框样式的功能类。

Class Properties
border-solid border-style: solid;
border-dashed border-style: dashed;
border-dotted border-style: dotted;
border-double border-style: double;
border-none border-style: none;

# 分割线厚度

用于控制元素之间边框宽度的功能类。

Class Properties
divide-x-0 > * + * --tw-divide-x-reverse: 0;border-right-width: calc(0px * var(--tw-divide-x-reverse));border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
divide-x-2 > * + * --tw-divide-x-reverse: 0;border-right-width: calc(2px * var(--tw-divide-x-reverse));border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
divide-x-4 > * + * --tw-divide-x-reverse: 0;border-right-width: calc(4px * var(--tw-divide-x-reverse));border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
divide-x-8 > * + * --tw-divide-x-reverse: 0;border-right-width: calc(8px * var(--tw-divide-x-reverse));border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse)));
  • 使用 divid-x-{amount} 功能在水平元素之间添加边框。
<div class="grid grid-cols-3 divide-x divide-green-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
4
5
  • 反转子类元素的顺序,如果您的元素的顺序是相反的(例如使用 flex-row-reverse 或 flex-col-reverse)，使用 divide-x-reverse 或 divide-y-reverse 功能类来确保边界被添加到每个元素的正确一侧。

# 分割线颜色

用于控制元素之间边框颜色的功能类。

Class Properties
divide-transparent > * + * border-color: transparent;
divide-current > * + * border-color: currentColor;
divide-black > * + * --tw-divide-opacity: 1;border-color: rgba(0, 0, 0, var(--tw-divide-opacity));
divide-white> * + * --tw-divide-opacity: 1;border-color: rgba(255, 255, 255, var(--tw-divide-opacity));
  • 使用 divide-{color} 功能控制元素之间的边框颜色。

定制颜色

By default, Tailwind makes the entire default color palette available as divide colors.

// tailwind.config.js
module.exports = {
  theme: {
    divideColor: (theme) => ({
      ...theme("borderColors"),
      primary: "#3490dc",
      secondary: "#ffed4a",
      danger: "#e3342f",
    }),
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 分割线样式

用于控制元素之间的边框样式的功能类。

Class Properties
divide-solid > * + * border-style: solid;
divide-dashed > * + * border-style: dashed;
divide-dotted > * + * border-style: dotted;
divide-double > * + * border-style: double;
divide-none > * + * border-style: none;

# 轮廓环厚度

用于创建带盒状阴影的轮廓环的功能类。

Class Properties
ring-0 box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-1 box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-2 box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-4 box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-8 box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-inset --tw-ring-inset: inset;

# 轮廓环颜色

用于设置轮廓环颜色的功能类。

Class Properties
ring-transparent --tw-ring-color: transparent;
ring-current --tw-ring-color: currentColor;
ring-black --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
ring-white --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));

# 轮廓环偏移厚度

当添加轮廓环时，用于模拟偏移的功能类。

Class Properties
ring-offset-0 --tw-ring-offset-width: 0px;box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-1 --tw-ring-offset-width: 1px;box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-2 --tw-ring-offset-width: 2px;box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-4 --tw-ring-offset-width: 4px;box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-8 --tw-ring-offset-width: 8px;box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

# 盒阴影

# Outer shadow（外阴影）

Use the shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, or shadow-2xl utilities to apply different sized outer box shadows to an element.

# Inner shadow （内阴影）

使用 shadow-inner 功能类为元素应用一个微妙的插入框阴影。这对表单控件或井等元素很有用

# No shadow（无阴影）

使用 shadow-none 从元素中移除现有的盒状阴影。这最常见的是用来移除应用在较小断点上的阴影。

# 阴影颜色

shadow-yellow-800
1

# 自定义阴影

// tailwind.config.js
module.exports = {
  theme: {
    boxShadow: {
      sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
      DEFAULT:
        "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
      md:
        "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
      lg:
        "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
      xl:
        "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
      "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
      "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
      inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
      none: "none",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Mix Blend ModeTailwind CSS versionv2.1+

Utilities for controlling how an element should blend with the background.

Class Properties
mix-blend-normal mix-blend-mode: normal;
mix-blend-multiply mix-blend-mode: multiply;
mix-blend-screen mix-blend-mode: screen;
mix-blend-overlay mix-blend-mode: overlay;
mix-blend-darken mix-blend-mode: darken;
mix-blend-lighten mix-blend-mode: lighten;
mix-blend-color-dodge mix-blend-mode: color-dodge;
mix-blend-color-burn mix-blend-mode: color-burn;
mix-blend-hard-light mix-blend-mode: hard-light;
mix-blend-soft-light mix-blend-mode: soft-light;
mix-blend-difference mix-blend-mode: difference;
mix-blend-exclusion mix-blend-mode: exclusion;
mix-blend-hue mix-blend-mode: hue;
mix-blend-saturation mix-blend-mode: saturation;
mix-blend-color mix-blend-mode: color;
mix-blend-luminosity mix-blend-mode: luminosity;

# Background Blend ModeTailwind CSS versionv2.1+

Utilities for controlling how an element's background image should blend with its background color.

Class Properties
bg-blend-normal background-blend-mode: normal;
bg-blend-multiply background-blend-mode: multiply;
bg-blend-screen background-blend-mode: screen;
bg-blend-overlay background-blend-mode: overlay;
bg-blend-darken background-blend-mode: darken;
bg-blend-lighten background-blend-mode: lighten;
bg-blend-color-dodge background-blend-mode: color-dodge;
bg-blend-color-burn background-blend-mode: color-burn;
bg-blend-hard-light background-blend-mode: hard-light;
bg-blend-soft-light background-blend-mode: soft-light;
bg-blend-difference background-blend-mode: difference;
bg-blend-exclusion background-blend-mode: exclusion;
bg-blend-hue background-blend-mode: hue;
bg-blend-saturation background-blend-mode: saturation;
bg-blend-color background-blend-mode: color;
bg-blend-luminosity background-blend-mode: luminosity;

# Filter Tailwind CSS versionv2.1+

Utilities for enabling and disabling filters on an element.

Class Properties
filter filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter-none filter: none;

Use the filter utility to enable filters (in combination with other filter utilities like blur or grayscale), and the filter-none utility to remove filters.

<div class="filter grayscale blur-md contrast-200 ...">
  <!-- ... -->
</div>
1
2
3

# Blur Tailwind CSS version

v2.1+ Utilities for applying blur filters to an element.

Class Properties
blur-none --tw-blur: blur(0);
blur-sm --tw-blur: blur(4px);
blur --tw-blur: blur(8px);
blur-md --tw-blur: blur(12px);
blur-lg --tw-blur: blur(16px);
blur-xl --tw-blur: blur(24px);
blur-2xl --tw-blur: blur(40px);
blur-3xl --tw-blur: blur(64px);

Use the blur-{amount?} utilities alongside the filter utility to blur an element.

# 自定义

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      blur: {
        xs: "2px",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# BrightnessTailwind CSS version v2.1+

Utilities for applying brightness filters to an element.

Class Properties
brightness-0 --tw-brightness: brightness(0);
brightness-50 --tw-brightness: brightness(.5);
brightness-75 --tw-brightness: brightness(.75);
brightness-90 --tw-brightness: brightness(.9);
brightness-95 --tw-brightness: brightness(.95);
brightness-100 --tw-brightness: brightness(1);
brightness-105 --tw-brightness: brightness(1.05);
brightness-110 --tw-brightness: brightness(1.1);
brightness-125 --tw-brightness: brightness(1.25);
brightness-150 --tw-brightness: brightness(1.5);
brightness-200 --tw-brightness: brightness(2);

Use the brightness-{amount?} utilities alongside the filter utility to control an element’s brightness.

# ContrastTailwind CSS version v2.1+

Utilities for applying contrast filters to an element.

Class Properties
contrast-0 --tw-contrast: contrast(0);
contrast-50 --tw-contrast: contrast(.5);
contrast-75 --tw-contrast: contrast(.75);
contrast-100 --tw-contrast: contrast(1);
contrast-125 --tw-contrast: contrast(1.25);
contrast-150 --tw-contrast: contrast(1.5);
contrast-200 --tw-contrast: contrast(2);

Use the contrast-{amount?} utilities alongside the filter utility to control an element’s contrast.

# Drop Shadow

Utilities for applying drop-shadow filters to an element.

Class Properties
drop-shadow-sm --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
drop-shadow --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
drop-shadow-md --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
drop-shadow-lg --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
drop-shadow-xl --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
drop-shadow-2xl --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
drop-shadow-none --tw-drop-shadow: drop-shadow(0 0 #0000);

Use the drop-shadow-{amount} utilities alongside the filter utility to add a drop shadow to an element.

# Grayscale Tailwind CSS version v2.1+

Utilities for applying grayscale filters to an element.

Class Properties
grayscale-0 --tw-grayscale: grayscale(0);
grayscale --tw-grayscale: grayscale(1);

自定义

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      grayscale: {
        50: "50%",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# Hue RotateTailwind CSS version v2.1+

Utilities for applying hue-rotate filters to an element.

Class Properties
-hue-rotate-180 --tw-hue-rotate: hue-rotate(-180deg);
-hue-rotate-90 --tw-hue-rotate: hue-rotate(-90deg);
-hue-rotate-60 --tw-hue-rotate: hue-rotate(-60deg);
-hue-rotate-30 --tw-hue-rotate: hue-rotate(-30deg);
-hue-rotate-15 --tw-hue-rotate: hue-rotate(-15deg);
hue-rotate-0 --tw-hue-rotate: hue-rotate(0deg);
hue-rotate-15 --tw-hue-rotate: hue-rotate(15deg);
hue-rotate-30 --tw-hue-rotate: hue-rotate(30deg);
hue-rotate-60 --tw-hue-rotate: hue-rotate(60deg);
hue-rotate-90 --tw-hue-rotate: hue-rotate(90deg);
hue-rotate-180 --tw-hue-rotate: hue-rotate(180deg);

Use the hue-rotate-{amount} utilities alongside the filter utility to rotate the hue of an element.

自定义

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      hueRotate: {
        "-270": "-270deg",
        270: "270deg",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 表格边框

用于控制表格边框是否应该折叠或分开的功能类。

Class Properties
border-collapse border-collapse: collapse;
border-separate border-collapse: separate;

# 表格布局

用于控制表格布局算法的功能类。

Class Properties
table-auto table-layout: auto;
table-fixed table-layout: fixed;

# 动画

# 过度属性

Class Properties
transition-none transition-property: none;
transition-all transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;
transition transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;
transition-colors transition-property: background-color, border-color, color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;
transition-opacity transition-property: opacity;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-shadow
transition-transform transition-property: transform;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

自定义

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionProperty: {
         'height': 'height',
         'spacing': 'margin, padding',
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11

# 过渡持续时间

用于控制过渡持续时间的功能类。

Class Properties
duration-75 transition-duration: 75ms;
duration-100 transition-duration: 100ms;
duration-150 transition-duration: 150ms;
duration-200 transition-duration: 200ms;

自定义

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      transitionDuration: {
        "0": "0ms",
        "2000": "2000ms",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 过渡计时函数

用于控制 CSS 过渡缓和的功能类。

Class Properties
ease-linear transition-timing-function: linear;
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

自定义

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        "in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
        "out-expo": "cubic-bezier(0.19, 1, 0.22, 1)",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 过渡延迟

用于控制 CSS 过渡延迟的功能类。

Class Properties
delay-75 transition-delay: 75ms;
delay-100 transition-delay: 100ms;
delay-150 transition-delay: 150ms;
delay-200 transition-delay: 200ms;

# 动画 animate

使元素产生动画的 CSS 动画功能类。

animate-none————animation: none; animate-spin————animation: spin 1s linear infinite;

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
1
2
3
4
5
6
7
8

animate-ping————animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
1
2
3
4
5
6
7

animate-pulse————animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
1
2
3
4
5
6
7
8
9

animate-bounce————animation: bounce 1s infinite;

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
1
2
3
4
5
6
7
8
9
10
11

# 自定义动画

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        "spin-slow": "spin 3s linear infinite",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10

要添加新的动画 @keyframes，使用主题配置中的 keyframes 部分。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-3deg)" },
          "50%": { transform: "rotate(3deg)" },
        },
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13

然后您可以在您的主题配置的 animation 部分引用这些 keyframes 的名字。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: "wiggle 1s ease-in-out infinite",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# 变换

用于控制变换行为的功能类。

Class Properties
transform --tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-gpu --tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-none transform: none;
<img class="transform rotate-45 ..." />
<img class="transform skew-y-12 ..." />
<img class="transform scale-50 ..." />
<img class="transform translate-x-4 translate-y-4 ..." />
1
2
3
4

硬件加速 很多变换可以在 GPU 上执行，而不是在 CPU 上执行。这样可以获得更好的性能。您可以使用 transform-gpu 功能来启用 GPU 加速。

<div class="transform-gpu scale-150 ..."></div>
1

# 变换原点

用于指定元素变换源点的功能类。

Class Properties
origin-center transform-origin: center;
origin-top transform-origin: top;
origin-top-right transform-origin: top right;
origin-right transform-origin: right;
origin-bottom-right transform-origin: bottom right;
origin-bottom transform-origin: bottom;
origin-bottom-left transform-origin: bottom left;
origin-left transform-origin: left;
origin-top-left transform-origin: top left;

# 缩放

用于缩放元素的功能类。

Class Properties
scale-0 --tw-scale-x: 0;--tw-scale-y: 0;
scale-50 --tw-scale-x: .5;--tw-scale-y: .5;
scale-75 --tw-scale-x: .75;--tw-scale-y: .75;
scale-90 --tw-scale-x: .9;--tw-scale-y: .9;
scale-95 --tw-scale-x: .95;--tw-scale-y: .95;
scale-x-0 --tw-scale-x: 0;
scale-x-50 --tw-scale-x: .5;
scale-x-75 --tw-scale-x: .75;
scale-x-90 --tw-scale-x: .9;
scale-x-95 --tw-scale-x: .95;

自定义

// tailwind.config.js
module.exports = {
  theme: {
    scale: {
      "0": "0",
      "25": ".25",
      "50": ".5",
      "75": ".75",
      "90": ".9",
      "95": ".95",
      "100": "1",
      "105": "1.05",
      "110": "1.1",
      "125": "1.25",
      "150": "1.5",
      "200": "2",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 旋转

用于旋转元素的功能类。

Class Properties
rotate-0 --tw-rotate: 0deg;
rotate-1 --tw-rotate: 1deg;
rotate-2 --tw-rotate: 2deg;
rotate-3 --tw-rotate: 3deg;
rotate-6 --tw-rotate: 6deg;
rotate-12 --tw-rotate: 12deg;
rotate-45 --tw-rotate: 45deg;
rotate-90 --tw-rotate: 90deg;
rotate-180 --tw-rotate: 180deg;
-rotate-180 --tw-rotate: -180deg;

自定义

// tailwind.config.js
module.exports = {
  theme: {
    rotate: {
      "-180": "-180deg",
      "-90": "-90deg",
      "-45": "-45deg",
      "0": "0",
      "45": "45deg",
      "90": "90deg",
      "135": "135deg",
      "180": "180deg",
      "270": "270deg",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 平移

平移元素的功能类。

Class Properties
translate-x-0 --tw-translate-x: 0px;
translate-x-px --tw-translate-x: 1px;
translate-x-0.5 --tw-translate-x: 0.125rem;
translate-x-1 --tw-translate-x: 0.25rem;
translate-x-1.5 --tw-translate-x: 0.375rem;
translate-x-2 --tw-translate-x: 0.5rem;
translate-x-1/2 --tw-translate-x: 50%;
translate-x-1/3 --tw-translate-x: 33.333333%;
translate-x-2/3 --tw-translate-x: 66.666667%;
translate-x-1/4 --tw-translate-x: 25%;
translate-x-2/4 --tw-translate-x: 50%;
translate-x-3/4 --tw-translate-x: 75%;
translate-x-full --tw-translate-x: 100%;

自定义

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      translate: {
        "1/7": "14.2857143%",
        "2/7": "28.5714286%",
        "3/7": "42.8571429%",
        "4/7": "57.1428571%",
        "5/7": "71.4285714%",
        "6/7": "85.7142857%",
      },
    },
  },
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        "72": "18rem",
        "84": "21rem",
        "96": "24rem",
      },
    },
  },
};
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

# 倾斜

用于倾斜元素的功能类。

Class Properties
skew-x-0 --tw-skew-x: 0deg;
skew-x-1 --tw-skew-x: 1deg;
skew-x-2 --tw-skew-x: 2deg;
skew-x-3 --tw-skew-x: 3deg;
skew-x-6 --tw-skew-x: 6deg;
skew-x-12 --tw-skew-x: 12deg;
-skew-x-12 --tw-skew-x: -12deg;

自定义

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      skew: {
        "25": "25deg",
        "60": "60deg",
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 光标效果

当鼠标悬停在一个元素上时，用于控制光标样式的功能类。

Class Properties
cursor-auto cursor: auto;
cursor-default cursor: default;
cursor-pointer cursor: pointer;
cursor-wait cursor: wait;
cursor-text cursor: text;
cursor-move cursor: move;
cursor-help cursor: help;
cursor-not-allowed cursor: not-allowed;

# 指向事件

用于控制元素是否响应指向事件的功能类。

Class Properties
pointer-events-none pointer-events: none;
pointer-events-auto pointer-events: auto;

使用 pointer-events-auto 来恢复浏览器对指向事件（如 :hover 和 click ）的默认行为。

使用 pointer-events-none 使元素忽略指向事件。指向事件仍然会在子元素上触发，并传递到目标元素的下方。

# 用户选择

用于控制用户是否可以在元素中选择文本的功能类。

Class Properties
select-none user-select: none;
select-text user-select: text;
select-all user-select: all;
select-auto user-select: auto;
  • 使用 select-all 在用户点击时自动选择元素中的所有文本。

# svg

# svg填充

用于设置 SVG 元素填充(fill)样式的功能类。

Class Properties
fill-current fill: currentColor;

通过自定义您的 tailwind.config.js 文件的 theme.fill 部分来控制 Tailwind 生成哪些 fill 功能类。

  // tailwind.config.js
  module.exports = {
    theme: {
     fill: {
       current: 'currentColor',
     }
     fill: theme => ({
       'red': theme('colors.red.500'),
       'green': theme('colors.green.500'),
       'blue': theme('colors.blue.500'),
     })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

# svg线条

用于设置 SVG 元素线条(stroke)样式的功能类。

Class Properties
stroke-current stroke: currentColor;

# svg线条厚度

用于设置 SVG 元素线条厚度(Stroke Width)的功能类。

Class Properties
stroke-0 stroke-width: 0;
stroke-1 stroke-width: 1;
stroke-2 stroke-width: 2;