📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
ページの作成:「== 概要 == Tailwind CSSは、ユーティリティファーストのCSSフレームワークである。<br> <br> 従来のCSSフレームワークとは異なり、事前に定義されたコンポーネント (ボタンやカード等) を提供するのではなく、<br> 低レベルのユーティリティクラスを組み合わせてカスタムデザインを構築する方式を採用している。<br> <br> Tailwindの最大の特徴は、HTMLファイ…」 |
編集の要約なし |
||
| 23行目: | 23行目: | ||
== インストール方法 == | == インストール方法 == | ||
Tailwind | Tailwind CSSをインストールする方法は、主に2つ存在する。<br> | ||
CLIツールは、Node.jsをインストールせずに使用できるスタンドアロン実行可能ファイルとしても提供されている。<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> | <br> | ||
==== 必要な環境 ==== | ==== 必要な環境 ==== | ||
| 47行目: | 53行目: | ||
<br> | <br> | ||
これにより、Tailwindの全てのユーティリティクラスが利用可能になる。<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> | <br><br> | ||
| 135行目: | 216行目: | ||
* [https://tailwindcss.com/docs Tailwind CSS ドキュメント] | * [https://tailwindcss.com/docs Tailwind CSS ドキュメント] | ||
* [https://tailwindcss.com/docs/installation/tailwind-cli Tailwind CLI インストールガイド] | * [https://tailwindcss.com/docs/installation/tailwind-cli Tailwind CLI インストールガイド] | ||
* [https://tailwindcss.com/docs/installation/using-vite Vite使用時のインストールガイド] | |||
<br><br> | <br><br> | ||