Nuxt3 + TailwindCSS の始め方

% npx nuxi init my-great-project
% cd my-great-project
% # yarn add -D nuxi
% yarn add -D tailwindcss@latest
% # yarn add -D postcss@latest autoprefixer@latest

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  ...
  css: [
    '@/assets/css/main.css',
  ],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
        },
      },
    },
  },
  ...
})

% yarn run tailwindcss init -f

tailwind.config.js

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

assets/css/main.css

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

@layer base {
    h1 {
        @apply text-2xl;
    }
}

app.vue

<template>
  <div>
    <h1 class="text-blue-500">Hello</h1>
    <NuxtWelcome />
  </div>
</template>

% yarn dev