nuxt-tailwindでも`@layer utilities`を使いたい

Tailwindでは、カスタムCSSを@applyやlg:などでも使えるように、
@layer utilitiesなどを使って設定が必要。

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

@layer components {
  .select2-dropdown {
    @apply rounded-b-lg shadow-md;
  }
}

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

・Adding Custom Styles - Tailwind CSS

ただ、以下のようなNuxtのSFC内だとちゃんと読み込まれないっぽい。。(´・ω・｀)

<style lang="postcss">
.my-class {
  @apply select2-dropdown content-auto;
}
</style>

The select2-dropdown class does not exist. If select2-dropdown is a custom class, make sure it is defined within a @layer directive.

・Custom utility: @apply can only be used for classes in the same CSS tree. · Issue #140 · nuxt-modules/tailwindcss

このIssueに書かれているワークアラウンドでは、
プラグインで追加するようにすればよいとのことなので、試してみた(*´ω｀*)

プラグインの設定

こんな感じ。各@layerごとにファイルを作成し、
それぞれ読み込ませる形。

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");
const postcssJs = require("postcss-js");
const fs = require("fs");

module.exports = {
  plugins: [
    plugin(({ addComponents, addUtilities, postcss }) => {
      // for @layer components
      const componentsFile = "./assets/css/tailwind.components.css";
      const css = fs.readFileSync(componentsFile, "utf-8");
      addComponents(postcssJs.objectify(postcss.parse(css)));
      
      // for @layer utilities
      const utilitiesFile = "./assets/css/tailwind.utilities.css";
      const css = fs.readFileSync(utilitiesFile, "utf-8");
      addUtilities(postcssJs.objectify(postcss.parse(css)));
    })
  ]
};

各CSSファイルの例

それぞれ@layerの中身を書く形。

/* ./assets/css/tailwind.components.css */
.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}

/* ./assets/css/tailwind.utilities.css */
.content-auto {
  content-visibility: auto;
}

nuxt.config.tsの追加設定

そのままだと、監視対象から外れているので、
変更時に更新されるように設定を追加する。

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  srcDir: "app",
  ssr: false,
  target: "static",
  modules: [
    // Docs: https://tailwindcss.nuxtjs.org
    "@nuxtjs/tailwindcss",
  ],

  // 変更時に更新されるよう監視対象に追加する
  watch: [
    "~/assets/css/tailwind.components.css",
    "~/assets/css/tailwind.utilities.css",
  ],
});

以上!! これでカスタマイズが捗る(*´ω｀*)

参考にしたサイト様

• Custom utility: @apply can only be used for classes in the same CSS tree. · Issue #140 · nuxt-modules/tailwindcss