Tailwind

Tailwind CSS is a library whose main feature is that, unlike other CSS frameworks, such as Bootstrap, it does not provide a number of predefined classes for elements such as buttons or tables. Instead, it creates a list of "usable" CSS classes, which can be used to stylize any element by mixing and matching.

For example, in other traditional systems there would be a class 'Message-Warning' class, which would use the yellow background color and thickened text. To achieve this result in Tailwind, a set of classes created by the library should be used: bg-yellow-200 and font-bold. This approach has its consequences. First of all: there is the impression that CSS is added to HTML. Secondly, following the first HTML layer can contain a lot of classes and be illegible to the developer.

Application in Atomic Design

The solution for the above challenge is the use of Atomic Design, because the components in this approach contain relatively small fragments of the presentation layer.From small, conveniently formatted by Tailwind components, larger ones are created.The developer can easily make global appearance changes using a change in one component.

Tailwind has a set of classes, the use of which means that all developers create the same values that can be defined in a global configuration file. This file contains the values of the colors used in the design system, distance, size, etc.All these values can be overwritten and expanded, which means that we control which classes can be used in creating the system design.

WARNING

source of true all Tailwind values and configuration settings are a project file in Figma.

Colors

The colors are used in the application so that based on their configuration in the Tailwind configuration file, you can get the effect of color change for all components.Components should use specific colors in accordance with the names presented in the Figma project, or using naming to determine the shades (so e.g. primary-100).' ,

The colors defined in this way can of course coincide with the colors from the Tailwind palette, but the colors from the Tailwind palette should not be used to create components.Note: the exception to this rule is the use of black and white (shades of gray) .When working with colors, you can use tools such as:

• for find a palette: https://coolors.co/
• for determine the shades for the configuration file: https://colors.eva.design
• for define colors for Tailwind https://www.tints.dev

Main colors

primary

#564EB4

secondary

#52525b

success

#319556

info

#2D8AA4

warning

#CB5B2F

danger

#C13E3E

Typography and sizes

The application uses Roboto font.Currently, all sizes and sizes used in components are not overwritten and are the default Tailwind settings.

Sources of knowledge

All information about Tailwind is available on the website https://tailwindcss.com/.