Начало работы

@bitrix24/b24style позволяет создавать интерфейсы приложений, похожие на интерфейс Битрикс24, используя утилитарные классы Tailwind CSS.

Инструмент реализован как плагин для Tailwind CSS.

Предварительные требования

• Node.js версии 18 или выше.
• Tailwind CSS версии 3.4.10 или выше.

Установка

1. Установите @bitrix24/style с помощью npm:

npm

$ npm i @bitrix24/b24style

2. Добавьте @bitrix24/b24style в tailwind.config.js:

tailwind.config.js

module.exports = {
	content: [
		'...'
	],
	theme: {},
	plugins: [
		'...',
		require('@bitrix24/b24style') 
	]
};

Важно помнить

@bitrix24/b24style автоматически включает расширение @tailwindcss/forms.

На этом установка завершена.

Что дальше?

• Прочитайте о настройках плагина.
• Узнайте, как добавить дополнительные шрифты в разделе Работа с шрифтами.
• Ознакомьтесь со шкалой отступов.
• Ознакомьтесь с материалами из руководства по типографике.
• Изучите Box Shadow: утилиты для управления тенями вокруг элементов.
• Ознакомьтесь с методами указания границ и радиусов элементов.
• Прочитайте о длительности переходов и анимации.