Play with TailwindCSS in the Browser

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

So use a custom property instead (don’t use inline styles tho):

    <span style=“color: var(--text-gray-700)”>Gray text</span>

Or use Sass or something. This problem has been solved for like 15 years.

[ Parent | on HN ]

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 ]

Re:Play with TailwindCSS in the Browser by azemetre on Friday June 10, 2022 @10:38AM (#31694829)

This is what tailwind does already. Colors are defined as design tokens in a config file:

https://tailwindcss.com/docs/customizing-colors#color-object...

Utility CSS is by far my favorite way to write CSS, especially in teams. It allows you to extract out multiple classnames that encapsulate all styles into a single classname.

Why would you use Sass when plain CSS does the job better? Tailwind is just normal CSS, all the build steps are ways of making your stylesheets more efficient and removing dead code but it's all still CSS no preprocessor necessary.

[ Parent | on HN ]