Play with TailwindCSS in the Browser

Re:Play with TailwindCSS in the Browser by hbn on Friday June 10, 2022 @10:16AM (#31694533)

I want the styles to be in the template though, because I don't want to bounce back and forth between 2 files when designing a single UI. And it's not just inline styles, there's some things Tailwind can do that a style tag can't. Such as screen size breakpoints.

Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger:

    <div class="px-2 sm:px-8">

I'd much rather do this than mess with CSS's horrible media query syntax myself. And when I come back to this later, I don't have to cross-reference between (probably badly named) classes across 2 files to figure out how that div behaves.

[ Parent | on HN ]

Re:Play with TailwindCSS in the Browser by jakelazaroff on Friday June 10, 2022 @10:43AM (#31694911)

Okay, but now we’re back to Tailwind being back to syntactic sugar for styles (you can definitely put media queries in a style tag).

I disagree with your preference; all the classnames are not easily parseable and obscure the markup, and I much prefer the CSS media query syntax. But that’s, like, just my opinion, man. If you like it better, don’t let me stop you!

[ Parent | on HN ]

Re:Play with TailwindCSS in the Browser by skttl on Friday June 10, 2022 @11:31AM (#31695555)

>(you can definitely put media queries in a style tag)

How?

[ Parent | on HN ]

Re:Play with TailwindCSS in the Browser by jakelazaroff on Friday June 10, 2022 @11:47AM (#31695781)

    <style>@media (min-width: 100px) {}</style>

[ Parent | on HN ]