Symfony で Tailwind CSS をインストール

Symfony プロジェクトでの Tailwind CSS のセットアップ。

プロジェクトを作成する

まだ設定していない場合は、新しい Symfony プロジェクトを作成することから始めます。最も一般的な方法は、以下を使用することです。 Symfony インストーラー.

ターミナル

symfony new --webapp my-project
cd my-project

Webpack Encore をインストールする

Webpack Encore をインストールします。これはアセットのビルドを処理します。以下を参照してください。詳細についてはドキュメントをご覧ください。

ターミナル

composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle
composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle

Tailwind CSS をインストールする

npm を使用して、@tailwindcss/postcss とそのピア依存関係、および以下をインストールします。 postcss-loader.

ターミナル

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

PostCSS サポートを有効にする

webpack.config.js ファイルで、PostCSS ローダーを有効にします。以下を参照してください。詳細についてはドキュメントをご覧ください。

webpack.config.js

Encore
  .enablePostCssLoader()
;

PostCSS プラグインを設定する

プロジェクトのルートに postcss.config.mjs ファイルを作成し、以下を追加します。 @tailwindcss/postcss プラグインを PostCSS 構成に追加します。

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Tailwind CSS をインポートする

Tailwind CSS をインポートする @import を ./assets/styles/app.css に追加します。

app.css

@import "tailwindcss";

ビルドプロセスを開始する

npm run watch でビルドプロセスを実行します。

ターミナル

npm run watch

プロジェクトで Tailwind の使用を開始する

コンパイルされた CSS が <head> に含まれていることを確認してから、Tailwind のユーティリティクラスを使用してコンテンツをスタイル設定し始めます。

base.html.twig

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    {% block stylesheets %}
      {{ encore_entry_link_tags('app') }}
    {% endblock %}
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>