【Nuxt.js 3 × Tailwind CSS】Nuxt.js 3にTailwind CSSを導入する手順
はじめに
今回は、Nuxt.js 3にTailwind CSSを導入する手順を紹介します。
フレームワークと相性の良いTailwind CSS。ぜひお試しください！
各バージョンまとめ
今回使用しているバージョン情報を以下に記載しておきます。
- nuxt: ^3.6.5
- tailwindcss: ^3.3.3
- postcss: ^8.4.27
- autoprefixer: ^10.4.15
- typescript: ^5.1.6
導入手順
それではNuxt.js 3プロジェクトにTailwind CSSを導入する手順を紹介していきます。
Tailwind CSSをNuxt 3プロジェクトにインストールする
対象のプロジェクトディレクトリ内で、以下のコマンドを実行してTailwind CSSをインストールします。
npm install -D tailwindcss postcss autoprefixer
「tailwind.config.ts」ファイルは後ほど作成・編集しますが、このタイミングで以下のコマンドを使用して生成しておいても良いです。
npx tailwindcss init
nuxt.config.tsを編集する
nuxt.config.tsファイルに以下の記述を追記します。
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ //↓これを追記する css: ['~/assets/css/tailwind.css'], //このCSSファイルは後ほど作成する postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, //↑これを追記する //省略 })
Tailwindのファイルを作成する
以下の２つのファイルを作成します。
- ./assets/css/tailwind.css
- ./tailwind.config.ts
それではそれぞれに記載する内容を見てみましょう。
tailwind.cssには以下のように記述をします。
@tailwind base; @tailwind components; @tailwind utilities;
tailwind.config.tsには以下のように記述をします。
/** @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: [], }
オプションは必要なものを適宜追加してください。
こちらでTailwind CSSの設定は以上になります。
Tailwind CSSが適用されているか確認してみる
ローカルサーバーを立ち上げて、実際にTailwind CSSが適用できているのか確認をしてみます。
確認するページはどこでも構いませんが、私は以下のように確認用のコンポーネントを用意しました。
/componentsディレクトリ内に「TailwindTest.vue」ファイルを作成して、/pagesディレクトリ内の「index.vue」で表示を確認しました。
TailwindTest.vue
<script setup lang="ts"> //省略 </script> <template> <div> <p class="text-blue-400">Tailwind CSSを適用できました！</p> </div> </template>
無事にTailwind CSSが適用されていれば、文字色が青色になっているかと思います。
classに「text-blue-400」を使用することでテキストの文字色を青色にしています。
その他のTailwind CSSが気になる方は、以下のチートシートを確認してみてください。
まとめ
今回は、Nuxt.js 3のプロジェクトにTailwind CSSを導入する方法を紹介しました。
簡単に導入することができて、クラス名を覚えるのも個人的には直感的でそこまで難しくないと思ったのでぜひお試しください！
執筆者：Nobu
1994年生まれ。
Webフロントエンドエンジニアは3年目。
コーヒーと読書が好きです。主にコーヒー豆の紹介や読んだ本の紹介をしていこうと思います。
