4 ms·

I find Tailwind's claim that you can "build modern websites without ever leaving your HTML" to not be entirely correct. Instead of context switching from my `.h

I find Tailwind's claim that you can "build modern websites without ever leaving your HTML" to not be entirely correct. Instead of context switching from my `.html` to a `.scss` file, I just end up context switching to their documentation website to find the syntax they used. It's internally inconsistent, so you can't guess what the Tailwind class name is for styling, while you can do this for CSS on the majority of properties. In Tailwind, font weights are just `font-bold` for `font-weight:bold`, while font variants drop the `font-` prefix part, and become `ordinal` instead of `font-variant-numeric:ordinal`. That's not an isolated example, it does the same with text-color versus text-decoration, and text-decoration-color adheres to neither of those systems. It's quite close to learning an entire new styling language on top of CSS. It may be the case that putting everything into the HTML is more efficient from a productivity point of view, but I don't think Tailwind's specific implementation achieves that.

Prosammer 3y ago
a lot of this minutiae will be handled by gpt moving forward, and keeping it all in the same file will be helpful for context
sibit 3y ago
It's the minor inconsistencies that prevented me from using Tailwind on any serious projects. I've never been able to get past their choice to use text-{color} instead of font-{color}.
- nkohari 3y ago
  That isn't an inconsistency, it's an intentional choice. The color of the text is an aspect of the text, not of the font. The corresponding property in CSS is color, not font-color.
  - sibit 3y ago
    > The corresponding property in CSS is color, not font-color. So why not color-{color}-{shade}?
    - nkohari 3y ago
      Because text-{color}-{shade} is more descriptive of what the color affects. Again color is not an aspect of the font (which is the typeface plus styling like weight, size, etc.) so naming it font-{color}-{shade} would be technically incorrect. (You can argue that ignoring this technicality would result in a cleaner API, but the comment I was replying to was suggesting it was a mistake, which it isn't.)
      - sibit 3y ago
        One person's intentional choice is another's inconsistent mistake. I like to think that's what makes software wonderful yet endlessly frustrating.
    - arrowsmith 3y ago
      presumably it's for consistency with other classes like `bg-{color}-{shade}` and `border-{color}-{shade}`.
  - corny 3y ago
    But "color" doesn't apply to just text. Changing the color of an element affects the currentColor and applies to default border colors. The property name "color" makes more sense than "text-color" imho.
toldyouso2022 3y ago
To enjoy tailwind you have to install the vscode plugin so it will speed things up when searching for the right class. Also watch some short tutorial to get an overview. If you don't appreciate it after this then it really isn't for you
- LocalPCGuy 3y ago
  And for those that prefer a different editor? Just saying, if a tool then pushes you into another specific tool for maximum efficiency using it, that alone gives me pause.
  - ceejayoz 3y ago
    > And for those that prefer a different editor? A plugin is likely available for that, too. I use PHPStorm a lot; https://www.jetbrains.com/help/phpstorm/tailwind-css.html https://www.jetbrains.com/help/phpstorm/tailwind-css.html Panic's Nova? https://extensions.panic.com/extensions/jasonplatts/jasonplatts.tailwindcss/ https://extensions.panic.com/extensions/jasonplatts/jasonpla... Vim? https://vimawesome.com/plugin/coc-tailwindcss https://vimawesome.com/plugin/coc-tailwindcss etc.
    - LocalPCGuy 3y ago
      Missed the underlying point but I'll make it explicit - if a plugin is "needed" that is also a red flag for me.
      - ceejayoz 3y ago
        I suspect the number of developers with zero plugins in their IDE of choice is vanishingly small. That said, it's not needed. It's just a quality-of-life improvement, like most other IDE features. You can write a Tailwind site in Notepad, if you prefer.
        deleted 3y ago
        [deleted]
onion2k 3y ago
I just end up context switching to their documentation website to find the syntax they used. I don't, but I've been using Tailwind for a little while. Once you grok the syntax structure it's not that different to writing CSS.
- yakshaving_jgt 3y ago
  If it's not that different, then you may as well just write CSS.
  - onion2k 3y ago
    The difference is that I can write Tailwind faster, without switching files, and in a way that's always consistent with the rest of the team. That makes it worthwhile for me.
  - volkandkaya 3y ago
    Maintaining is a different story and that is where Tailwind shines.
    - yakshaving_jgt 3y ago
      Maintainability is of course subjective. Personally, I think this code looks like utter shit, and I definitely would not wish to maintain this. <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Product</a> <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a> <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Marketplace</a> <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Company</a> This isn't a pathological example constructed to undermine Tailwind either — this code is copied and pasted from their website.

Prosammer 3y ago

a lot of this minutiae will be handled by gpt moving forward, and keeping it all in the same file will be helpful for context

sibit 3y ago

It's the minor inconsistencies that prevented me from using Tailwind on any serious projects. I've never been able to get past their choice to use text-{color} instead of font-{color}.

nkohari 3y ago
That isn't an inconsistency, it's an intentional choice. The color of the text is an aspect of the text, not of the font. The corresponding property in CSS is color, not font-color.
- sibit 3y ago
  > The corresponding property in CSS is color, not font-color. So why not color-{color}-{shade}?
  - nkohari 3y ago
    Because text-{color}-{shade} is more descriptive of what the color affects. Again color is not an aspect of the font (which is the typeface plus styling like weight, size, etc.) so naming it font-{color}-{shade} would be technically incorrect. (You can argue that ignoring this technicality would result in a cleaner API, but the comment I was replying to was suggesting it was a mistake, which it isn't.)
    - sibit 3y ago
      One person's intentional choice is another's inconsistent mistake. I like to think that's what makes software wonderful yet endlessly frustrating.
  - arrowsmith 3y ago
    presumably it's for consistency with other classes like `bg-{color}-{shade}` and `border-{color}-{shade}`.
- corny 3y ago
  But "color" doesn't apply to just text. Changing the color of an element affects the currentColor and applies to default border colors. The property name "color" makes more sense than "text-color" imho.

toldyouso2022 3y ago

To enjoy tailwind you have to install the vscode plugin so it will speed things up when searching for the right class. Also watch some short tutorial to get an overview. If you don't appreciate it after this then it really isn't for you

LocalPCGuy 3y ago
And for those that prefer a different editor? Just saying, if a tool then pushes you into another specific tool for maximum efficiency using it, that alone gives me pause.
- ceejayoz 3y ago
  > And for those that prefer a different editor? A plugin is likely available for that, too. I use PHPStorm a lot; https://www.jetbrains.com/help/phpstorm/tailwind-css.html https://www.jetbrains.com/help/phpstorm/tailwind-css.html Panic's Nova? https://extensions.panic.com/extensions/jasonplatts/jasonplatts.tailwindcss/ https://extensions.panic.com/extensions/jasonplatts/jasonpla... Vim? https://vimawesome.com/plugin/coc-tailwindcss https://vimawesome.com/plugin/coc-tailwindcss etc.
  - LocalPCGuy 3y ago
    Missed the underlying point but I'll make it explicit - if a plugin is "needed" that is also a red flag for me.
    - ceejayoz 3y ago
      I suspect the number of developers with zero plugins in their IDE of choice is vanishingly small. That said, it's not needed. It's just a quality-of-life improvement, like most other IDE features. You can write a Tailwind site in Notepad, if you prefer.
      - deleted 3y ago
        [deleted]

onion2k 3y ago

I just end up context switching to their documentation website to find the syntax they used. I don't, but I've been using Tailwind for a little while. Once you grok the syntax structure it's not that different to writing CSS.

yakshaving_jgt 3y ago
If it's not that different, then you may as well just write CSS.
- onion2k 3y ago
  The difference is that I can write Tailwind faster, without switching files, and in a way that's always consistent with the rest of the team. That makes it worthwhile for me.
- volkandkaya 3y ago
  Maintaining is a different story and that is where Tailwind shines.
  - yakshaving_jgt 3y ago
    Maintainability is of course subjective. Personally, I think this code looks like utter shit, and I definitely would not wish to maintain this. <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Product</a> <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a> <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Marketplace</a> <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Company</a> This isn't a pathological example constructed to undermine Tailwind either — this code is copied and pasted from their website.