Tailwind Preset

Tailwind Preset offers a different base configuration apart from Tailwind's default classes. It is a set of overrides and extensions that allows for customization and reuse to better support VTS applications.

How it works

For Tailwind classes not specified in tailwind-preset.js, Tailwind's default classes are used.
For example, spacing calculations are defined in the preset and replace the default configuration specified in the Tailwind documentation. To add 4 pixels of padding, the correct classname would be "p-0.5", not "p-1".
Any class that resides in the extend object works together with Tailwind classes to define the values we need on top what's available out of the box. Example: the preset class "min-h-2.5" along with all the default min-height utilities are available for use.