Краткое руководство по интеграции TailwindCSS в Webpack на бис

Недавно у меня была возможность выбрать фреймворк TailwindCSS и поработать с ним над рабочим проектом.

После некоторого начального колебания его концепции CSS прежде всего на основе полезности я провел небольшое дополнительное исследование и пообщался с сообществом попутного ветра. В конце концов, я получил достаточно бай-ина, чтобы пересмотреть свое первоначальное суждение и попробовать.

Самое приятное впечатление!

В настоящее время я работаю над проектом, который использует фреймворк PHP Symfony на бэкэнде, и мне было поручено интегрировать Tailwind в Webpack на бис, версию Webpack для Symfony.

Вот как я их интегрировал.

Зависимости

Во-первых, нам нужно установить пару зависимостей:

  • tailwindcss сам.
  • Попутный ветер требует пакет под названием postcss-loader.
  • Пакет autoprefixer, помогающий с префиксами поставщиков.

Предполагая, что у вас уже установлен Webpack-encore, вы можете удалить @symfony/webpack-encore, в противном случае все зависимости будут уложены вместе, мы получим следующую команду:

yarn add --dev @symfony/webpack-encore tailwindcss postcss-loader autoprefixer

Composer - наш менеджер пакетов. Я использую командуyarn add, но того же результата можно добиться с npm через npm install.

Конфигурация

Я настроил и / или создал четыре файла:

  • tailwind.css
  • tailwind.config.js
  • postcss.config.js
  • webpack.config.js

tailwind.css: я создал этот файл в каталоге ресурсов CSS моего проекта - assets/css/tailwind.css - но вы можете разместить его где угодно. Директива «@tailwind» внедряет стили base, components и utilities в ваш CSS.

tailwind.config.js: этот файл является необязательным, но если вам нужно каким-либо образом настроить попутный ветер (например, добавив префикс к именам классов, изменив цвет или размер шрифта и т. д.), вам нужно будет создать этот файл с помощью Tailwind CLI, запустив npx tailwind init. Это создаст файл в вашей корневой папке.

postcss.config.js: я создал этот файл в корне своего проекта. Здесь мы указываем плагины PostCSS, которые хотим использовать для обработки нашего CSS.

webpack.config.js: Если вы уже использовали Webpack-encore, файл уже должен быть настроен, иначе это может помочь. Конфигурация этого файла была такой же быстрой, как и другие: я добавил .addStyleEntry('tailwind', './assets/css/tailwind.css'), указывающий на наши внедренные стили в tailwind.css, и включил загрузчик PostCSS, как показано ниже:

Шаблоны

Twig - это шаблонизатор для нашего проекта, поэтому мне также пришлось включить encore_entry_link_tags() функцию в мой base.html.twig файл шаблона. Это очень похоже на добавление ссылки на таблицу стилей, поэтому, если вы забудете включить ее и начнете писать свои классы, ничего не произойдет, и начнется безумие.

Вуаля!

Теперь вы можете запускать yarn run dev для своей среды разработки или yarn run build для производства, и у вас должно быть хорошо получаться! Надеюсь, это небольшое руководство было вам полезно.

Ресурсы