CSS Variables and Tailwind Tokens
Hyvä UI leverages CSS variables (custom properties) to streamline UI component code and enhance customization.
If you're new to CSS variables, check out the MDN docs developer.mozilla.org for a deep dive.
We combine CSS variables with Tailwind tokens to achieve this. For instance, consider the Notification.B component:
This line defines a CSS variable named --message using Tailwind's theme function.
The value is set to colors.green.500, pulling the green shade from your Tailwind config.
Throughout the Notification component,
we can then reuse --message for styling elements like icons and text, ensuring consistent colors.
For more details on Tailwind's theme function within arbitrary properties, refer to the Tailwind docs on Arbitrary Tailwind Class.