TailwindCSS @layerと@applyを使ってユーティリティクラスをまとめる方法

TailwindCSS @layerと@applyを使ってユーティリティクラスをまとめる方法

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

addBaseaddComponents,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で公開されている議論を参考にさせて頂きました。

https://github.com/tailwindlabs/tailwindcss/discussions/2049

独自のスタイルを追加する際の懸念点

カスタムスタイルを、CSSで追加する方法でも、プラグインで追加する方法でも同じことですが、VS-CodeのTailwindCSSを補完してくれるプラグインが使えないです。便利な機能が使えなくなるのは、ネックに感じますが、いったんHTML側で書いてから、ある程度まとまって使い回しが必要になってから、移せばいいのかもしれません。

おわりに

以上、TailwindCSSで@layerと@applyを使ってクラスをまとめる方法についてご紹介しました。TailwindCSSのaddBase、addComponents、addUtilitiesの中でも、@applyを使うことができるので、ぜひ使ってみてください!

まい

フロントエンドエンジニア目指して、勉強中です。

Tailwind CSSカテゴリの最新記事