🕌

Nuxt3にTailwind CSSを導入する手順について

2023/05/10に公開2

はじめに

この記事では、最新のフレームワークであるNuxt3に、人気のCSSフレームワークであるTailwind CSSを簡単に導入する方法を説明します。

Tailwindとは

  • CSSフレームワークの一つ
  • BootstrapなどのCSSフレームワークと比較して、デザインのカスタマイズ性が高い
  • 簡潔な記述が可能であり、プレーンなCSSで記述するよりも迅速に開発できる

Tailwind CSSをインストールする

前提条件として、Nuxt3のプロジェクトが作成され、必要なパッケージのインストールが完了していることを前提とします。
まずはターミナルを開き、Nuxt3プロジェクトのディレクトリに移動します。

cd <Nuxt3プロジェクトの絶対パス>

以下のコマンドを実行します。今回はyarnの使用を前提に進めます。

yarn add tailwindcss postcss autoprefixer --dev

数十秒ほどで処理が完了するので、以下のコマンドを実行します。

npx tailwindcss init

処理が完了すると、以下のようにプロジェクトのルートディレクトリにtailwind.config.jsが生成されているはずです。
tailwind.config.js

Nuxt3プロジェクトに設定を追記する

ルートディレクトリのnuxt.config.jsに以下を追記します。

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

tailwind.config.jsに以下を追記します。

tailwind.config.js
/** @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: [],
};

./assets/css/main.cssを作成します。assetsディレクトリ, cssディレクトリがない場合、新規作成します。assetsディレクトリは必ずルートディレクトリ上に作成します。
main.cssは以下のように記述します。

./assets/css/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

VSCodeで編集する場合は、以下のようになっていることを確認してください。
main.css
これで設定は完了です!

動作確認

App.vueを使って動作確認します。
試しに以下のように書き換えてみてください。

App.vue
<template>
  <div class="w-screen h-screen bg-blue-500 flex justify-center items-center">
    <h1 class="text-3xl text-red-500 font-bold underline">Hello world!</h1>
  </div>
</template>

以下のような表示になっていれば、導入は成功です!

Tailwindの簡単な使い方

既にBootstrapなどのCSSフレームワークを使用した経験がある方には馴染みがあると思いますが、タグのクラス属性にあらかじめ定義されたクラス名を記述することでスタイルが適用されます。
例えば、w-fullはCSSのwidth: 100%を適用するためのクラス名です。
Tailwindはこのようなクラス名が豊富に用意されているCSSフレームワークで、最初は使い方に戸惑うことがあるかもしれませんが、公式ドキュメントにクラス名の説明が詳しく記載されているので、参考にすると良いでしょう。

参考文献

Midman - 技術ブログ

Discussion

JboyHashimotoJboyHashimoto

こちらの記事を参考にしたら、Nuxt3にtailwindcssを導入できました。
記事を書いてくださりありがとうございました!

fumiya_doifumiya_doi

コメントをいただき、ありがとうございます!この記事が少しでもお役に立てたようで嬉しいです!

また何か疑問点や他のテーマについて知りたいことがありましたら、お気軽にコメントしてください。今後ともよろしくお願いいたします。