1C-Битрикс. Установка и настройка TailwindCSS

Информация
Форк статьи с Dzen

В наше время создание адаптивных веб-страниц становится всё более важной задачей, однако часто встречаются ограничения при использовании популярных фреймворков, таких как Bootstrap или Materialize. Эти инструменты, хоть и предоставляют простые средства для создания адаптивного дизайна, могут также ограничивать творческий подход разработчика и заставлять прибегать к костылям, таким как использование !important в CSS.

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

Одним из ключевых преимуществ Tailwind CSS является легкость в реализации отзывчивого дизайна, темного режима и состояний фокуса/наведения. Всё это достигается с использованием лишь классов CSS, без необходимости создания дополнительных стилей.

Давайте рассмотрим, как интегрировать Tailwind CSS с 1C-Bitrix, чтобы использовать его преимущества в полной мере и обеспечить более гибкий и инновационный подход к созданию веб-интерфейсов.

Эта статья в первую очередь ориентирована на новичков, которые хотят расширить свой опыт в верстке и добавить в свой арсенал этот фреймворк.

Установка TailwindCSS#

Установку будем производить с использованием npm, что позволит использовать такие возможности TailwindCSS как:

Настройка темы Tailwind по умолчанию
Использование таких директив как @apply, @variants, и т. д.
Возможность включить дополнительные варианты, такие как group-focus
Установка сторонних плагинов
Перед установкой убедитесь что у Вас установлен NodeJS 18.14.2 или выше.

Так как я не очень люблю, когда в корне сайта без необходимости находится папка node_modules, я создам отдельную папку для TailwindCSS вне сайта Bitrix.

mkdir /home/<имя пользователя>/tailwindcss

Переходим в созданную папку и устанавливаем TailwindCSS CLI.

npm install -D tailwindcss
npx tailwindcss init

Теперь можно открыть папку в любом удобном для Вас редакторе. Открытый проект в VSCode

Настройка Tailwind для работы в 1C Bitrix#

Настроим Tailwind для работы с Bitrix. Для этого откроем конфигурационный файл tailwind.config.js.

В разделе content: настроим пути ко всем вашим шаблонам, компонентам JavaScript и любым другим исходным файлам, которые будут содержать имена классов Tailwind. В моей реализации я настрою путь на единственный шаблон.

//file:tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        '/var/www/html/bx-site/bitrix/templates/theme-one/**/*{js,php}'
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Как можно заметить Tailwind будет отслеживать изменения в шаблоне расположенном в папке ../templates/theme-one/, контролируемые расширения .js, .php.

Далее необходимо добавить директивы Tailwind в свой CSS:

Создайте файл input.css в папке /home/<имя пользователя>/tailwindcss/src/;
Добавьте директивы @tailwind base, @tailwind components, @tailwind utilities;
Сохраните файл.

//file:input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

На данный момент мы завершили настройку Tailwind. О других настройках, таких как темы, экраны, настройки цветов и т.д., вы можете прочитать в документации.

Запуск процесса сборки#

Т.к. Tailwind настроен под сборку единственного шаблона Bitrix, команда для запуска будет следующая:

npx tailwindcss -i ./src/input.css -o /var/www/html/bx-site/bitrix/templates/theme-one/styles.css --watch

С помощью этой команды Tailwind собирает классы и создает файл style.css. Поскольку Bitrix автоматически подтягивает этот файл при рендеринге шаблона, нет необходимости подключать его в <head>.

Заключение#

Tailwind CSS - замечательная библиотека, к которой нужно немного привыкнуть. Однако, освоив её, вы сможете быстро создавать прототипы адаптивных веб-приложений, которые впоследствии можно будет оптимизировать для производства и обслуживания.

В мыслях есть идея настроить Tailwind на контроль всех шаблонов и сборки единственного css для них. Если Вам это интересно прошу написать в комментарии.