4 ms·

Just that forgoing tailwind it seems to me style attributes are the natural choice. But media queries indeed may make it less practical to do that for everythin

Just that forgoing tailwind it seems to me style attributes are the natural choice. But media queries indeed may make it less practical to do that for everything:

moritzwarhier 3y ago
I agree insofar that I would consider it misguided to consider using the style attribute or the CSSOM .style property "bad" in general. But soon grows into a mess. Legitimate use cases exist, but there are many obvious reasons to avoid using it as the main driver of page css.
- geenat 3y ago
  CSS Scope Inline enables you to do something awesome not possible in Tailwind... @media lg { /* As many lg properties you like instead of adding lg: to everything. */ } https://developer.chrome.com/articles/css-nesting/#nesting-media https://developer.chrome.com/articles/css-nesting/#nesting-m...
  - moritzwarhier 3y ago
    Yes, I love this and I'd love for the nesting proposal and custom media queries to gain broad browser support. (edit: just realized I'm living in the past already! ^^) Tailwind has a similar directive in external CSS files. Pun: it's not called @media. But the DSL again has some benefits here. @apply + @screen is more powerful than what's possible in vanilla CSS. Especially regarding nesting and enforcing the design system breakpoints. Tailwind is pretty closely related to PostCSS in this regard, and keeps its syntax extensions close to proposals that might one day become standards (nesting, custom media queries etc) But using Tailwind and focusing on external CSS files seems like the worst of both worlds. I have to say, in a React context I prefer styled components or simple external CSS, but in my previous job Tailwind was a godsend. Having to churn out large amounts of CSS in a quick yet precise manner, involving other team members who might have different habits and knowledge levels, this is where Tailwind shines for me.

Just that forgoing tailwind it seems to me style attributes are the natural choice. But media queries indeed may make it less practical to do that for everything:

moritzwarhier 3y ago

I agree insofar that I would consider it misguided to consider using the style attribute or the CSSOM .style property "bad" in general. But soon grows into a mess. Legitimate use cases exist, but there are many obvious reasons to avoid using it as the main driver of page css.

geenat 3y ago
CSS Scope Inline enables you to do something awesome not possible in Tailwind... @media lg { /* As many lg properties you like instead of adding lg: to everything. */ } https://developer.chrome.com/articles/css-nesting/#nesting-media https://developer.chrome.com/articles/css-nesting/#nesting-m...
- moritzwarhier 3y ago
  Yes, I love this and I'd love for the nesting proposal and custom media queries to gain broad browser support. (edit: just realized I'm living in the past already! ^^) Tailwind has a similar directive in external CSS files. Pun: it's not called @media. But the DSL again has some benefits here. @apply + @screen is more powerful than what's possible in vanilla CSS. Especially regarding nesting and enforcing the design system breakpoints. Tailwind is pretty closely related to PostCSS in this regard, and keeps its syntax extensions close to proposals that might one day become standards (nesting, custom media queries etc) But using Tailwind and focusing on external CSS files seems like the worst of both worlds. I have to say, in a React context I prefer styled components or simple external CSS, but in my previous job Tailwind was a godsend. Having to churn out large amounts of CSS in a quick yet precise manner, involving other team members who might have different habits and knowledge levels, this is where Tailwind shines for me.