增加新功能

儘管 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 需設置為 media 或 class：

// 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'])
    })
  ]
}

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

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

使用 CSS

生成響應式 variants

生成深色模式 variants

生成狀態 variants

使用插件

本頁面內