Tailwind CSS 函數(shù)與指令

函數(shù)與指令

Tailwind 向您的 CSS 的暴露的函數(shù)和指令的參考說(shuō)明。

@tailwind

使用 ?@tailwind? 指令向您的 CSS 添加 Tailwind 的 ?base?, ?components?, ?utilities ?和 ?screens ?樣式。

/**
 * 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? 將任何現(xiàn)存的功能類內(nèi)聯(lián)到您的自定義 CSS 中。

當(dāng)您在您的 HTML 里找到您想要提取到一個(gè)新組件的通用的功能模式時(shí)，這非常有用。

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

注意，類是根據(jù)其在原始 CSS 中的位置而不是根據(jù)在 ?@apply? 指令之后列出它們的順序來(lái)應(yīng)用的。這是為了確保使用 ?@apply? 提取類列表時(shí)得到的行為與直接在 HTML 中列出的類的行為相匹配。

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

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

如果您要對(duì)功能類的應(yīng)用順序進(jìn)行細(xì)粒度的控制，請(qǐng)使用多個(gè) ?@apply? 語(yǔ)句：

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

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

您還可以將 ?@apply? 聲明與常規(guī) CSS 聲明混合使用：

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

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

默認(rèn)情況下，任何使用 ?@apply? 內(nèi)聯(lián)的規(guī)則中的 ?!important? 將被刪除，以避免出現(xiàn)特異性問(wèn)題。

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

.bar {
  @apply foo;
}

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

.bar {
  color: blue;
}

如果您想使用 ?@apply? 內(nèi)聯(lián)一個(gè)已經(jīng)存在的類，并且為其設(shè)置 ?!important?，只需要把 ?!important? 添加到聲明的結(jié)尾即可。

/* 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 一組自定義樣式應(yīng)該屬于哪個(gè) “bucket”?？捎玫膶佑?nbsp;?base?, ?components ?和 ?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會(huì)自動(dòng)將 ?@layer? 指令中的所有 CSS 移至與相應(yīng) ?@tailwind? 規(guī)則相同的位置，因此您不必?fù)?dān)心以特定順序編寫(xiě) CSS 來(lái)避免特定性問(wèn)題。

在 ?@layer? 指令中包裝的任何自定義 CSS 也會(huì)告訴 Tailwind 在清除該層時(shí)考慮那些樣式。閱讀 關(guān)于生產(chǎn)優(yōu)化的文檔 來(lái)了解更多詳情。

@variants

您可以通過(guò)在 ?@variants? 指令中聲明自己的功能類來(lái)生成他們的 ?responsive?, ?hover?, ?focus?, ?active ?及其它 變體。

@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);
}

請(qǐng)務(wù)必注意，變體是按照您指定的順序生成的。

例如，如果您希望 focus 功能類優(yōu)先于 hover 功能類，請(qǐng)確保列表中的 focus 應(yīng)該在 hover 之后：

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

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

該 ?@variants? 規(guī)則支持您配置文件中 ?variants ?部分支持的所有值，以及通過(guò)插件添加的 自定義變體。

@responsive

您可以通過(guò)在 ?@responsive? 指令中聲明他們的定義來(lái)生成您自己的類的響應(yīng)式變體。

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

這是 ?@variants responsive { ... }? 的簡(jiǎn)寫(xiě)方式，同樣起作用。

使用默認(rèn)斷點(diǎn)，這將生成以下類：

.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);
  }
  /* ... */
}

響應(yīng)式變體將在您的樣式表的結(jié)尾被添加到 Tailwind 的已經(jīng)存在的媒體查詢中。這將確保那些帶有響應(yīng)式前綴的類優(yōu)先級(jí)會(huì)高于同樣 CSS 屬性的非響應(yīng)式的類。

@screen

?@screen? 指令允許您創(chuàng)建通過(guò)名稱引用斷點(diǎn)的媒體查詢，而不是在您的 CSS 中復(fù)制他們的值。

例如，假設(shè)有一個(gè)名為 ?sm? 的 ?640px? 的斷點(diǎn)，您只需要寫(xiě)一些自定義的指向這個(gè)斷點(diǎn)的 CSS。

而不是編寫(xiě)一個(gè)復(fù)制那些值的原始的媒體查詢，如下所示：

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

您可以使用 ?@screen? 指令，然后根據(jù)名稱引用這個(gè)斷點(diǎn)：

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

screen()

?screen ?函數(shù)接受像 ?md ?這樣的屏幕名稱并生成相應(yīng)的媒體特征表達(dá)式：

/* Input */
@media screen(sm) {
  /* ... */
}

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

當(dāng)您將 Tailwind 與其他無(wú)法處理 ?@screen? 指令的 CSS 工具一起使用時(shí)，這會(huì)很有用。例如 ?postcss-nesting? 不理解 ?@screen? 但理解 ?@media?，因此在 ?screen()? 函數(shù)旁邊使用 ?@media? 會(huì)更正確。

theme()

使用 ?theme()? 函數(shù)可以通過(guò)點(diǎn)符號(hào)來(lái)獲取 Tailwind 配置的值。

當(dāng)您想要引用一個(gè)您主題配置中的一部分聲明的值時(shí)，這是一個(gè) ?@apply? 的有用的替代方式。

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

如果您想獲取一個(gè)含有點(diǎn)的值（像間距比例中的 2.5），則可以使用方括號(hào)。

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

因?yàn)?nbsp;Tailwind 使用 嵌套對(duì)象語(yǔ)法 來(lái)定義其默認(rèn)調(diào)色板，因此請(qǐng)確保使用點(diǎn)符號(hào)來(lái)訪問(wèn)嵌套的顏色。

獲取嵌套的顏色值時(shí)不要使用破折號(hào)語(yǔ)法

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

使用點(diǎn)符號(hào)獲取嵌套的顏色值

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