Краткое руководство по интеграции 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
для производства, и у вас должно быть хорошо получаться! Надеюсь, это небольшое руководство было вам полезно.