Nuxt 3 with TailwindCSS v3

概要

Nuxt３でTailwindCssを設定する方法
TailwindCssはバージョン３系

手順

１. Nuxt3, Tailwindcssをインストール

# Nuxt3をインストール
$ npx nuxi init nuxt3-app

# ディレクトリに移動
$ cd nuxt3-app

# TailwindCSSをインストール
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# TailwindCSSを初期化
$ npx tailwindcss init

２. taiwind.config.jsを修正

// tailwind.config.js
module.exports = {
  content: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
};

３. tailwind.cssを作成

/* assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

４. nuxt.config.jsを修正

// nuxt.config.js
import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  css: ["@/assets/css/tailwind.css"],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
});

完了！！