Tailwind CSSの@applyが効かない？Vue + CDN環境での原因と対処法

Tailwind CSSの@applyが効かない？Vue + CDN環境での原因と対処法
まとめ

Tailwind CSSの@applyが効かない？Vue + CDN環境での原因と対処法

導入：あるあるトラブル「@applyが効かない」

読者

Vue SFCの中で @apply を使ったのに、なぜかクラスが空になるんだけど…

結論：CDN経由のTailwindでは@applyは使えない

Tailwind CSSの@applyは、PostCSSのビルドステップでユーティリティクラスを展開します。つまり、CDNで読み込んだCSSファイルは展開処理をしないため、@applyは動きません。

再現コード：SFC内での@applyの利用

<style scoped>
.input-base {
  @apply w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none transition duration-100 ring ring-indigo-300;
}
.input-base:focus {
  @apply ring;
}
</style>

このように書いても、DevToolsで確認すると .input-base {} だけが表示され、何も適用されていません。

原因の詳細：ビルドパイプラインがない

CDNで配信されるTailwind CSSは、ユーティリティクラスを事前にビルド済みのCSSに含んでいます。一方、@applyはカスタムクラスを展開するためにPostCSSとTailwindのプラグインが必要です。

選択肢①：CDNのままユーティリティを直書き

もっともシンプルな解決策は、@applyをやめてHTMLテンプレートに直接ユーティリティクラスを記述する方法です。

<input
  class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none transition duration-100 ring ring-indigo-300 focus:ring"
/>

選択肢②：PostCSSとTailwindをローカルに導入

もし@applyを使いたいなら、以下のステップでローカル環境を構築しましょう。

依存パッケージをインストール：

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js の content を設定：

export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

src/assets/tailwind.css を作成：

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

@layer components {
  .input-base {
    @apply w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none transition duration-100 ring ring-indigo-300;
  }
  .input-base:focus {
    @apply ring;
  }
}

main.ts でインポート：

import '@/assets/tailwind.css';

選択肢③：素のCSSでスタイルを書く

CDN構成を維持しつつ.input-baseのスタイルを維持したいなら、ふつうにCSSで記述するのが現実的です。

<style scoped>
.input-base {
  width: 100%;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  padding: 0.5rem 0.75rem;
  color: #1f2937;
  outline: none;
  transition: box-shadow 100ms, border-color 100ms, background-color 100ms;
}
.input-base:focus {
  box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.5);
  border-color: #a5b4fc;
}
</style>