Getting Started

@bitrix24/b24style allows you to create application interfaces similar to the Bitrix24 interface using Tailwind CSS utility classes.

This tool is implemented as a plugin for Tailwind CSS.

Prerequisites

• Node.js version 18 or higher.
• Tailwind CSS version 3.4.10 or higher.

Installation

1. Install @bitrix24/style using npm:

npm

$ npm i @bitrix24/b24style

2. Add @bitrix24/b24style in tailwind.config.js:

tailwind.config.js

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

Important to remember

@bitrix24/b24style automatically includes the @tailwindcss/forms extension.

This completes the installation.

What's Next?

• Read about plugin settings.
• Learn how to add additional fonts in the section Working with Fonts.
• Review the spacing scale.
• Take a look at the spacing scale.
• Familiarize yourself with the materials from the typography guide.
• Study Box Shadow: utilities for managing the shadows around elements.
• Take a look at the methods for specifying element borders and radii.
• Read about transition duration and animation