Nuxt.js3にTailwind CSSを導入する方法

1. 必要なパッケージをインストールします。

yarn add -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

2. nuxt.config.tsファイルを開き、以下のように設定を追加します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  // 他の設定...
})

3. プロジェクトのルートディレクトリにtailwind.config.jsファイルを作成し、以下の内容を追加します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. assetsディレクトリにcssフォルダを作成し、その中にmain.cssファイルを作成します。このファイルに以下の内容を追加します。

assets/main.css

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

/* カスタムスタイルをここに追加 */

5. nuxt.config.tsファイルに、このmain.cssファイルを読み込む設定を追加します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  css: ['~/assets/css/main.css'],
  // 他の設定...
})

6. これで、Nuxt.js 3プロジェクトにTailwind CSSが導入されました。Tailwindのクラスを使用してスタイリングを行うことができます。