CSS - Tailwind

提供: MochiuWiki : SUSE, EC, PCB

概要

Tailwind CSSは、ユーティリティファーストのCSSフレームワークである。

従来のCSSフレームワークとは異なり、事前に定義されたコンポーネント (ボタンやカード等) を提供するのではなく、
低レベルのユーティリティクラスを組み合わせてカスタムデザインを構築する方式を採用している。

Tailwindの最大の特徴は、HTMLファイルやJavaScriptコンポーネント、その他のテンプレートファイルをスキャンして使用されているクラス名を検出して、
それに対応するスタイルのみを生成して静的CSSファイルに書き出すという点である。

これにより、高速で柔軟性が高く、信頼性のある開発が可能になる。
また、ランタイムでの処理が一切不要なため、パフォーマンスにも優れている。


動作の仕組み

Tailwind CSSは次のような流れで動作する。

  1. まず、プロジェクト内の全てのHTMLファイル、JavaScriptコンポーネント、テンプレートファイルをスキャンする。
  2. 次に、これらのファイル内で使用されているTailwindのクラス名を検出する。
  3. そして、検出されたクラスに対応するCSSスタイルのみを生成し、最終的にそれらを静的なCSSファイルとしてまとめる。


この方式により、実際に使用されているスタイルだけが含まれた軽量なCSSファイルが生成される。


インストール方法

Tailwind CSSをインストールする方法は、主に2つ存在する。

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

Tailwind CLIを使用する方法

Tailwind CLIツールは、Node.jsをインストールせずに使用できるスタンドアロン実行可能ファイルとしても提供されている。

必要な環境

基本的には、npmが使用できる環境が推奨される。
Node.jsがインストールされていれば、npmも利用可能となる。

インストール手順

まず、npmを使用してTailwind CSSとCLIツールをインストールする。

プロジェクトのルートディレクトリで以下に示すコマンドを実行する。

 npm install tailwindcss @tailwindcss/cli


このコマンドにより、Tailwind CSS本体とCLIツールがプロジェクトにインストールされる。

次に、メインとなるCSSファイルにTailwindのインポート文を追加する。
一般的に、このファイルは input.css や styles.css 等のファイル名で、プロジェクトのソースディレクトリに配置される。

 @import "tailwindcss";


これにより、Tailwindの全てのユーティリティクラスが利用可能になる。


Viteを使用する方法

ViteプラグインとしてTailwind CSSをインストールすることで、モダンなフレームワークとの統合が非常にスムーズになる。
この方法は、React、Vue、Svelte等のフレームワークを使用したプロジェクトに特に適している。

Viteプロジェクトの作成

まだViteプロジェクトが存在しない場合は、新規にViteプロジェクトを作成する。
最も一般的な方法は、Create Viteを使用することである。

 npm create vite@latest my-project
 cd my-project


このコマンドにより、対話形式でフレームワーク (React、Vue、Svelte等) を選択し、新しいViteプロジェクトが作成される。

インストール手順

npmを使用してTailwind CSSとViteプラグインをインストールする。

 npm install tailwindcss @tailwindcss/vite


このコマンドにより、Tailwind CSS本体とVite用のプラグインがインストールされる。

Vite設定ファイルの編集

プロジェクトのルートディレクトリにある vite.config.js (または vite.config.ts) ファイルに、Tailwindプラグインを追加する。

 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   plugins: [
     tailwindcss(),
   ],
 })


既にReactやVue等のプラグインが設定されている場合は、plugins 配列に tailwindcss() を追加する形になる。

CSSファイルへのインポート

プロジェクトのメインCSSファイル (通常は src/style.css や src/index.css) に、Tailwindのインポート文を追加する。

 @import "tailwindcss";


これにより、Tailwindの全てのユーティリティクラスが利用可能になる。

開発サーバーの起動

package.json に設定されているコマンドを使用して、開発サーバーを起動する。
通常は以下のコマンドとなる。

 npm run dev


Viteの開発サーバーが起動し、ホットリロード機能により、コードの変更が即座にブラウザに反映されるようになる。

HTMLでの使用

コンパイルされたCSSが <head> に含まれていることを確認する。
多くのフレームワークでは、これは自動的に処理される。
その後、Tailwindのユーティリティクラスを使用してコンテンツをスタイリングできる。

 <!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>



使用方法

CSSのビルド

Tailwind CSSを使用するには、CLIツールを実行してソースファイルをスキャンし、CSSをビルドする必要がある。

 npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch


コマンドの各オプションの説明を以下に示す。

  • -i オプション
    入力ファイル (先ほど @import を追加したCSSファイル) を指定する。
  • -oオプション
    出力ファイル (ビルドされたCSSが書き出される場所) を指定する。
  • --watchオプション
    ファイルの変更を監視して、自動的に再ビルドが行われるようになる。


これにより、開発中に変更がすぐに反映されるため、開発効率が大幅に向上する。

HTMLでの使用

ビルドされたCSSファイルをHTMLの <head> セクション内でリンクする。
次に、Tailwindのユーティリティクラスを使用してコンテンツをスタイリングする。

 <!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>


この例では、text-3xlでテキストサイズを大きく、font-boldで太字、underlineで下線を付けています。このように、複数のユーティリティクラスを組み合わせることで、カスタムCSSを書かずに様々なスタイルを実現できます。

ユーティリティクラスの例

Tailwindは数多くのユーティリティクラスを提供している。

以下に、いくつか代表的なものを記載する。

  • テキストに関するクラス
    • text-sm
    • text-base
    • text-lg
    • text-xl
      サイズ指定クラス

  • 色
    • text-blue-500
    • bg-red-600
      プロパティ、色、濃淡を組み合わせて指定する。

  • 余白
    • m-4
      マージン
      数字が大きくなるほど余白も大きくなる。
    • p-4
      パディング
      数字が大きくなるほど余白も大きくなる。

  • レイアウト
    • flex
    • grid
    • block
      ディスプレイプロパティ
    • justify-center
    • items-center
      配置のクラス



開発のワークフロー

  1. まず、CLIツールを --watch オプションを付加して起動する。
  2. 次に、HTMLファイルを編集してTailwindのクラスを追加または変更する。
  3. CLIツールが変更を検知して自動的にCSSを再ビルドされる。
  4. Webブラウザでページをリロードすれば、すぐに変更が反映される。


また、プロダクション環境へのデプロイ前には、--watch オプションを外して1度だけビルドを実行することにより、最適化されたCSSファイルを生成することができる。


参考リンク



「https://mochiu.net/index.php?title=CSS_-_Tailwind&oldid=13469」から取得