TailwindCSSで@layerと@applyでユーティリティクラスをまとめる方法について、紹介します。TailwindCSSではクラス名が冗長になりがちなため、HTMLの可読性が落ちます。ある程度使い回すことがわかったら、@layerと@applyを使って、ユーティリティクラスをまとめることができます。
ユーティリティクラスをまとめるには、CSSに記述する方法と、addBase、addComponents、addUtilitiesを使って記述する方法があります。addBase、addComponents、addUtilitiesの中で、@applyを使う方法がわからなかったので、調べたことをまとめておきます。
CSSでクラスをまとめる方法
まず、CSSで@layerと@applyを使って、クラスをまとめる方法を紹介します。CSSで追加する場合は、TailwindCSSを読み込んでいるCSSファイルに下記のように記述します。
TailwindCSSでは、base > components > utilities の順で、CSSに優先順位をつけることができます。最優先はbaseになります。意図しない上書きを防ぐことができたり、管理が楽になります。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply border border-gray-300 rounded;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
/* ... */
}
//引用元：https://tailwindcss.com/docs/adding-custom-stylesプラグインでクラスをまとめる方法
次に、addBase、addComponents、addUtilitiesを使って、ユーティリティクラスをまとめる方法です。
まず、tailwind.config.jsでconst plugin = require('tailwindcss/plugin')で、プラグインを読みこみます。module.exportのpluginsのプロパティに、プラグインの中で使いたい関数を記述します。下記が基本的な書き方です。addBase、addComponents、addUtilitiesでは、CSSinJSの書き方で記述します。
const plugin = require('tailwindcss/plugin') //プラグインの読み込み
module.exports = {
// ...
plugins: [
plugin(function ({ addBase, addComponents, addUtilities, theme }) { //関数を呼び出す
addBase({
'h1': {
fontSize: theme('fontSize.2xl'),
},
'h2': {
fontSize: theme('fontSize.xl'),
},
})
addComponents({
'.card': {
backgroundColor: theme('colors.white'),
borderRadius: theme('borderRadius.lg'),
padding: theme('spacing.6'),
boxShadow: theme('boxShadow.xl'),
}
})
addUtilities({
'.content-auto': {
contentVisibility: 'auto',
}
})
})
]
}
//引用元：https://tailwindcss.com/docs/adding-custom-stylesaddBaseやaddComponents,addUtilitiesの中で、@applyを使う方法
なるべくTailwindCSSのユーティリティクラスを使って簡潔させたい＆管理するファイルを少なくしたいので、addBase,addComponents,addUtilitiesで、@applyを使って、yユーティリティクラスをまとめる方法を調べてみました。addBase,addComponents,addUtilitiesで、@applyを使うには下記のように記述します。
module.exports = {
// ...
plugins: [
plugin(function ({ addBase, addComponents }) {
addBase({
'body': {
"@apply font-body bg-slate-200": {}
},
'h1':{
"@apply text-2xl font-bold mb-6 text-center text-gray-800": {}
},
'h2':{
"@apply text-lg font-normal text-black mb-1": {}
}
})公式には、その情報がなかったので、下記のGitHubで公開されている議論を参考にさせて頂きました。
独自のスタイルを追加する際の懸念点
カスタムスタイルを、CSSで追加する方法でも、プラグインで追加する方法でも同じことですが、VS-CodeのTailwindCSSを補完してくれるプラグインが使えないです。便利な機能が使えなくなるのは、ネックに感じますが、いったんHTML側で書いてから、ある程度まとまって使い回しが必要になってから、移せばいいのかもしれません。
おわりに
以上、TailwindCSSで@layerと@applyを使ってクラスをまとめる方法についてご紹介しました。TailwindCSSのaddBase、addComponents、addUtilitiesの中でも、@applyを使うことができるので、ぜひ使ってみてください！
