Tailwind CSS (v3) in Nuxt v3 Beta

パブリックベータ中の Nuxt3 環境で、つい先日リリースされた Tailwind CSS v3 を使えるようにします。
Tailwind CSS v2 でもほぼ変わらないです。公式ドキュメントを参考にしてみてください。

PostCSS v8 へのアップデートに postcss-preset-env が追いつかず^[1][2]、 Nuxt2 で Tailwind CSS v2 を導入するのに苦労した^[3]のは記憶に新しいですね。

結論から言うと

npm i tailwindcss@3 して、だいたいインストールガイドに従ってコンフィグするだけで OK。

サンプル repo はこちら

記事執筆時の実行環境は以下の通りです。
WSL2, Debian GNU/Linux 10, node 16.13.1, npm 8.1.2

手順

tailwindcss@3 を dependencies に追加します。
Tailwind の動作には postcss と autoprefixer も必要ですが、 Nuxt3 内部で既に利用されているので、改めて追加する必要はありません。

npm install tailwindcss@3

tailwind.config.js を生成します。

npx tailwindcss init

Nuxt のディレクトリ構造に従って、Tailwind のユーティリティクラス名が含まれうるファイルを指定します。

./tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{vue,js,jsx,ts,tsx}",
    "./pages/**/*.{vue,js,jsx,ts,tsx}",
    /* ... */
  ],

例の CSS を書きます。Nuxt の assets ディレクトリ配下に置いておきますが、おそらくどこでもいいです。

./assets/tailwind.css

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

PostCSS プラグインとしての tailwindcss を追加します。
Nuxt の持つ PostCSS プロセスに混ぜるため、 postcss.config.js ではなく nuxt.config.{js,ts} に設定を書きます。

./nuxt.config.{js,ts}

export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
        },
      },
    },
  },

例の CSS を、グローバル CSS として Nuxt に読ませます。

./nuxt.config.{js,ts}

export default defineNuxtConfig({
  css: ["@/assets/tailwind.css"],

以上で完了です。快適な Tailwind ライフを。

おまけ: Nuxt 内蔵の PostCSS コンフィグを見てみる

https://github.com/nuxt/framework/blob/3e82f0f2cb0c815af898ad78118104a476ee1f8e/packages/webpack/src/utils/postcss.ts#L70
Nuxt 側のデフォルトコンフィグとディープマージ _.merge() され、 autoprefixer と cssnano がケツになるようソートされます。
nuxt.config.{js,ts}のbuild.postcss.postcssOptionsに任意の PostCSS プラグインを突っ込んでしまっても大丈夫そうです。

---

脚注

1. https://github.com/csstools/postcss-preset-env/issues/191

2. 今は既に対応されました。

3. https://github.com/nuxt/postcss8