Frontend Mentor | Brian Uribe's profile

@dimar-hanung

Submitted over 1 year ago

Hello everyone,

I'd like to ask some questions related to the challenges I'm facing with complex components in my TailwindCSS and Nuxt 3 project. Your advice and insights would be greatly appreciated:

How can one optimize the use of classes in TailwindCSS when dealing with Complex components?

Is there a better approach to combining classes and TailwindCSS, as illustrated in the provided examples?

Example 1

class="h-full xs:h-auto grid place-items-center shadow-xl hover:shadow-2xl transition-shadow w-full max-w-[320px] bg-white px-4 pt-4 pb-10 xs:rounded-[20px]"

Example 2

.desc {
font-family: "Outfit", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 19px;
text-align: center;
letter-spacing: 0.1875px;
color: #7d889e;
}

Example 3

.decoration-oval {
@apply rounded-full absolute;

    width: 270px;
    height: 270px;
    transition: all ease 0.3s;
    background: #3685ff;
    }

Example 1: Long class (directly within the HTML element)\
Example 2: Defining a class (considered best but inconsistent)\
Example 3: Combination of class and Tailwind (also inconsistent) Are there other ways to address the shortcomings in each provided example?

How can one ensure consistency when using TailwindCSS?
Are there any recommendations or guidelines on best practices when using TailwindCSS, especially when it comes to more complex components?

Nuxt3 + Tailwind CSS ( Qr Code )

Brian Uribe• 50

@BrianUribe6

Posted over 1 year ago

hi, I liked the animations it looks pretty cool. A small bug is that at screen sizes < 318 the background dissappears. You should consider adding the background starting from the smallest screen size. Also add a padding on the whole container to prevent the card from hitting the screen edges as the screen gets smaller.

Finally, I noticed you are using using "xs" breakpoints, I'm assuming this is for targetting the smallest screen size. Although there are places where this is useful, in general you should start building from the smallest screen size, and as the screen gets bigger you override or add new properties. if you follow this approach, you'll notice you will use fewer CSS classes, and have an easier time overall.

Marked as helpful

Brian Uribe

All comments

Nuxt3 + Tailwind CSS ( Qr Code )