2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Nuxt 3 + Tailwind CSS が反映されない問題と解決方法

Posted at

はじめに

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.jscontentpages/**/*.vue が含まれていることを確認
  • nuxt.config.tscss 配列で Tailwind を最初に読み込む
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?