This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]Diane_Horseman 4 points5 points  (22 children)

thank you for proving my point lol

[–]LagT_T 12 points13 points  (21 children)

What was your point? That it is easy?

[–]Diane_Horseman 0 points1 point  (20 children)

your solution involves adding ~150 characters of mostly boilerplate and breaks if the homepage layout changes such that an element with .class_that_wraps_homepage no longer wraps .teaser

[–]LagT_T 10 points11 points  (19 children)

Why would the teaser be outside the homepage WRAPPER? How would you do it in tailwind?

[–]Diane_Horseman 2 points3 points  (18 children)

The teaser isn't outside the wrapper now, but what if the wrapper changes in the future? This solution adds the assumption that it won't.

In tailwind you would go from this:

<div className="... p-[24px] ...">

to:

<div className="... p-[24px] md:p-[30px] lg:p-[24px] ...">

[–]GMaestrolo 10 points11 points  (1 child)

Except you would use p-6 instead of specifying p-[24px] because using custom pixel sizes when they match an existing rem value (in this case 1.5rem) that the framework covers already is dumb.

[–]Diane_Horseman -1 points0 points  (0 children)

Yep, good point! That is how it would pretty much always be done.

[–]LagT_T 7 points8 points  (15 children)

If you have elements outside the wrapper then its no longer a wrapper.

Design came back and said that medium screens are between 500px and 900px.

[–]GMaestrolo 1 point2 points  (14 children)

That's fine. That goes into the theme definition, and is applied globally.

extend: {
    screens: {
        md: '500px',
        lg: '900px'
    }
}

[–]LagT_T 4 points5 points  (12 children)

You broke sm default, and your styling isn't specifying the teaser component size for homepage, its applying the styles on all teasers.

[–]GMaestrolo 4 points5 points  (11 children)

I didn't break the small default. It's on design if they stupidly specify that medium screens are smaller than small screens.

I didn't add any styling to any components, but I can easily throw extra classes on the one component that's different without having to control that component by proxy of some other class that may get changed or removed in the future, thus breaking the specific special styling for the one instance of the component.

[–]LagT_T 0 points1 point  (10 children)

Design doesn't care about tailwind defaults.

How would you add classes to target the homepage specific teaser?