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

增加新功能

使用自訂的功能 class 來擴充 Tailwind

儘管 Tailwind 提供了一組非常實用的功能 class,但是你可能還是會遇到需要增加自訂功能 class 的情況。

決定擴充框架的最佳方法是很累人的,因此這裡有一些最佳的實作方法,全力幫助你使用最慣用的方法來增加自訂功能。


使用 CSS

將自訂功能加入 Tailwind 的最簡單方法是直接將它們放在 CSS 中:

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

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

透過 @layer 指令,Tailwind 將自動把這些樣式移到 @tailwind base 相同的位置,以避免發生一些意外問題。

使用 @layer 指令還能告訴 Tailwind 在清理基底樣式時該保留哪些樣式,請閱讀 documentation on optimizing for production 了解更多細節。

生成響應式 variants

如果你想根據在 tailwind.config.js 檔案中定義的斷點生成自訂功能的響應式 variants,請將自訂功能包在 @variants 指令中,並且在 variants 清單中加入 responsive

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

@layer utilities {
  @variants responsive {
    .scroll-snap-none {
      scroll-snap-type: none;
    }
    .scroll-snap-x {
      scroll-snap-type: x;
    }
    .scroll-snap-y {
      scroll-snap-type: y;
    }
  }
}

Tailwind 將自動產生每個自訂功能的前綴版本,你可以有條件地將它們用在不同的斷點處:

<!-- Use `scroll-snap-type: none` by default, then use `scroll-snap-type: x` on medium screens and up -->
<div class="scroll-snap-none md:scroll-snap-x"></div>

要了解更多資訊,請見 響應式設計

生成深色模式 variants

如果你想產生自訂功能 class 的 深色模式 variants,首先要確定 tailwind.config.js 檔案中 darkMode 需設置為 mediaclass

// tailwind.config.js
module.exports = {
  darkMode: 'media'
  // ...
}

接下來,將自訂功能 class 包到 @variants 指令中,並且在 variants 清單中加入 dark

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

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

Tailwind 將自動產生每個自訂功能的前綴版本,你可以有條件地將它們應用在不同的狀態下:

<div class="filter-grayscale dark:filter-none"></div>

要了解更多資訊,請見 深色模式

生成狀態 variants

如果你想為自訂功能建立狀態 variants,請將自訂程序包裝在 @variants 指令中,並列出要啟用的variants:

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

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

Tailwind 將自動產生每個自訂功能的前綴版本,你可以有條件地將它們應用在不同的狀態下:

<div class="filter-grayscale hover:filter-none"></div>

狀態 variants 的生成順序與在 @variants 指令中的順序相同,因此,如果你希望一個 variant 優先於另一個 variant ,請確保該 variant 列在後面:

/* Focus will take precedence over hover */
@variants hover, focus {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

/* Hover will take precedence over focus */
@variants focus, hover {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

要了解更多資訊,請見狀態 variants


使用插件

除了直接在 CSS 文件中增加新的自訂功能 class 外,你還可以撰寫自己的插件將自訂功能添加到 Tailwind:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.filter-none': {
          filter: 'none',
        },
        '.filter-grayscale': {
          filter: 'grayscale(100%)',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

如果要將自訂功能發佈為函式庫,或者讓它更容易共享給不同專案使用,這可能是一個不錯的選擇。

要了解更多資訊,請見功能插件