Тема для WordPress с поддержкой Tailwind CSS

В этой статье давайте поговорим о поддержке Tailwind CSS включенной в тему поставляемую с WP BOX. Для тех, кто не знаком с Tailwind, это программное обеспечение позволяет минимизировать использование CSS в проекте, за счет генерации CSS файлов автоматически в зависимости от классов, используемых в файлах шаблонов и других указанных разработчиком в настройках. За счет такого подхода можно быть уверенным, что при удалении или редизайне компонентов старые стили также будут удалены автоматически. Кроме того, минификация и совместимость с браузерам выполняется при запуске скрипта компиляции.

Я описывал какие особенности для Tailwind применены в проекте на странице о фронтенд фишках, перейдите по ссылке, чтобы ознакомиться.

Как начать работать с Tailwind

Tailwind CSS устанавливается в качестве NodeJS модуля, а сам NodeJS создается в качестве сервиса в Docker во время установки. Базовая установка не выполняет установку NodeJS модулей, потому что они нужны только во время разработки, поэтому внесения изменений в фронтенд, после установки проекта вам потребуется также установить модули с помощью следующей команды:

make npm ARGS="install"

Эта Makefile команда запустит npm скрипт внутри контейнера. Вот что происходит под капотом:
docker exec -w /var/www/site/web/app/themes/wp-box node-custom npm $(ARGS)

Аналогично вы можете запускать и другие npm команды, передав вторую часть команды в виде строки ARGS.

Папка с темой содержит package.json, после того как пакеты будут установлены вы также сможете использовать скрипты указанные в package.json.

И снова, основная команда для запуска все фронтенд скриптов для разработки в фоновом режиме:

make start

Данная команда запустит в параллельном режиме как наблюдатель за изменениями и компилятор для Tailwind CSS, так и другие фронтенд процессы.

Если вы хотите запустить только Tailwind CSS, используйте другую команду:

make npm ARGS="run start-tailwind"

Данная команда запустит следующую команду внутри контейнера:
npx tailwindcss -i ./styles/src/tailwind.css -o ./styles/dist/tailwind.css --watch=always --minify

Внесение изменений в настройки Tailwind CSS

Если вы хотите изменить существующие настройки, обратите внимание на следующие файлы для внесения изменений:

• web/app/themes/wp-box/tailwind.config.js — основная конфигурация. По умолчанию включает объявления классов для темы, список путей для парсинга классов при компиляции и скрипт синхронизации настроек с theme.json используемым WordPress.
• web/app/themes/wp-box/postcss.config.js — конфигурация плагинов. Позволяет настроить постпроцессинг файлов стилей, добавив к нему автопрефиксер для браузерной совместимость, минификацию и другие важные штуки.
• web/app/themes/wp-box/styles/src/tailwind.css — основной файл стилей, который импортирует три слоя указанных ниже. Некоторые глобальные стили объявлены тут же.
• web/app/themes/wp-box/styles/src/tailwind.base.css — в этом файле задаются цветовые схемы и по желанию другие параметры, которые должны зависеть от выбранной темы.
• web/app/themes/wp-box/styles/src/tailwind.components.css — здесь можно объявить переиспользуемые компоненты, которые пригодятся если вы не хотите писать длинные классы прямо в шаблонах или если нужно много переиспользовать одни и те же стили в разных шаблонах.
• web/app/themes/wp-box/styles/src/tailwind.utilities.css — здесь можно объявить собственные классы, на случай если в Tailwind не заложили желаемые классы.

Смешивание Tailwind CSS с другими библиотеками и стилями

Иногда может потребоваться добавить стили для классов из сторонних библиотек или классов генерируемых самим WordPress. В проекте есть несколько примеров — посмотрите на реализацию в перегрузках для следующих блоков ядра:

• web/app/themes/wp-box/blocks-overrides/core/query-pagination — здесь добавляется стиль для класса, который генерирует сам WordPress.
• web/app/themes/wp-box/blocks-overrides/core/code — а здесь подключена библиотека Highlight JS для цветных блоков кода, она добавляет собственные классы, к которым нужно было применить стили.

Рекомендуемый подход зависит от области применения:

1. Если стили потребуются только в одном конкретном блоке, как на примере с Highlight JS, то имеет смысл создавать их в block-folder/assets/css/style.min.css. Такой файл автоматически подключается в фронтенде, только если блок используется на текущей странице.
2. Если вы хотите добавить глобальные стили, импортируйте из в основной файл стилей Tailwind и они будут скомпилированы во время процесса сборки.

Не пишите стили в style.css в корневой папке темы. Этот файл используется только, чтобы тема прошла валидацию WordPress, и не подключается на фронтенде.

Настройка IDE VSCode для разработки с Tailwind

Вы можете найти рекомендуемое проектом дополнение для VSCode в этом файле — .vscode/extensions.json

Кроме того, VSCode может предложить вам установку рекомендуемых дополнений при запуске, просто согласитесь и установите его. После установки, дополнение будет использовать настройки, объявленные в .vscode/settings.json, измените их если потребуется.

	"tailwindCSS.includeLanguages": {
		"html": "html",
		"javascript": "javascript",
		"css": "css",
		"php": "php"
	},