{{ this.package.nice }} integrates Tailwindcss, a CSS utility-first framework that is customized with {{ this.package.nice }} design tokens. There are three parts to the Tailwindcss configuration.
-
Core Plugins: This array is a white list of utility plugins that defines what sets of utilities will be compiled in the final stylesheet distribution. Source documentation. Example; the core plugin for padding is
padding
. Adding or removing it to the array will determine wether those utilities are compiled to the global stylesheet. -
Variants: This object contains variants that represent different states that the utilities appear in such as media queries,
:hover
, and:focus
states. Source documentation. Example; to have padding only appear for desktop screens within {{ this.package.nice }} the variantdesktop:
is added to the.p-1
utility:<div class="desktop:p-1"></div>
. -
Theme: This object contains {{ this.package.nice }} tokens for particular utilities such as font families, colors, margin, padding, etc. Source documentation. Example; the padding plugin is customized to use
8px
as the basis for all padding increments..p-2
would add8px × 2 = 16px
padding on all sides of an element:<div class="p-2"></div>
.
The current configuration source describes which core plugins are enabled, what variants they use, and if they are themed with the {{ this.package.nice }} design tokens.