3 ms·

Yeah, I was being deliberately obtuse. But to be honest, just a few these lists result in sending way more markup than I would be regular old CSS. And we haven

Yeah, I was being deliberately obtuse. But to be honest, just a few these lists result in sending way more markup than I would be regular old CSS. And we haven't even applied any responsive classes. Ultimately I think this is a subjective aesthetic judgement... the kind of UI code the tailwind results is ugly and hard to read (for me), and I much prefer using CSS modules.

_akhe 2y ago
I thought Tailwind handling pseudo classes and responsive breakpoints in the className was pretty slick, but I also agree with you that they can get very long. Part of it is just organization/abstraction. Personally, when a component gets too ugly to look at it's time to abstract that away. I want all my top level components to be simple almost English looking syntax and attributes, or even no attributes, like this: import { Header, Page, Footer } from 'library'; const App = () => <> <Header /> <Page /> <Footer /> <>; Ideally I'm looking at clean components like this in my daily work, with those long classNames hidden away in a component library: https://github.com/bennyschmidt/ragdoll-studio/blob/master/ragdoll-www-nextjs/src/components/Header/index.js https://github.com/bennyschmidt/ragdoll-studio/blob/master/r... I think even with regular CSS, styled components, etc. you're still going to have that base layer where all the complexity is hidden. To your point, it is purely subjective. ^ this example marketing site uses Tailwind but the product itself is native CSS: https://github.com/bennyschmidt/ragdoll-studio/tree/master/ragdoll-react/src/components https://github.com/bennyschmidt/ragdoll-studio/tree/master/r... I think a directory structure like: Header index.js styles.css Footer index.js styles.css Is also totally fine. The markup in the components is a lot cleaner and often just uses a single selector instead of long Tailwind-esque classNames. With Tailwind I will end up with many more but smaller components - because those classNames are establishing the design system as we go - where with modules (React components using unnamed CSS imports like `import './styles.css';) you can import just the CSS files you need like a base.css, theme.css etc. then your component is very clean - just uses normal selectors and CSS is fully separated out from markup.

_akhe 2y ago

I thought Tailwind handling pseudo classes and responsive breakpoints in the className was pretty slick, but I also agree with you that they can get very long. Part of it is just organization/abstraction. Personally, when a component gets too ugly to look at it's time to abstract that away. I want all my top level components to be simple almost English looking syntax and attributes, or even no attributes, like this: import { Header, Page, Footer } from 'library'; const App = () => <> <Header /> <Page /> <Footer /> <>; Ideally I'm looking at clean components like this in my daily work, with those long classNames hidden away in a component library: https://github.com/bennyschmidt/ragdoll-studio/blob/master/ragdoll-www-nextjs/src/components/Header/index.js https://github.com/bennyschmidt/ragdoll-studio/blob/master/r... I think even with regular CSS, styled components, etc. you're still going to have that base layer where all the complexity is hidden. To your point, it is purely subjective. ^ this example marketing site uses Tailwind but the product itself is native CSS: https://github.com/bennyschmidt/ragdoll-studio/tree/master/ragdoll-react/src/components https://github.com/bennyschmidt/ragdoll-studio/tree/master/r... I think a directory structure like: Header index.js styles.css Footer index.js styles.css Is also totally fine. The markup in the components is a lot cleaner and often just uses a single selector instead of long Tailwind-esque classNames. With Tailwind I will end up with many more but smaller components - because those classNames are establishing the design system as we go - where with modules (React components using unnamed CSS imports like `import './styles.css';) you can import just the CSS files you need like a base.css, theme.css etc. then your component is very clean - just uses normal selectors and CSS is fully separated out from markup.