Tailwind CSSに新しいクラス、ユーティリティを追加する

Published at
114 words
1min read

Tailwind CSS には、デフォルトで多くのクラスが用意されているが、新しいクラス（ユーティリティ）を追加することもできる。これは、tailwind.config.jsファイルにプラグインを追加することで実現できる。

https://tailwindcss.com/docs/plugins#adding-utilities

具体的には次のようにすればいい。

const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require("@tailwindcss/typography"),
    plugin(function ({ addUtilities }) {
      const utilities = {
        ".horizontal-tb": {
          writingMode: "horizontal-tb",
        },
        ".vertical-rl": {
          writingMode: "vertical-rl",
        },
        ".vertical-lr": {
          writingMode: "vertical-lr",
        },
      };
      addUtilities(utilities);
    }),
  ],
};