4 ms·

A lot of CSS tooling feels designed to overcomplicate it so it feels more like "engineering" rather than "markup". I find Tailwind particularly bizarre, essenti

A lot of CSS tooling feels designed to overcomplicate it so it feels more like "engineering" rather than "markup". I find Tailwind particularly bizarre, essentially writing your CSS as inline styles via single use non-semantic classes is absurd to me. Wasn't CSS invented so we didn't have to write every html element "its blue, centered text and bold font" yet people willingly choose to use class="items-center font-bold text-blue-600" and running it through a compiler.

rsynnott 2y ago
Huh. Yeah, I'd never heard of Tailwind before, but this looks suspiciously like how people formatted HTML _before_ CSS existed.
- cess11 2y ago
  If all your frontend code lives in component files then it is quite nice that all the styling is also local to those components so you don't end up with horrors in unexpected places because you changed a line in a CSS file. Since it's already in component files you can use the templating already present in that context to fill in values from colour schemes and so on, without the hazards of cascading.
cess11 2y ago
I have an LLM synthesised HTML file that links in a remote tailwind.css and contains no script tags or any JS at all. It contains a lot of class="bg-cover bg-center h-screen" and class="text-3xl font-bold text-gray-800 mb-4" that I don't really understand, and this file renders just fine in a web browser. Where do you expect that compiler to come into this? Or is it me that doesn't understand Tailwind and this is actually not Tailwind, just some random CSS with the same name that a compressed database puked up for me?
- whywhywhywhy 2y ago
  > Where do you expect that compiler to come into this? Whole article is about getting the tailwind compiler and its dependencies up and running on a 12 year old CPU so it must be important somehow...
  - cess11 2y ago
    OK, but I don't recognise this from my scant experience with Tailwind, which consists of either having a framework do whatever it does with ":tailwind" (maybe it's a compiler, I don't know) which it has done without me noticing anything at all or putting a link in a link-element to pull in a CSS. So I'm wondering whether this compiler/preprocessor stuff is actually something people run into and my experience is deceptive, or if it's something happening to few people, on the margins, that I'll likely never experience. Because it matters to me, since I'm not going to spend time digesting the Tailwind docs and whatnot and will forever stay a casual, disinterested user that cribs some stuff I don't understand from search interfaces. If I can't expect this to continue working as it has I'll have to figure out a way to ditch the Tailwind stuff I'm already using.
    - julik 2y ago
      Yes, they run it - but for most it is melted into another bundler like PostCSS. The few of us who try to resist the "just use bundlers for everything and everywhere" do notice that there is now a bundler process firmly anchored in your development process. And yes, being able to jettison a pre-processor for frontend things is a very necessary thing, and unless the designers have accounted for this (I only know of create-react-app having a "jettison" feature, and then - just) you are in for a heap of fun if you need to resurrect a 5-years old app with its dev environment.
- julik 2y ago
  I know the feeling. The way it works is that Tailwind parses your HTML, finds `mb-4` and thus knows that it needs to emit the `.mb-4 { margin-bottom: some-var-calc-thing-in-4-increments-of-your-layout }. So it is not as much of a compiler - it is a preprocessor, with the idea being to output just the utility classes that you use. With "all" the utility classes being this multi-MB CDN version... only if it worked.
  - cess11 2y ago
    Is there somehow a preprocessor invoked through the link-element? Or is this about some optional stuff to produce custom Tailwind style CSS files?
    - julik 2y ago
      No, the pre-processor has to be running continuously in "watch" mode with patterns for all your HTML (and sorta-HTML) files. When it detects a change in one of them, it chews through the changed file and emits a .css file into your web root which is the particular subset of Tailwind you are actually using.
graemep 2y ago
> Wasn't CSS invented so we didn't have to write every html element "its blue, centered text and bold font" yet people willingly choose to use class="items-center font-bold text-blue-600" and running it through a compiler. Tailwind is far from the first framework to require it. Bootstrap has things like .center and its entire basis are layout classes for the grid. its responsive by default, but not semantic. I think CSS has failed because people want far more control on appearance (for branding and aesthetics) than the people devising it anticipated. The motivation for semantic markup has also reduced because people write much less HTML. You might have some markup in what you edit, but the layout and base styles are usually generated by a system (e.g. a CMS). Even most people serving static files use a site generator.
- pjmlp 2y ago
  Just like everything in good old Web, CSS was designed for documents, not interactive applications themes.
- julik 2y ago
  I don't think CSS has failed - it's just a big and complex system for automatic layout. Automatic layout is hard, and if the age and power of CSS show us anything - is that it has succeeded. Comparing CSS of today to CSS of, say, 2005, is just night and day. I don't think doing layout using other means (formatting specifiers? spacer elements?) would have been that much different, given that it's constraints all the way. The difficult bit is that the layout is not fixed - and it's a pain either way you do it, doing things well in InterfacerBuilder.app was also a struggle. Yes, "center things" is ridiculous because you have to do it "4 different ways" with different tradeoffs - and there are some areas where things are still very painful (text-box-trim just now becoming available). But "failed"?.. that is a bit harsh.
immibis 2y ago
Someone told me about Tailwind last week on IRC, and I literally do not see the point of writing class="font-bold" versus style="font-weight:bold;" especially if the former means you have to add a whole bunch more complexity to your build process (and to have a build process at all). I wrote my website in C, so I don't know about this modern web process stuff.

rsynnott 2y ago

Huh. Yeah, I'd never heard of Tailwind before, but this looks suspiciously like how people formatted HTML _before_ CSS existed.

cess11 2y ago
If all your frontend code lives in component files then it is quite nice that all the styling is also local to those components so you don't end up with horrors in unexpected places because you changed a line in a CSS file. Since it's already in component files you can use the templating already present in that context to fill in values from colour schemes and so on, without the hazards of cascading.

cess11 2y ago

I have an LLM synthesised HTML file that links in a remote tailwind.css and contains no script tags or any JS at all. It contains a lot of class="bg-cover bg-center h-screen" and class="text-3xl font-bold text-gray-800 mb-4" that I don't really understand, and this file renders just fine in a web browser. Where do you expect that compiler to come into this? Or is it me that doesn't understand Tailwind and this is actually not Tailwind, just some random CSS with the same name that a compressed database puked up for me?

whywhywhywhy 2y ago
> Where do you expect that compiler to come into this? Whole article is about getting the tailwind compiler and its dependencies up and running on a 12 year old CPU so it must be important somehow...
- cess11 2y ago
  OK, but I don't recognise this from my scant experience with Tailwind, which consists of either having a framework do whatever it does with ":tailwind" (maybe it's a compiler, I don't know) which it has done without me noticing anything at all or putting a link in a link-element to pull in a CSS. So I'm wondering whether this compiler/preprocessor stuff is actually something people run into and my experience is deceptive, or if it's something happening to few people, on the margins, that I'll likely never experience. Because it matters to me, since I'm not going to spend time digesting the Tailwind docs and whatnot and will forever stay a casual, disinterested user that cribs some stuff I don't understand from search interfaces. If I can't expect this to continue working as it has I'll have to figure out a way to ditch the Tailwind stuff I'm already using.
  - julik 2y ago
    Yes, they run it - but for most it is melted into another bundler like PostCSS. The few of us who try to resist the "just use bundlers for everything and everywhere" do notice that there is now a bundler process firmly anchored in your development process. And yes, being able to jettison a pre-processor for frontend things is a very necessary thing, and unless the designers have accounted for this (I only know of create-react-app having a "jettison" feature, and then - just) you are in for a heap of fun if you need to resurrect a 5-years old app with its dev environment.
julik 2y ago
I know the feeling. The way it works is that Tailwind parses your HTML, finds `mb-4` and thus knows that it needs to emit the `.mb-4 { margin-bottom: some-var-calc-thing-in-4-increments-of-your-layout }. So it is not as much of a compiler - it is a preprocessor, with the idea being to output just the utility classes that you use. With "all" the utility classes being this multi-MB CDN version... only if it worked.
- cess11 2y ago
  Is there somehow a preprocessor invoked through the link-element? Or is this about some optional stuff to produce custom Tailwind style CSS files?
  - julik 2y ago
    No, the pre-processor has to be running continuously in "watch" mode with patterns for all your HTML (and sorta-HTML) files. When it detects a change in one of them, it chews through the changed file and emits a .css file into your web root which is the particular subset of Tailwind you are actually using.

graemep 2y ago

> Wasn't CSS invented so we didn't have to write every html element "its blue, centered text and bold font" yet people willingly choose to use class="items-center font-bold text-blue-600" and running it through a compiler. Tailwind is far from the first framework to require it. Bootstrap has things like .center and its entire basis are layout classes for the grid. its responsive by default, but not semantic. I think CSS has failed because people want far more control on appearance (for branding and aesthetics) than the people devising it anticipated. The motivation for semantic markup has also reduced because people write much less HTML. You might have some markup in what you edit, but the layout and base styles are usually generated by a system (e.g. a CMS). Even most people serving static files use a site generator.

pjmlp 2y ago
Just like everything in good old Web, CSS was designed for documents, not interactive applications themes.
julik 2y ago
I don't think CSS has failed - it's just a big and complex system for automatic layout. Automatic layout is hard, and if the age and power of CSS show us anything - is that it has succeeded. Comparing CSS of today to CSS of, say, 2005, is just night and day. I don't think doing layout using other means (formatting specifiers? spacer elements?) would have been that much different, given that it's constraints all the way. The difficult bit is that the layout is not fixed - and it's a pain either way you do it, doing things well in InterfacerBuilder.app was also a struggle. Yes, "center things" is ridiculous because you have to do it "4 different ways" with different tradeoffs - and there are some areas where things are still very painful (text-box-trim just now becoming available). But "failed"?.. that is a bit harsh.

immibis 2y ago

Someone told me about Tailwind last week on IRC, and I literally do not see the point of writing class="font-bold" versus style="font-weight:bold;" especially if the former means you have to add a whole bunch more complexity to your build process (and to have a build process at all). I wrote my website in C, so I don't know about this modern web process stuff.