你正在瀏覽的是 Tailwind CSS v2. 的技術文件
前往 Tailwind CSS v3 →
Tailwind CSS 首頁
Tailwind CSS 的 GitHub

函數與指令

Tailwind 的函數與指令說明

@tailwind

使用 @tailwind 指令可以把 Tailwind 的 base、components、utilities 和 screens 樣式插入到你的 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 這組自定義的樣式屬於哪一個層級，可接受的內容有 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 會自動地將使用 @layer 指令的 CSS 搬移到符合 @tailwind 規定的相同位置，所以你不需要擔心因為 CSS 順序關係而產生的優先權問題。

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

@variants

使用 @variants 指令來宣告你的功能以產生相關的 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);
}

需要注意的是，變化模式會依據你指定的順序而產生。

舉例來說，如果你希望 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 指令讓你依照斷點名稱建立相關的媒體查詢。

舉例來說，你想要有一個 640px 的 sm 斷點，並且你還需要撰寫一些自定義的 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');
}
增加新功能配置 (Configuration)
在 GitHub 中編輯此頁