Skip to content
Submitted over 3 years ago

Stats preview card component using HTML, Vite and TailwindCSS

tailwind-css
Dennis Chiroro•195
@chiroro-jr
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

If you are using Tailwind CSS, do you have any techniques for arranging classes in the class attribute or increase readability?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • jul_julham•210
    @zulhamsy

    Hi @chiroro-jr, I'm using TailwindCSS too! :D, I've some tips, maybe it can make writing Tailwind classes more easier and increase readability,

    • starts with 'layout classes' like margin, padding etc example <div class="px-2 py-3" />

    • second, 'position classes' or 'display classes' like flex, absolute

    • third layer is 'text styling, color and text related classes' like font-sans text-2xl

    • last layer is the rest...

    that's it! :D, hope it helps

    Marked as helpful
  • Dennis Chiroro•195
    @chiroro-jr

    Hi @zulhamsy. Hope you are well. Thank you for the tips. I'll definitely put them in my notes and use in my next challenge. Really appreciated.

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