Tailwind CSSに新しいクラス、ユーティリティを追加する
Tailwind CSSに新しいクラスつまりユーティリティを追加するには、設定ファイルにプラグインを追加するか、自分でプラグインを作成する必要がある。
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);
}),
],
};