Tailwind CSS 添加新的功能類

添加新的功能類

使用您的自定義功能類來(lái)擴(kuò)展 Tailwind。

盡管 Tailwind 提供了相當(dāng)全面的開箱即用的功能類集，您仍可能會(huì)遇到需要添加一些自己的功能類的情況。

確定擴(kuò)展框架的最佳方法非常不易，因此這里有一些最佳實(shí)踐，可以幫助您以最慣用的方式添加自己的功能類。

使用 CSS

將自己的功能類添加到 Tailwind 的最簡(jiǎn)單的方式是直接添加到您的 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 將自動(dòng)把這些樣式移動(dòng)到 ?@tailwind utilities? 相同的位置，以避免出現(xiàn)意外的未知問題。

使用 ?@layer? 指令也會(huì)指示 Tailwind 在清除 功能類 層時(shí)考慮這些樣式。閱讀我們的 生產(chǎn)優(yōu)化文檔以了解更多信息。

生成響應(yīng)式變體

如果您想根據(jù)您的 ?tailwind.config.js? 定義的斷點(diǎn)創(chuàng)建功能類的變體，請(qǐng)將您的功能類放在 ?@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 將自動(dòng)生成每個(gè)自定義功能類的前綴版本，您可以有條件地應(yīng)用這些樣式到不同的斷點(diǎn)上：

<!-- 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>

生成深色模式變體

如果您想生成您自己的功能類的 dark mode variants，首先確保在您的 ?tailwind.config.js? 文件中 ?darkMode ?被設(shè)置為 ?media ?或者 ?class?。

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

下一步，將您的功能類放在 ?@variants? 指令中，并且把 ?dark ?添加到變體列表中。

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

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

Tailwind 將自動(dòng)生成每個(gè)自定義功能類的前綴版本，您可以有條件地應(yīng)用這些樣式到不同的狀態(tài)上：

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

生成狀態(tài)變體

如果您想為您的功能類生成 狀態(tài)變體，請(qǐng)將您的功能類放在 ?@variants? 指令中，并列出您想啟用的變體：

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

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

Tailwind 將自動(dòng)生成每個(gè)自定義功能類的前綴版本，您可以有條件地應(yīng)用這些樣式到不同的狀態(tài)上：

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

狀態(tài)變體的生成順序與您在 ?@variants? 指令中列出的順序相同，因此，如果您希望一個(gè)變體優(yōu)先于另一個(gè)變體，請(qǐng)確保這個(gè)變體最后被列出：

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

使用插件

除了直接在 CSS 文件中添加新的功能類外，您還可以通過編寫自己的插件將功能類添加到 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'])
    })
  ]
}

如果您想把您的自定義功能類作為一個(gè)庫(kù)發(fā)布，或者使其更容易跨項(xiàng)目分享，這是一個(gè)不錯(cuò)的選擇。