Nuxt.jsでTailwindCSSを使用する際の設定

ディレクトリ構成

TailwindCSSのインストール

npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest`

tailwind.config.jsの生成

npx tailwindcss init`

./tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  purge: ["./components/*.{vue,js}", "./app.vue", "./nuxt.config.{js,ts}"],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
  mode: "jit",
};

./nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

./assets/css/main.css

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