Установите Tailwind CSS с помощью Symfony

Настройка Tailwind CSS в проекте Symfony.

Создайте свой проект

Начните с создания нового проекта Symfony, если у вас его еще нет. Наиболее распространенный подход — использовать установщик Symfony.

Terminal

symfony new --webapp my-projectcd my-project

Установите Webpack Encore

Установите Webpack Encore, который занимается сборкой ваших ресурсов. Подробнее смотрите в документации.

Terminal

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

Установите Tailwind CSS

Используя npm, установите @tailwindcss/postcss и его одноранговые зависимости, а также postcss-loader.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

Включите поддержку PostCSS

В файле webpack.config.js включите PostCSS Loader. Подробнее смотрите в документации.

webpack.config.js

Encore  .enablePostCssLoader();

Настройте плагины PostCSS

Создайте файл postcss.config.mjs в корне вашего проекта и добавьте плагин @tailwindcss/postcss в вашу конфигурацию PostCSS.

postcss.config.mjs

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

Импортируйте Tailwind CSS

Добавьте @import в ./assets/styles/app.css, который импортирует Tailwind CSS.

app.css

@import "tailwindcss";

Начните процесс сборки

Запустите процесс сборки с помощью npm run watch.

Terminal

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>