Design comparison
Solution retrospective
While Tailwind doesn't appear to support HSL colors, I've had to resort to using online conversion tools to change them to HEX. This adds a bit more effort to my workflow. Is it common in the tech industry to use HSL as the standard for styling guides?
and If anyone would like to suggest improvements or comment on any part of my code, I would greatly appreciate it.
Community feedback
- @aravindhan7Posted about 1 year ago
As per Tailwind concerns,
Tailwind CSS provides utility classes that allow you to apply HSL colors to your elements easily.
Here's an example of how you can use HSL colors with Tailwind CSS:
<div class="bg-hsl-150 text-hsl-210"> This is a div with a background color of HSL(150, 100%, 50%) and text color of HSL(210, 100%, 50%). </div>In this example, the bg-hsl-150 class sets the background color to HSL(150, 100%, 50%), and the text-hsl-210 class sets the text color to HSL(210, 100%, 50%).
Tailwind CSS provides a range of utility classes for different HSL colors, allowing you to adjust the hue, saturation, and lightness components easily. You can customize the colors and configure the HSL values according to your design needs in your Tailwind CSS configuration file.
By the way your solution is super solid, and the tailwind usage is pretty neat.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord