Nuxt で Tailwind CSS をインストール

Nuxt プロジェクトに Tailwind CSS をセットアップする。

プロジェクトを作成する

まだプロジェクトをセットアップしていない場合は、新しい Nuxt プロジェクトを作成することから始めます。最も一般的なアプローチは、Nuxt コマンドラインインターフェースを使用することです。

ターミナル

npx nuxi init my-project
cd my-project

Tailwind CSS をインストール

@tailwindcss/vite とそのピア依存関係を npm 経由でインストールします。

ターミナル

npm install tailwindcss @tailwindcss/vite

Vite プラグインを設定する

@tailwindcss/vite プラグインを Vite プラグインとして Nuxt 設定に追加します。

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

Tailwind CSS をインポート

./assets/css/main.css ファイルを作成し、Tailwind CSS をインポートする @import を追加します。

main.css

@import "tailwindcss";

CSS ファイルをグローバルに追加する

新しく作成した ./assets/css/main.css を nuxt.config.ts ファイルの css 配列に追加します。 nuxt.config.ts ファイル。

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

ビルドプロセスを開始する

npm run dev でビルドプロセスを実行します。

ターミナル

npm run dev

プロジェクトで Tailwind の使用を開始する

Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

app.vue

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>