Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Page using Tailwind

Jaynarol 150

@Jaynarol

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Aravindhan 320

@aravindhan7

Posted

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 helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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