5 ms·

> 5. Not skipping back and forth between HTML or CSS files. What? I thought the point of this was for use with composable JS components. You're manually writi

> 5. Not skipping back and forth between HTML or CSS files. What? I thought the point of this was for use with composable JS components. You're manually writing and updating attributes like this?! class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10" How could you possibly manage this without components? Ctrl-F "lg:text-7xl" and replace?

ssijak 6y ago
You make components as usual, but you style with those utility classes. Those utility classes are configurable in one theme file where you can set what "text-4xl" is or how much space "mt-10" is.
yurishimo 6y ago
Yes, if it's not componentized into a smaller chunk, find and replace works fine. The beauty of Tailwind is though, if you change that, you know exactly what the consequence is since every utility is so highly targeted. You absolutely do skip between lots of HTML/JSX/VUE files, but that's true of any project. The point of tailwind is to keep you in the view layer of your project and not jumping between more than a browser and one tab in a code editor when building your UI.
- JxLS-cpgbe0 6y ago
  > find and replace works fine It would replace every `.font-extrabold` element on the page. What if I only want to update my extra bold headlines, not the extra bold subheadings? Global search-and-replace breaks my subheadings. >> 5. Not skipping back and forth between HTML or CSS files [with Tailwind] > You absolutely do skip between lots of HTML [with Tailwind] ??
  - Wolfr_ 6y ago
    Yep. There's so many global replace situations where the logic completely breaks.
    - lemonberry 6y ago
      In my experience global replace is much easier across multiple component files rather than multiple CSS files. If I need to do change a font color I do a search and know to change it based on the file/component it's used in. If I had to change the color in css files I'd have to review the class and also track down where that class is in use.
lemonberry 6y ago
Sometimes I extract to component classes, but in Laravel or Statamc the html element and the classes have already been extracted to a component so there's only one place to make the change anyway. When doing WordPress sites I extract to component classes more often.
deergomoo 6y ago
You don’t need to be using a JS framework to have components. Pretty much any server-side templating language allows extracting “components” in the form of reusable HTML fragments. And even if you’re serving static HTML, there’s plenty of ways to compile a template into a static file.
- JxLS-cpgbe0 6y ago
  Right, components. Not a search-and-replace for every instance of ".color-pink" in your codebase, suggested by the parent.
cactus2093 6y ago
Lots of good responses already on other ways to abstract, but I'll even go one further and say "sure, why not?" When are you changing every single instance of "lg:text-7xl"? More often you're probably making a change in one single place in the app, in which case this is incredibly easy, you just make your change where you want. You're not slowed down by digging through layers of abstraction cruft and indirection until you find the right place to make the change. If you're doing an entire site design refresh, then doing some find and replace isn't really that crazy. For something you do relatively infrequently like this (maybe every couple of months or even every couple of years?) it's not a big deal if it takes a little bit longer. And likely you'll need to look through and test your changes on every page one by one anyway, to make sure you're not breaking anything you didn't mean to. You'll need to do that whether you changed the definition of a css class, or you made a bunch of inline changes, at which point making the actual code edits inline probably isn't even the bottleneck. But again, that's perhaps a bit extreme of a way to look at it. You will inevitably have some layer of abstraction anyway, something like components or templates or partials, in which to wrap your styles.
- JxLS-cpgbe0 6y ago
  > When are you changing every single instance of "lg:text-7xl" I'm not, I'm changing some 7xl-sized text in multiple places. But I don't want to change every element that is .lg:text-7xl already. > If you're doing an entire site design refresh I'm not > You will inevitably have some layer of abstraction anyway, something like components I already do, they're in JS, and much more powerful and extensible than HTML attributes.
  - kbatdorf 6y ago
    You could also update the Tailwind config file to define what "text-7xl" is. Default is "4.5rem"
    - hanniabu 6y ago
      > But I don't want to change every element that is .lg:text-7xl already.

ssijak 6y ago

You make components as usual, but you style with those utility classes. Those utility classes are configurable in one theme file where you can set what "text-4xl" is or how much space "mt-10" is.

yurishimo 6y ago

Yes, if it's not componentized into a smaller chunk, find and replace works fine. The beauty of Tailwind is though, if you change that, you know exactly what the consequence is since every utility is so highly targeted. You absolutely do skip between lots of HTML/JSX/VUE files, but that's true of any project. The point of tailwind is to keep you in the view layer of your project and not jumping between more than a browser and one tab in a code editor when building your UI.

JxLS-cpgbe0 6y ago
> find and replace works fine It would replace every `.font-extrabold` element on the page. What if I only want to update my extra bold headlines, not the extra bold subheadings? Global search-and-replace breaks my subheadings. >> 5. Not skipping back and forth between HTML or CSS files [with Tailwind] > You absolutely do skip between lots of HTML [with Tailwind] ??
- Wolfr_ 6y ago
  Yep. There's so many global replace situations where the logic completely breaks.
  - lemonberry 6y ago
    In my experience global replace is much easier across multiple component files rather than multiple CSS files. If I need to do change a font color I do a search and know to change it based on the file/component it's used in. If I had to change the color in css files I'd have to review the class and also track down where that class is in use.

lemonberry 6y ago

Sometimes I extract to component classes, but in Laravel or Statamc the html element and the classes have already been extracted to a component so there's only one place to make the change anyway. When doing WordPress sites I extract to component classes more often.

deergomoo 6y ago

You don’t need to be using a JS framework to have components. Pretty much any server-side templating language allows extracting “components” in the form of reusable HTML fragments. And even if you’re serving static HTML, there’s plenty of ways to compile a template into a static file.

JxLS-cpgbe0 6y ago
Right, components. Not a search-and-replace for every instance of ".color-pink" in your codebase, suggested by the parent.

cactus2093 6y ago

Lots of good responses already on other ways to abstract, but I'll even go one further and say "sure, why not?" When are you changing every single instance of "lg:text-7xl"? More often you're probably making a change in one single place in the app, in which case this is incredibly easy, you just make your change where you want. You're not slowed down by digging through layers of abstraction cruft and indirection until you find the right place to make the change. If you're doing an entire site design refresh, then doing some find and replace isn't really that crazy. For something you do relatively infrequently like this (maybe every couple of months or even every couple of years?) it's not a big deal if it takes a little bit longer. And likely you'll need to look through and test your changes on every page one by one anyway, to make sure you're not breaking anything you didn't mean to. You'll need to do that whether you changed the definition of a css class, or you made a bunch of inline changes, at which point making the actual code edits inline probably isn't even the bottleneck. But again, that's perhaps a bit extreme of a way to look at it. You will inevitably have some layer of abstraction anyway, something like components or templates or partials, in which to wrap your styles.

JxLS-cpgbe0 6y ago
> When are you changing every single instance of "lg:text-7xl" I'm not, I'm changing some 7xl-sized text in multiple places. But I don't want to change every element that is .lg:text-7xl already. > If you're doing an entire site design refresh I'm not > You will inevitably have some layer of abstraction anyway, something like components I already do, they're in JS, and much more powerful and extensible than HTML attributes.
- kbatdorf 6y ago
  You could also update the Tailwind config file to define what "text-7xl" is. Default is "4.5rem"
  - hanniabu 6y ago
    > But I don't want to change every element that is .lg:text-7xl already.