Utility classes and CSS variables

Additional utility classes and CSS variables that NerdfishUI uses for components.

Color utilities

Color utilities are made so they work in light and dark mode.

How to use

You can also use color names in utility classes just like Tailwind's original color names. These are utility classes that can be used with a color name:

bg-{COLOR_NAME}
to-{COLOR_NAME}
via-{COLOR_NAME}
from-{COLOR_NAME}
text-{COLOR_NAME}
ring-{COLOR_NAME}
fill-{COLOR_NAME}
caret-{COLOR_NAME}
stroke-{COLOR_NAME}
border-{COLOR_NAME}
divide-{COLOR_NAME}
accent-{COLOR_NAME}
shadow-{COLOR_NAME}
outline-{COLOR_NAME}
decoration-{COLOR_NAME}
placeholder-{COLOR_NAME}
ring-offset-{COLOR_NAME}

Basics

These work, but will look different if specified in the background, text, or border section respectively.

// These work with all of the tailwind color utilities `bg-`, `text-`, `border-`, `ring-`, ...
transparent // example: `bg-transparent`
current
nerdfish
primary
muted
success
warning
danger
info

Background specific

bg-primary
bg-muted
bg-inverted
bg-success
bg-success-muted
bg-warning
bg-warning-muted
bg-danger
bg-danger-muted
bg-info
bg-info-muted

// Opacity (works for all of the above)
bg-primary/10

// other

bg-popover
bg-popover-inverted

Text specific

text-primary
text-muted
text-inverted
text-success
text-warning
text-danger
text-info

// Opacity (works for all of the above)
text-primary/10

Border color

border-primary
border-muted
border-inverted
border-success
border-warning
border-danger
border-info

// Opacity (works for all of the above)
border-primary/10

Other

shadow-outline // subtle outline border
active-ring // ring that appears when an element is pressed
focus-ring // ring that appears when an element is focused or hovered
focus-outline // outline that appears when an element is focused, disabled default outline
empty-content // utility for pseudo elements to reset content