5 ms·

It's more like: <div class="flex flex-col items-start p-6 space-y-4 bg-gray-100 rounded-lg shadow-lg max-w-sm"> {links.map(link => <a href="#" class="tex

• yladiz 2y ago
  FWIW you wouldn’t need to add the `transition-link` class to every A tag, you could just do `.link-list > a`.
  • _akhe 2y ago
    True for this isolated example, but careful with this practice because that requires `<a />` to be the immediate descendant of `.link-list`, where className is more flexible. Consider a simple HTML change like wrapping links in a list item, or occasionally using a <button /> to handle click events, it would break the styles if you used child selectors: <ul class="link-list> <li><a href="#" /></li> </ul> ^ even with this tiny change, your styles are gone. Would have to change it to: .link-list > li > a {} And would have to repeat that for anything else you'd want to support later: .link-list > li > a, .link-list > li > button {} etc. Where with a normal className it would just work in all those cases without having to touch CSS again: <div class="link-list> <a class="transition-link" href="#" /> <span><a class="transition-link" href="#" /></span> <button class="transition-link" /> <ul class="flyout-menu"> <li> <ul class="sub-menu"> <li><a class="transition-link" href="#" /></li> </ul> </li> </ul> </div> All those would be styled correctly without having to explicitly list descendant structures in CSS. So it's more flexible just using className and I would only use > for specific situations.
  • Kiro 2y ago
    Don't do that. You will regret it.
    • yladiz 2y ago
      Why?
• chrstphrknwtn 2y ago
  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.