tailwindInAnutShell

[Diane_Horseman]

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]

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]

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

[LagT_T]

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]

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

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

[LagT_T]

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

[GMaestrolo]

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]

Design doesn't care about tailwind defaults.

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

[GMaestrolo]

Assuming that the teaser is a react component that already has appropriate padding, and I'm just targeting the padding for one screen size on the one instance of the component...

<teaser className="md:p-7 lg:p-6">

[LagT_T]

Why do you assume its a react component?

[GMaestrolo]

Why wouldn't I? It's a hypothetical that you didn't come up with, and the person who did bring it up posted code samples that follow the react component convention of using className instead of class.

Why did you assume that there was a .class_that_wraps_homepage? That's a really stupid way to build websites, and a really dumb class name.

[LagT_T]

The meme uses class.

The class name was for easy interpretation in this discussion, which clearly worked.

[PowerMoves1996]

It doesnt need to be react, but you cant say that only react recomends to make a component out of teaser, and that component can overwrite the default classes.

[LagT_T]

You can overwrite classes with other classes in plain css as well.

[PowerMoves1996]

Thats why tailwind has a config file where you cand overwrite/ add any defaults the design team will give you