🍃

Tailwind CSS (v3) in Nuxt v3 Beta

commits2 min read 3

パブリックベータ中の 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 の動作には postcssautoprefixer も必要ですが、 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() され、 autoprefixercssnano がケツになるようソートされます。
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 ↩︎

GitHubで編集を提案

Discussion

少なくとも僕の環境では

 build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
+         autoprefixer: {},
        },
      },
    },
  },

のようにautoprefixer: {}を追加しないと正常に動作しませんでした

コメントありがとうございます。
サンプルrepoと実行環境を追記してみました。
よろしければそちらの環境など教えていただけると嬉しいです!

こちらは
node v14.18.1
windows 10
です

ログインするとコメントできます