Tailwind CSSでVue 3コンポーネントを作成する

Vueは、汎用性の高いWebインターフェースを構築するための人気のJavaScriptフレームワークです。既存のコードベースに簡単に統合できること、そしてフレームワークが軽量であることが大きな特長で、開発者はフロントエンドプロジェクトにすぐに取り入れることができます。

Vueの中核となるのは、UI Webアプリケーションを構築するためのコンポーザブルなコンポーネントアプローチです。コンポーネントは、アプリケーションを構築する際の部品として使える再利用可能なコードです。Vueのコンポーネントモデルを使えば、ロジック、コンテンツ、スタイルを1か所にまとめた自己完結型のコンポーネントを作成できます。

コンポーネントのスタイル設定には、Tailwind CSSなどのフレームワークを使ってマークアップに直接スタイルを含めることで、コンポーネントをさらにカプセル化できます。Tailwind CSSは、ユーザーインターフェース（UI）要素のスタイル設定に使える再利用可能なクラスを備えたCSSフレームワークです。これらのクラスを使うと、フォント、色、パディング、マージン、アニメーション、トランジションなどのスタイルを適用できます。たとえば、text-black属性を使うと、要素内のテキストがすべて黒で表示されます。これらのクラスは組み合わせて使えるため、自由に組み合わせてデザインを実装できます。

このチュートリアルでは、レスポンシブな記事カードコンポーネントを作成しながら、Tailwind CSSでVue 3コンポーネントを構築する方法を学びます。プロジェクトの全コードはこちらから入手できます。

前提条件

手順を進めるには、以下が必要です。

• 最新バージョンのNode.jsとnpmがインストールされていること

• Visual Studio Code（VS Code）などのテキストエディター

• コマンドラインの知識

• VueとCSSの基本的な知識

Tailwindを使って独自のVue 3コンポーネントを作成する

まず、新しいVue 3プロジェクトを作成します。ターミナルで次のコマンドを実行し、create-vueをインストールして実行します。create-vueは、viteを活用したプロジェクトを構築するための、Vue公式のプロジェクトスキャフォールディングツールです。

1npm init vue@latest

任意の機能を選択するプロンプトが表示されます。プロジェクト名にvue-tailwindcssを指定し、それ以外のオプションはすべてNoを選択します。

1√ Project name: ... vue-tailwindcss
2√ Add TypeScript? ... No / Yes
3√ Add JSX Support? ... No / Yes
4√ Add Vue Router for Single Page Application development? ... No / Yes
5√ Add Pinia for state management? ... No / Yes
6√ Add Vitest for Unit Testing? ... No / Yes
7√ Add an End-to-End Testing Solution? » No
8√ Add ESLint for code quality? ... No / Yes
9√ Add Prettier for code formatting? ... No / Yes

次に、cd vue-tailwindcssを使ってプロジェクトフォルダーに移動し、npm installを実行してnpmからプロジェクトのオープンソース依存関係をインストールします。

npm run devを実行して、開発環境でアプリケーションを起動します。

このコマンドを実行すると、ローカルホストサーバー上でアプリが起動します。

表示されたローカルURLにアクセスして、アプリを確認します。

次に、VueアプリでTailwind CSSをセットアップします。

VueでTailwindをセットアップする方法

まず、ターミナルで次のコマンドを実行します。

1npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

このコマンドは、Tailwind CSSとピア依存関係（autoprefixerおよびpostcss）をnpm経由でインストールします。

次に、以下のコマンドを実行してtailwind.config.jsファイルとpostcss.config.jsファイルを生成します。これらのファイルを使ってTailwindを設定、カスタマイズします。

1npx tailwindcss init -p

このコマンドを実行すると、プロジェクトのルートに次の内容のtailwind.config.jsが作成されます。

1   module.exports = {
2   content: [],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7 }

さらにpostcss.config.jsを作成し、tailwindcssとautoprefixerのプラグインを設定しました。

1  module.exports = {
2   plugins: {
3     tailwindcss: {},
4     autoprefixer: {},
5   },
6 }

tailwind.config.jsでcontent配列を変更し、すべてのページとコンポーネントのパスを含めます。これによりTailwindが最終出力から未使用のCSSクラスを削除し、ファイルサイズを小さくできます。

tailwind.config.jsファイルは、次のようになります。

1  module.exports = {
2   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7  };

次に、プロジェクトのsrcフォルダーにindex.cssという新しいファイルを作成し、以下を追加します。

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

@tailwindディレクティブを使って、Tailwindのベース、コンポーネント、ユーティリティのスタイルをプロジェクトに含めました。後でプロジェクトをビルドすると、Tailwindがこれらのディレクティブを指定したスタイルに自動で置き換えます。

次に、index.cssを./src/main.jsファイルにインポートして使えるようにします。

1import './index.css'

assets/main.cssファイルをインポートする行は削除してください。これにより、通常のCSSを使用しないようにできます。

これで、Tailwindを使ってコンポーネントを作成できます。

Vueコンポーネントの作成方法

VueコンポーネントでTailwindを使う方法を学ぶために、記事用のカードコンポーネントを作成します。

次に、src/componentsフォルダーにArticleCard.vueという新しいファイルを作成し、以下のコードを追加します。

1<template>
2  <div>
3    <div>
4      <img src="../assets/coverimage.jpg" alt="Close-up of code" />
5    </div>
6    <div>
7      <div>Vue</div>
8      <a href="#">Building Vue 3 Components With Tailwind CSS</a>
9      <p>
10        Learn how to create visually stunning Vue components using the popular
11        utility-first CSS framework Tailwind.
12      </p>
13    </div>
14  </div>
15</template>

上記のコードではArticleCardというテンプレートを作成し、画像と記事の概要からなるカードコンポーネントを定義しています。

ブラウザーに表示するには、App.vueファイルの内容をすべて削除してホームページを整理します。次に、App.vueのscriptセクションにArticleCardコンポーネントをインポートします。

1<script setup>
2import ArticleCard from "./components/ArticleCard.vue";
3</script>

次に、テンプレート内で使用します。

1<template>
2  <ArticleCard />
3</template>

次は、Tailwind CSSのユーティリティクラスを使ってカードのスタイルを設定します。

ユーティリティクラスとは

通常のCSSや一部の他のCSSフレームワークでは、カスタムCSSクラスを使ってページ上の要素のスタイルを設定できます。

link-wrapperクラスとlinkクラスを使ってスタイルを設定したリンク要素の例を見てみましょう。

1<template>
2  <div class="link-wrapper">
3    <a href="#" class="link">Building Vue 3 Components With Tailwind CSS</a>
4  </div>
5</template>
6<style>
7.link-wrapper {
8  padding: 8px;
9}
10.link {
11  font-weight: 500;
12  font-size: 1.125rem;
13  line-height: 1.75rem;
14  color: #000;
15}
16</style>

Tailwind CSSを使う理由は何ですか？

この方法の問題は、要素にスタイルを設定するたびに、意味のあるクラス名を考えなければならないことです。また、クラスを再利用するたびに、非常に長く説明的な名前を覚えておく必要があります。さらに、ページに追加するクラス名ごとにスタイルを記述するため、相当量のCSSを書く必要があります。そのため、アプリケーションが大きくなるにつれてCSSファイルも肥大化し、バンドルサイズが増加して読み込み速度が遅くなります。

一方、Tailwind CSSでは、ユーティリティクラスと呼ばれる定義済みのCSSクラスを使えます。ユーティリティクラスには、flex、テキストの配置、ボーダー、マージン、パディング、色など、一般的なスタイル設定が用意されています。これらを使えば、CSSを書かずにページのスタイルを設定できます。

先ほどのリンクの例をTailwind CSSでスタイル設定すると、次のようになります。

1<div class="p-8">
2    <a href="#" class="font-medium text-lg text-black">Vue + TailwindCSS</a>
3</div>

styleオブジェクトとカスタムクラスを、以下のユーティリティクラスに置き換えました。

• p-8はパディングを8pxに設定します。

• font-mediumはフォントの太さを500pxに設定します。

• text-xlはフォントサイズを1.125rem、行の高さを1.75remに設定します。

• text-blackはテキストの色を黒に設定します。

ユーティリティクラスを使うとCSSの量を減らせます。また、スタイルシートを参照しなくても、コードを見る人がスタイル設定の意図を理解しやすくなります。

Tailwindにはさまざまなユーティリティクラスが用意されています。詳しくはユーティリティのドキュメントをご覧ください。

Tailwind CSSでカードコンポーネントのスタイルを設定する

ユーティリティクラスについて理解したところで、カードコンポーネントのスタイルを設定しましょう。

まず、src/components/ArticleCard.vueファイルを変更して、Tailwindのユーティリティクラスを使います。

1<template>
2  <div class="flex max-w-2xl mx-auto bg-white rounded-sm shadow-md">
3    <div>
4      <img
5        class="h-full w-full object-cover"
6        src="../assets/coverimage.jpg"
7        alt="Closeup code"
8      />
9    </div>
10    <div class="p-8">
11      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
12        Vue
13      </div>
14      <a
15        href="#"
16        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
17        >Building Vue 3 Components With Tailwind CSS
18      </a>
19      <p class="mt-2 text-sm text-slate-500">
20        Learn how to create visually stunning Vue components using the popular
21        utility-first CSS framework Tailwind.
22      </p>
23    </div>
24  </div>
25</template>

新しいスタイルを適用すると、カードコンポーネントは次のようになります。

ユーティリティクラスに加え、カードのスタイル設定には修飾子も使いました。<a/>タグのhover:underlineクラスに注目してください。hoverが修飾子です。

Tailwindでは、対象にしたい状態を指定するため、ユーティリティクラス名の先頭に修飾子を付けます。上の例ではホバー状態を対象にしていますが、focus:text-violet-200クラスでフォーカス状態を、active:text-violet-600でアクティブ状態を対象にすることもできます。

対象とする条件に応じて、さまざまなTailwind CSS修飾子を使用できます。すべての修飾子についてはTailwind CSSドキュメントをご覧ください。

ここまでのカードコンポーネントは大きな画面では見栄えがよいものの、画面サイズを小さくすると、次第に窮屈に見えてきます。

画面幅に応じてカードのレイアウトを変更すれば、この問題を解決できます。

Tailwind CSSでブレークポイントを扱う方法

Tailwind CSSでは、ブレークポイントに応じてユーティリティクラスを条件付きで適用できます。デフォルトでは5つのブレークポイントがあり、それぞれ特定の最小幅で適用されます。

• sm — 640px

• md — 768px

• lg — 1024px

• xl — 1280px

• 2xl — 1536px

ブレークポイントを指定するには、ユーティリティクラスの前にブレークポイント名とコロン（:）を付けます。

1breakpoint:utility-class

次のボタンを例に見てみましょう。

1<button class="w-16 md:w-32 lg:w-48">
2  Submit
3</button>

Tailwindは、小さい画面ではw-16クラス、中サイズの画面ではw-32、大きい画面ではw-48を適用します。

ブレークポイントを使えば、メディアクエリを使わずにレイアウト、サイズ、色などのプロパティを変更できます。デフォルトのサイズがデザイン要件に合わない場合は、tailwind.config.jsで画面サイズをカスタマイズすることもできます。

たとえば、次のコードは画面サイズlgの設定を上書きします。

1module.exports = {
2  theme: {
3    extend: {
4      screens: {
5        'lg': '960px',
6      },
7    },
8  },
9}

記事カードコンポーネントでは、ブレークポイントを使ってカードのレイアウトを変更し、画像のサイズを調整します。

変更後のコードを以下に示します。最初の<div/>タグと<img/>タグに注目してください。

1<template>
2  <div
3    class="md:flex md:max-w-2xl max-w-md mx-auto bg-white rounded-sm shadow-md overflow-hidden"
4  >
5    <div>
6      <img
7        class="h-48 w-full object-cover md:h-full"
8        src="../assets/coverimage.jpg"
9        alt="Closeup code"
10      />
11    </div>
12    <div class="p-8">
13      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
14        Vue
15      </div>
16      <a
17        href="#"
18        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
19        >Building Vue 3 Components With Tailwind CSS</a
20      >
21      <p class="mt-2 text-sm text-slate-500">
22        Learn how to create visually stunning Vue components using the popular
23        utility-first CSS framework Tailwind.
24      </p>
25    </div>
26  </div>
27</template>

変更点は次のとおりです。

• md:flexとmd:max-w-2xlの修飾子により、中サイズ以上の画面ではカードコンポーネントが最大幅48remのフレックスコンテナになります。小さい画面ではmax-w-mdクラスによって、幅が28remに設定されます。

• <img/>要素では、md:h-fullによって中サイズ以上の画面で画像を高さ全体に表示し、h-48クラスによって小さい画面で高さを12remに設定します。

小さい画面では、作成したコンポーネントは次のように表示されます。

これで完了です。Tailwind CSSを使ってVueコンポーネントを構築できるようになりました。

Vueアプリケーションを作成したら、Snykによるセキュリティ更新を自動適用しながらNetlifyにデプロイする方法を学びましょう。無料アカウントを作成してプロジェクトをSnykにインポートすれば、依存関係に潜む脆弱性を見つけて修正し、XSSなどのセキュリティ脅威からアプリケーションを保護できます。

まとめ

このチュートリアルでは、Tailwind CSSを使ってVue 3コンポーネントを構築する方法を紹介しました。Tailwind CSSはユーティリティファーストのフレームワークで、UIコンポーネントを効率的かつスムーズに構築できます。ユーティリティクラスを使えば、外部スタイルシートを参照したり、何十ものクラス名を覚えたりすることなく、レスポンシブなデザインを作成できます。また、デフォルトのクラスをカスタマイズして独自のデザインシステムを作成できます。さらに、本番ビルドでは未使用のクラスがすべて自動的に削除されるため、最終成果物に含めるコード量を抑えられます。