🐸

Nuxt3 × Tailwind CSS ×ElementPlus

2025/05/05に公開

Nuxt3環境にTailwind CSSとElementPlusを導入する

はじめに

Nuxt3環境はすでに構築済みという前提で進めます。
※まだの方は導入をお願いします。

導入手順

Nuxtでは公式のTailwind CSSモジュール（@nuxtjs/tailwindcss）が提供されており、
簡単に導入できます。
https://nuxt.com/modules/tailwindcss

1.インストール

npx nuxi@latest module add tailwindcss

2.nuxt.config.tsのmodulesに'@nuxtjs/tailwindcss'が追加されているか確認

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss']
})

これだけで設定は完了です。
このモジュールをインストールしていれば
./assets/css/tailwind.css や ./tailwind.config.js がなくても自動で最低限の設定を生成してくれます。
ご自身で設定を行いたい場合は適宜作成して設定を行ってください。

Styleがあたるか確認してみます。

<template>
  <div>
    <h1 class="text-6xl font-bold text-red-700">Nuxt + Tailwind</h1>
  </div>
</template>

反映されていることが確認できました🎊

次にElementPlusを導入しこうします。
こちらもNuxt公式からモジュールが提供されています。
https://nuxt.com/modules/element-plus

公式はこちら
https://element-plus.org/en-US/

1.インストール

npx nuxi@latest module add element-plus

2.nuxt.config.tsのmodulesに"@element-plus/nuxt"が追加されているか確認

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', '@element-plus/nuxt']
})

ElementPlusのボタンを使用してみます。

<template>
  <div>
    <h1 class="text-6xl font-bold text-red-700">Nuxt + Tailwind</h1>
    <el-button type="primary">ボタン</el-button>
  </div>
</template>

ボタンが表示されています。

まとめ

Nuxt3 における UI 開発では、Tailwind CSS の柔軟性と Element Plus の即戦力なコンポーネントを組み合わせることで、スピーディかつ一貫した開発が可能です。

Tailwind CSS は、細かくカスタマイズしたデザインに。
Element Plus は、フォームやテーブルなど、すぐに使いたい複雑なUIに。

両者を併用すれば、開発効率とデザインの統一性の両方を確保できます。

Nuxt3環境にTailwind CSSとElementPlusを導入する

はじめに

導入手順

まとめ

Discussion