はじめに
Nuxt 3 に Tailwind CSS を導入した際、クラスが反映されない問題が発生しました。設定や構成を見直した結果、原因は PostCSS の設定方法にありました。この記事では、その原因と解決方法をまとめます。
環境
- Nuxt 3.6.5
- Node.js 20.18.1
- Tailwind CSS 3.4.14
症状
Tailwind のクラスを記述してもビルド後にスタイルが反映されない。DevTools を確認してもクラスが存在せず、Tailwind がビルド時に無視されている状態でした。
原因
nuxt.config.ts
の PostCSS 設定がオブジェクト形式になっており、Vite が Tailwind のプラグインを認識できていませんでした。
before
vite: {
css: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
解決方法
Vite に正しくプラグインを渡すため、関数配列形式に変更しました。
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineNuxtConfig({
css: ['~/assets/css/tailwind.css'],
vite: {
css: {
postcss: {
plugins: [tailwindcss(), autoprefixer()],
},
},
},
})
assets/css/tailwind.css
には以下を記述します。
@tailwind base;
@tailwind components;
@tailwind utilities;
補足
他にも試したこと
-
tailwind.config.js
のcontent
にpages/**/*.vue
が含まれていることを確認 -
nuxt.config.ts
のcss
配列で Tailwind を最初に読み込む