🎻

Symfony+TwigでTailwind CSS

2024/12/06に公開

PHP

Symfony Advent Calendar 2024 の6日目の記事です！🎄✨

Twitter (X) でもちょいちょいSymfonyネタを呟いてます。よろしければフォローお願いします🤲

`symfonycasts/tailwind-bundle` を使えばOK

あとで付随的なことを色々書きますが、とりあず結論としては symfonycasts/tailwind-bundle を使えばOKです。

ただし、このバンドルは Asset Mapper との併用が前提なので、Webpack Encore を使っているという方は、このドキュメントを参照するか Asset Mapperに乗り換えてください。

$ composer require symfonycasts/tailwind-bundle
$ bin/console tailwind:init

これで、プロジェクトルートに tailwind.config.js が作成され、assets/styles/app.css にお馴染みの @tailwind ディレクティブが書き込まれます。

assets/styles/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

この、Tailwind CSS用の入力CSSファイルを、直接Twigで読み込んでしまえばOKです。

{# templates/base.html.twig #}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}

こう書いておけば、Tailwind CSSでコンパイルした後のCSSファイル（var/tailwind/app.built.css に出力されます）をバンドルが自動で読み込んでくれます。便利ー！

CSSを書いたら

$ bin/console tailwind:build

というコマンドでTailwind CSSのコンパイルを実行できます。

開発中は

bin/console tailwind:build --watch

を起動させておくと楽です。

Symfony Local Web Serverの worker を使って、.symfony.local.yaml に

.symfony.local.yaml

workers:
    tailwind:
        cmd: [symfony, console, tailwind:build, --watch]

のように書いておけば、symfony serve している間裏で勝手に symfony console tailwind:build --watch が起動してくれるのでもっと楽です。

本番用にビルドするときは

$ bin/console tailwind:build --minify
$ bin/console asset-map:compile

って感じにすれば、public/assets/ 配下にTailwind CSSコンパイル後のCSSが適切に配置されます。便利ー！

Functional Testの実行にもコンパイル後のCSSが必要となるので要注意です。

composer.json

{
    "scripts": {
        "test": [
            "bin/console tailwind:build #",
            "@php -c php.ini -d memory_limit=-1 vendor/bin/phpunit"
        ]
    }
}

PhpStormでTailwind CSSの補完が効くようにする

上記のとおり時間を溶かしまくったのですが、PhpStormのTailwind CSSプラグイン（デフォルトで組み込まれていて有効化されている）は node_modules にTailwind CSSがインストールされていることを前提として動作するようなので、TailwindBundle経由でTailwind CSSを利用しているプロジェクトでは補完が効きません。

解決策は簡単で、補完を効かせるためだけに npm i -D tailwindcss して、その上でTailwind CSSプラグインを一度無効化し、再度有効化する ことで補完が効くようになります。

Twigファイル内のクラス属性の内容をPrettierでソートする

実際にコードを書き始めてみると、クラス属性が自動でソートされない中でTailwind CSSを使うことがどれほどストレスフルかを痛感します。

痛感した結果、以下のPrettierプラグインを作りました。Twig + Tailwind CSSをやるなら導入必須だと思います。

以上です。

Symfony Advent Calendar 2024、明日は空きです🥺どなたかぜひご参加ください！

GitHubで編集を提案

symfonycasts/tailwind-bundle を使えばOK

PhpStormでTailwind CSSの補完が効くようにする

Twigファイル内のクラス属性の内容をPrettierでソートする

Discussion

`symfonycasts/tailwind-bundle` を使えばOK