Tailwind CSS on GitHub

方法 & 指令

Tailwind CSS的自定义方法和志指令。

@tailwind

使用@tailwind指令插入Tailwind的basecomponentsutilities以及screens样式到你的CSS中。

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the responsive
 * variations of each utility.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind screens;

@apply

使用@apply指令把工具类内联到你的自定义CSS中。

当你在HTML中有一些公用的样式,你想要把它们提取到组件的时候,这个指令将非常有用。

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}

请注意,类的权重是基于它们在原始CSS中的位置,而不是基于你在@apply指令后列出它们的顺序。这是为了确保在使用@apply提取类时所获得的行为与这些类在HTML中直接列出时的行为相匹配。

/* Input */
.btn {
  @apply py-2 p-4;
}

/* Output */
.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

如果你想细粒度地控制应用类的顺序,可以使用多个@apply语句:

/* Input */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Output */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}

你也可以混合使用@apply声明和普通的CSS声明:

/* Input */
.btn {
  transform: translateY(-1px);
  @apply bg-black;
}

/* Output */
.btn {
  background-color: #000;
  transform: translateY(-1px);
}

所有使用了@apply内联的类,都会移除!important,以避免一些特殊问题。

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

如果你使用@apply内联了已有的类,并且想加上!important,只需要直接在指令的最后面加上!important即可:

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

注意,如果你在使用Sass/SCSS,你需要使用Sass的插值功能来确保其正常工作:

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

@layer

使用@layer指令来告诉Tailwind你的自定义CSS属于哪一个层。可选值有basecomponents以及utilities

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind会自动将@layer指令中的所有CSS移动到对应的@tailwind规则相同的地方,所以你不需要一味的按照顺序创建CSS。

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

上面的.btn-blue会被放到Tailwind的components层里面,当你@tailwind components的时候,就会引入上面的样式。

@layer指令中包装任何自定义CSS也会告诉Tailwind在清除(tree-shake)该图层时也要考虑这些样式。更多详情请阅读生成环境优化


@variants

通过@variants指令包裹你的自定义CSS,可以生成responsivehoverfocusactive以及其他的变体

@variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }
}

这会生成下面的CSS:

.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}

需要注意的是,变体是按照你指定的顺序生成的

所以,如果你想要focus优先于hover,请确保focus写在hover后面:

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}

@variants支持配置文件中variants部分配置的所有值,以及你通过插件实现的自定义变体


@responsive

你可以用@responsive指令包裹你的自定义类,来实现响应式变体:

@responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

这是@variants responsive { ... }的简写。

如果使用默认的断点配置,将会生成下面的CSS代码:

.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/* ... */

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

响应式变体将添加到样式表末尾的Tailwind的现有媒体查询中。这确保了带有响应式前缀的类总是能够比那些非响应式类有更高权重。


@screen

@screen指令允许你创建引用你配置的断点的媒体查询,而不是在你自己的CSS中复制它们的值。

比如,你配置了一个640pxsm断点,你可以编写引用该断点的自定义CSS:

而不是像下面一样再写一个原始的媒体查询的值:

@media (min-width: 640px) {
  /* ... */
}

你可以使用@screen指令并且引用断点名称:

@screen sm {
  /* ... */
}

theme()

通过theme()使用点操作符,就可以访问到你的配置项。

当你想从主体配置中值引用一部分配置项,theme()@apply更有用。

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

如果你需要访问一个包含点的值(就像间距比例中的“2.5”值),你可以使用方括号符号:

.content-area {
  height: calc(100vh - theme('spacing[2.5]'));
}

由于Tailwind使用嵌套对象语法来定义其默认调色板,请确保使用点符号来访问嵌套的颜色。

在访问嵌套样色的时候不要使用破折号语法

.btn-blue {
  background-color: theme('colors.blue-500');
}

使用点表示法访问嵌套的颜色值

.btn-blue {
  background-color: theme('colors.blue.500');
}