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をインストールする方法は、主に2つ存在する。<br>
<br>
1つ目は、Tailwind CLIツールを使用する方法である。これは最もシンプルで高速にTailwind CSSを導入できる方法となる。<br>
2つ目は、Viteプラグインを使用する方法である。これは、Laravel、SvelteKit、React Router、Nuxt、SolidJS等のフレームワークと統合する際に最もシームレスな方法となる。<br>
<br>

=== Tailwind CLIを使用する方法 ===
Tailwind 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>

=== Viteを使用する方法 ===
ViteプラグインとしてTailwind CSSをインストールすることで、モダンなフレームワークとの統合が非常にスムーズになる。<br>
この方法は、React、Vue、Svelte等のフレームワークを使用したプロジェクトに特に適している。<br>
<br>
==== Viteプロジェクトの作成 ====
まだViteプロジェクトが存在しない場合は、新規にViteプロジェクトを作成する。<br>
最も一般的な方法は、Create Viteを使用することである。<br>
 <syntaxhighlight lang="bash">
 npm create vite@latest my-project
 cd my-project
 </syntaxhighlight>
<br>
このコマンドにより、対話形式でフレームワーク (React、Vue、Svelte等) を選択し、新しいViteプロジェクトが作成される。<br>
<br>
==== インストール手順 ====
npmを使用してTailwind CSSとViteプラグインをインストールする。<br>
 <syntaxhighlight lang="bash">
 npm install tailwindcss @tailwindcss/vite
 </syntaxhighlight>
<br>
このコマンドにより、Tailwind CSS本体とVite用のプラグインがインストールされる。<br>
<br>
==== Vite設定ファイルの編集 ====
プロジェクトのルートディレクトリにある <code>vite.config.js</code> (または <code>vite.config.ts</code>) ファイルに、Tailwindプラグインを追加する。<br>
 <syntaxhighlight lang="javascript">
 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   plugins: [
     tailwindcss(),
   ],
 })
 </syntaxhighlight>
<br>
既にReactやVue等のプラグインが設定されている場合は、<code>plugins</code> 配列に <code>tailwindcss()</code> を追加する形になる。<br>
<br>
==== CSSファイルへのインポート ====
プロジェクトのメインCSSファイル (通常は <code>src/style.css</code> や <code>src/index.css</code>) に、Tailwindのインポート文を追加する。<br>
 <syntaxhighlight lang="css">
 @import "tailwindcss";
 </syntaxhighlight>
<br>
これにより、Tailwindの全てのユーティリティクラスが利用可能になる。<br>
<br>
==== 開発サーバーの起動 ====
<code>package.json</code> に設定されているコマンドを使用して、開発サーバーを起動する。<br>
通常は以下のコマンドとなる。<br>
 <syntaxhighlight lang="bash">
 npm run dev
 </syntaxhighlight>
<br>
Viteの開発サーバーが起動し、ホットリロード機能により、コードの変更が即座にブラウザに反映されるようになる。<br>
<br>
==== HTMLでの使用 ====
コンパイルされたCSSが <code><head></code> に含まれていることを確認する。<br>
多くのフレームワークでは、これは自動的に処理される。<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="/src/style.css" rel="stylesheet">
 </head>
 <body>
   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>
 </body>
 </html>
 </syntaxhighlight>
<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 インストールガイド]
* [https://tailwindcss.com/docs/installation/using-vite Vite使用時のインストールガイド]
<br><br>


__FORCETOC__
[[カテゴリ:Web]]