TailwindCSSとは

Tailwind CSSとは、CSSのフレームワークで、Webデザインを簡単に整えることができるツールです。

普通のCSSでは、スタイルを適用するためにたくさんのコードを書かなければなりませんが、Tailwind CSSを使うと、あらかじめ用意されたクラスを使って簡単にデザインを適用できます。

そのため、CSSを記述するファイルを特別用意しなくても、HTMLの記述で完結させることができます。

例をいくつか挙げてみます。例えば、ボタンの色を赤にしたいとしましょう。通常であれば以下のように記述します。

<button class="btn">ボタン</button>

<style>
    .btn {
        color: red;
    }
</style>

しかし、Tailwind CSSを使うと以下のように簡単に記述できます。

<button className="color-red-500">

これはTailwind CSSがあらかじめ用意しているクラスを指定することで、ボタンの色が赤になります。

他には以下のような記述方法があります。

<button className="m-5 p-5 text-center border bg-gray-300">ボタン</button>

これらは一例ではありますが、mはマージン、pはパディング、text-centerは文字の中央寄せ、borderはボーダーの追加、bgはバックグラウンドカラーです。

他のクラスについては公式ドキュメントをご覧下さい。

このように、Tailwind CSSを使うと簡潔にスタイルを適用できるので、デザイン作業が効率化されます。

実装手順

次に実際にTailwindCSSを使って実装する方法を紹介します。

開発フローは以下の通りです。

それぞれ解説します。

TailwindCSSを設定する

まず、プロジェクトのルートディレクトリで以下のコマンドを実行して、TailwindCSSをインストールします。

npm install tailwindcss

これでTailwindCSSがインストールされます。続いて、TailwindCSSの設定ファイルを作成します。以下のコマンドを実行してください。

npx tailwindcss init

これで、プロジェクトのルートにtailwind.config.jsという設定ファイルが生成されます。

次に、全ファイルで適用されるCSSファイルに以下の内容を追加します。このステップが必要であり、これをインポートしないとTailwindCSSは機能しません。

例えば、Next.jsプロジェクトではglobals.cssに次の内容を記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

ここまで設定すれば、TailwindCSSが使用できるようになります。

テンプレートを選ぶ

TailwindCSSにはテンプレートが公開されており、それらを使用することでコードを書かずとも簡単にデザインを実装することができます。

今回は例として以下のサイトを紹介します。

それぞれ解説します。

Tailwind UI

まずはTailwind UIについて紹介します。

Tailwind UIとは、筆者がよく使っているサイトで、有料ではありますが大変便利なツールです。

Tailwind UIは主にReactやNext.js、Vue.jsやNuxt.jsに対応しており、不便なく使用することができます。

Preline UI

続いて紹介するのはPreline UIです。こちらは無料で利用できるツールです。

Preline UIも基本的にはTailwind UIと同じで、各フレームワークに対応しています。ただし少し問題点があり、Reactではクラスを定義する際にclassではなくclassNameを使用する必要がありますが、Preline UIではすべてclassで書かれているため、すべてclassNameに書き換える必要があります。それを除けば、大変便利なツールです。

Preline UIを使用する場合は前述したコマンドに加えて、ルートディレクトで以下のコマンドも実行しましょう。

npm install @preline/ui

これによりPreline UIがインストールされ、使用可能になります。

コピペする

次の手順として、上記のサイトで見つけたサンプルのソースコードをコピペします。

実装したいWebデザインに近いサンプルのソースコードをコピペするだけで、サンプルと同じデザインが完成します。

カスタマイズする

テンプレートをコピペしたら、必要に応じてカスタマイズします。例えば、ヘッダーのリンクを適切なものに変更したり、色を変更したり、足りなければ要素を追加するなどを行います。

基本的にはコードの一貫性を保つために、Tailwind CSSを使ってデザインを整えることが望ましいですが、微調整が必要な場合は、CSSを併用するのが良いです。Tailwind CSSで大まかなデザインを整えた後に、CSSで微調整を行うと効率的です。

もちろん、普通のクラスも使用することができるので、Tailwind CSSのクラスに加えてカスタムクラスをつけ、CSSでカスタマイズすることも可能です。以下に例を示します。

<button className="btn p-5 mt-5">ボタン</button>

<style>
    .btn {
        color: red;
    }
</style>

このように、Tailwind CSSとCSSを組み合わせて使用することができます。

最後に

最後に、ここまでTailwind CSSとテンプレートを使用して、簡単にWebデザインを整える方法について紹介しました。

この方法を使うことで、Webデザインに時間を費やすことなくアプリケーションを実装できるため、開発効率が非常に上がります。

ぜひこの方法を利用して、ユーザーフレンドリーで便利なアプリケーションを開発してみてください。

ここまでお読みいただきありがとうございました。