4 ms·

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-ce

by 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.

by cess11 2y ago

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.