# はじめに

## インストール

```bash
composer require tailwindphp/tailwindphp
```

TailwindPHPにはPHP 8.2以降、`ctype`と`mbstring`拡張機能、およびComposerが必要です。これらの拡張機能はほとんどのPHPビルドと公式Dockerイメージに含まれていますが、`composer.json`にはまだ記載されていません（[#11](https://github.com/inline0/tailwindphp/issues/11)）。そのため、拡張機能なしでビルドすると、パッケージのインストール後に実行時エラーが発生します。Node.js依存関係もビルド工程も不要で、DockerイメージやCIにnpmを追加する必要もありません。`composer require`してAPIを呼び出すだけです。

## 最初のCSSを生成する

```php
<?php

require __DIR__ . '/vendor/autoload.php';

use TailwindPHP\tw;

$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
```

`generate()`はマークアップをスキャンしてクラス名を抽出し、それらのクラスに必要なCSSだけを出力します。第2引数を省略すると、theme、[Preflight](https://tailwindphp.inline0.dev/ja/docs/usage/imports)、utilitiesレイヤーを取り込む既定の`@import "tailwindcss"`が使われます。

## CSS文字列によるカスタマイズ

入力CSS文字列を第2引数に渡すと、`@theme`変数、カスタムルール、ディレクティブを追加できます。新しいtheme値は自動的にユーティリティになります。

```php
use TailwindPHP\tw;

$css = tw::generate(
    '<div class="bg-brand p-4">Hello</div>',
    '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }'
);
// .bg-brand now resolves to var(--color-brand)
```

themeの名前空間一覧は[Theme](https://tailwindphp.inline0.dev/ja/docs/usage/theme)を参照してください。

## 配列入力

1行を超える内容には、`content`キーと`css`キーを含む配列を渡します。`@apply`を使ったコンポーネント定義にも使用できます。

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4 btn">Hello</div>',
    'css' => '
        @import "tailwindcss";

        @theme {
            --color-brand: #3b82f6;
            --font-heading: "Inter", sans-serif;
        }

        .btn {
            @apply px-4 py-2 rounded-lg bg-brand text-white;
        }
    ',
]);
```

配列形式では、`minify`、`importPaths`、`cache`、`cacheTtl`も使用できます。入力形式については[使い方](https://tailwindphp.inline0.dev/ja/docs/usage)を、`@apply`、`@theme`、`@utility`などについては[ディレクティブ](https://tailwindphp.inline0.dev/ja/docs/usage/directives)をご覧ください。

## ファイルに書き込む

`generate()`は文字列を返すため、スタイルシートの書き込みは1行でできます。

```php
use TailwindPHP\tw;

file_put_contents('dist/styles.css', tw::generate([
    'content' => file_get_contents('templates/page.html'),
    'css' => '@import "tailwindcss";',
]));
```

テンプレートディレクトリをスキャンするファイルベースのビルドやウォッチモードには、代わりに[CLI](https://tailwindphp.inline0.dev/ja/docs/cli)を使ってください。`@tailwindcss/cli`ビルドオプションを利用できますが、現時点ではTailwindとは異なるコンテンツスキャンを行います。スキャン対象はCLIページを参照してください。

## 本番用に圧縮する

生成時に出力を圧縮するには`minify => true`を渡すか、既存の文字列に`tw::minify()`を呼び出します。

```php
use TailwindPHP\tw;

// Minify during generation
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'minify' => true,
]);

// Or minify separately
$css = tw::generate('<div class="flex p-4">Hello</div>');
$minified = tw::minify($css);
```

圧縮処理ではコメントを削除し、空白をまとめ、16進カラー（`#ffffff`から`#fff`）を短縮し、ゼロ値の単位（`0px`から`0`）を削除します。キャッシュの設定については[キャッシュと圧縮](https://tailwindphp.inline0.dev/ja/docs/advanced/caching)を参照してください。

## 次のステップ

- [使い方](https://tailwindphp.inline0.dev/ja/docs/usage) — generateの手順、コンテンツスキャン、入力形式。
- [クラスユーティリティ](https://tailwindphp.inline0.dev/ja/docs/class-utilities) — `cn()`、`merge()`、`join()`、`variants()`。
- [プラグイン](https://tailwindphp.inline0.dev/ja/docs/plugins) — タイポグラフィ、フォーム、カスタムプラグイン。
- [API](https://tailwindphp.inline0.dev/ja/docs/api) — `tw`機能の全容と再利用可能なコンパイラーインスタンス。
- [CLI](https://tailwindphp.inline0.dev/ja/docs/cli) — Node.jsなしで行うファイルベースのビルドとウォッチビルド。