CSS - Tailwindのソースを表示

== 概要 ==
Tailwind CSSは、ユーティリティファーストのCSSフレームワークである。<br>
<br>
従来のCSSフレームワークとは異なり、事前に定義されたコンポーネント (ボタンやカード等) を提供するのではなく、<br>
低レベルのユーティリティクラスを組み合わせてカスタムデザインを構築する方式を採用している。<br>
<br>
Tailwindの最大の特徴は、HTMLファイルやJavaScriptコンポーネント、その他のテンプレートファイルをスキャンして使用されているクラス名を検出して、<br>
それに対応するスタイルのみを生成して静的CSSファイルに書き出すという点である。<br>
<br>
これにより、高速で柔軟性が高く、信頼性のある開発が可能になる。<br>
また、ランタイムでの処理が一切不要なため、パフォーマンスにも優れている。<br>
<br><br>

== 動作の仕組み ==
Tailwind CSSは次のような流れで動作する。<br>
<br>
# まず、プロジェクト内の全てのHTMLファイル、JavaScriptコンポーネント、テンプレートファイルをスキャンする。
# 次に、これらのファイル内で使用されているTailwindのクラス名を検出する。
# そして、検出されたクラスに対応するCSSスタイルのみを生成し、最終的にそれらを静的なCSSファイルとしてまとめる。
<br>
この方式により、実際に使用されているスタイルだけが含まれた軽量なCSSファイルが生成される。<br>
<br><br>

== インストール方法 ==
Tailwind CSSを使用する最も簡単な方法は、Tailwind CLIツールを使用することである。<br>
CLIツールは、Node.jsをインストールせずに使用できるスタンドアロン実行可能ファイルとしても提供されている。<br>
<br>
==== 必要な環境 ====
基本的には、npmが使用できる環境が推奨される。<br>
Node.jsがインストールされていれば、npmも利用可能となる。<br>
<br>
==== インストール手順 ====
まず、npmを使用してTailwind CSSとCLIツールをインストールする。<br>
<br>
プロジェクトのルートディレクトリで以下に示すコマンドを実行する。<br>
 <syntaxhighlight lang="bash">
 npm install tailwindcss @tailwindcss/cli
 </syntaxhighlight>
<br>
このコマンドにより、Tailwind CSS本体とCLIツールがプロジェクトにインストールされる。<br>
<br>
次に、メインとなるCSSファイルにTailwindのインポート文を追加する。<br>
一般的に、このファイルは <code>input.css</code> や <code>styles.css</code> 等のファイル名で、プロジェクトのソースディレクトリに配置される。<br>
 <syntaxhighlight lang="css">
 @import "tailwindcss";
 </syntaxhighlight>
<br>
これにより、Tailwindの全てのユーティリティクラスが利用可能になる。<br>
<br><br>

== 使用方法 ==
==== CSSのビルド ====
Tailwind CSSを使用するには、CLIツールを実行してソースファイルをスキャンし、CSSをビルドする必要がある。<br>
 <syntaxhighlight lang="bash">
 npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
 </syntaxhighlight>
<br>
コマンドの各オプションの説明を以下に示す。<br>
* <code>-i</code> オプション
*: 入力ファイル (先ほど <code>@import</code> を追加したCSSファイル) を指定する。
* <code>-o</code>オプション
*: 出力ファイル (ビルドされたCSSが書き出される場所) を指定する。
* <code>--watch</code>オプション
*: ファイルの変更を監視して、自動的に再ビルドが行われるようになる。
<br>
これにより、開発中に変更がすぐに反映されるため、開発効率が大幅に向上する。<br>
<br>
==== HTMLでの使用 ====
ビルドされたCSSファイルをHTMLの <code><head></code> セクション内でリンクする。<br>
次に、Tailwindのユーティリティクラスを使用してコンテンツをスタイリングする。<br>
 <syntaxhighlight lang="html">
 <!doctype html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="./output.css" rel="stylesheet">
 </head>
 <body>
   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>
 </body>
 </html>
 </syntaxhighlight>
<br>
この例では、<code>text-3xl</code>でテキストサイズを大きく、<code>font-bold</code>で太字、<code>underline</code>で下線を付けています。このように、複数のユーティリティクラスを組み合わせることで、カスタムCSSを書かずに様々なスタイルを実現できます。
<br><br>

== ユーティリティクラスの例 ==
Tailwindは数多くのユーティリティクラスを提供している。<br>
<br>
以下に、いくつか代表的なものを記載する。<br>
* テキストに関するクラス
** <code>text-sm</code>
** <code>text-base</code>
** <code>text-lg</code>
** <code>text-xl</code>
**: サイズ指定クラス
*: <br>
* 色
** <code>text-blue-500</code>
** <code>bg-red-600</code>
**: プロパティ、色、濃淡を組み合わせて指定する。
*: <br>
* 余白
** <code>m-4</code>
**: マージン
**: 数字が大きくなるほど余白も大きくなる。
** <code>p-4</code>
**: パディング
**: 数字が大きくなるほど余白も大きくなる。
*: <br>
* レイアウト
** <code>flex</code>
** <code>grid</code>
** <code>block</code>
**: ディスプレイプロパティ
** <code>justify-center</code>
** <code>items-center</code>
**: 配置のクラス
<br><br>

== 開発のワークフロー ==
# まず、CLIツールを <code>--watch</code> オプションを付加して起動する。
# 次に、HTMLファイルを編集してTailwindのクラスを追加または変更する。
# CLIツールが変更を検知して自動的にCSSを再ビルドされる。
# Webブラウザでページをリロードすれば、すぐに変更が反映される。
<br>
また、プロダクション環境へのデプロイ前には、<code>--watch</code> オプションを外して1度だけビルドを実行することにより、最適化されたCSSファイルを生成することができる。<br>
<br><br>

== 参考リンク ==
* [https://tailwindcss.com/ Tailwind CSS 公式サイト]
* [https://tailwindcss.com/docs Tailwind CSS ドキュメント]
* [https://tailwindcss.com/docs/installation/tailwind-cli Tailwind CLI インストールガイド]
<br><br>


__FORCETOC__
[[カテゴリ:Web]]