「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

函數與指令

Tailwind 的函數與指令說明

@tailwind

使用 @tailwind 指令可以把 Tailwind 的 basecomponentsutilitiesscreens 樣式插入到你的 CSS 中。

/**
 * 這會注入 Tailwind 的基底樣式和其他已安裝插件的基底樣式。
 */
@tailwind base;

/**
 * 這會注入 Tailwind 元件樣式和其他已安裝插件的元件樣式。
 */
@tailwind components;

/**
 * 這會注入 Tailwind 功能樣式和其他已安裝插件的功能樣式。
 */
@tailwind utilities;

/**
 * 使用這個指令來管理 Tailwind 在哪裡注入每個功能的響應式變化 (variations)。
 *
 * 如果刪除此行,Tailwind 將會預設注入在你的樣式表的最底部。
 */
@tailwind screens;

@apply

使用 @apply 把你自定義的 CSS 列入現存的功能 class 之中。

這在你想要把一個共用的 HTML 功能模組提取成一個元件時很有用。

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

請注意 class 是依照他們在你原本 CSS 中的位置順序來應用的,而不是使用 @apply 指令的順序,這是為了確保使用 @apply 時的表現與在 HTML 裡使用 class 的結果相同。

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

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

如果你想要良好的控制 class 應用的順序,同時使用多個 @apply 指令:

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

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

你也可以混用基本的 CSS 宣告和 @apply 指令:

/* 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 在現存的 class 並且給它 !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 的插補 (interpolation) 功能才能正常運作:

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

@layer

使用 @layer 指令來告知 Tailwind 這組自定義的樣式屬於哪一個層級,可接受的內容有 basecomponentsutilities

@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 順序關係而產生的優先權問題。

將自定義的 CSS 使用 @layer 囊括住也可以告知 Tailwind 在清除不必要的 CSS 時會一併檢查這些樣式,詳細可以閱讀我們的 生產環境優化


@variants

使用 @variants 指令來宣告你的功能以產生相關的 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 指令囊括住你自己的 class 定義可以產生相關的響應式變化模式。

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

這是 @variants responsive { ... } 的縮寫,但是效果一樣。

使用預設的斷點 (breakpoints) 會產生下列這些 class:

.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 現存的媒體查詢 (media queries) 區域之後,並且確保這些響應式前綴詞的 class 會比沒有響應式的 class 擁有更高的優先權。


@screen

@screen 指令讓你依照斷點名稱建立相關的媒體查詢。

舉例來說,你想要有一個 640pxsm 斷點,並且你還需要撰寫一些自定義的 CSS 給這一個斷點。

你不需要複製這段內容來撰寫一個原生的媒體查詢:

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

…反之你可以使用 @screen 指令來產生相關的斷點內容:

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

screen()

The screen function accepts a screen name like md and generates the corresponding media feature expression:

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

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

This can be useful when you using Tailwind with other CSS tooling that handles the @screen directive poorly. For example postcss-nesting doesn’t understand @screen but understands @media, so using @media alongside the screen() function behaves more correctly.


theme()

使用 theme() 函數讓你能夠透過使用小數點 (.) 來使用你的 Tailwind 設定值。

這是一個 @apply 很有用的替代方式,如果你想要引用主題 (theme) 設定中的部分定義:

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

如果你想要使用包含小數點的數值 (像是 2.5 的空間比例 (spacing scale)),可以使用中括號:

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

由於 Tailwind 使用 巢狀語法 來定義預設的調色盤,請確保使用小數點來使用這些巢狀結構的顏色。

不要使用橫線 (dash) 語法來獲取顏色。

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

使用小數點語法來獲取顏色。

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