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.