5 ms·

I moved away from using Tailwind CSS, but still use their "preflight.css" [1]. It doesn't really care about backwards compatibility (IE stuff), but does a great

by simjnd 1y ago

I moved away from using Tailwind CSS, but still use their "preflight.css" [1]. It doesn't really care about backwards compatibility (IE stuff), but does a great job at unstyling everything so you have a clean cross-browser base to work with (button will look like text until you add your styling). [1]: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css https://github.com/tailwindlabs/tailwindcss/blob/main/packag...

BrandoElFollito 1y ago
Could you write a few words why you moved away from TailwindCSS? I am an amateur dev (I write open-source useful for me and possibly others) and I am prone to the "front-end diarrhea syndrome", where when I see something cooler, I jump on it and regret afterwards the time spent. I am on TailwindCSS right now and I am afraid to learn the drawbacks, but one must be courageous in life.
- alt187 1y ago
  https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ This is a pretty good post. In general, I don't think `class` is a good place for styling.
  - pacha3000 1y ago
    This is actually an awesome post, thank you for sharing
  - BrandoElFollito 1y ago
    Thank you, this is a nice post. On the other hand, the author is happy to have HTML and CSS generated with JS, which is weird as well (I know - React).
    - llbbdd 1y ago
      Why is that weird?
      - BrandoElFollito 11mo ago
        Because his article is about bringing back CSS to its glory (more or less :)) and at the same time is happy with his HTML being generated by JS. Instead of having a pure semantic HTML section. I am not saying that is good or bad (I use Vue for instance), just a bit contradictory. But that's nitpicking on my side.
    - alt187 11mo ago
      I agree, I like my CSS good and saved in a .css file.
  - chrisweekly 1y ago
    It has some good points (and vanilla-extract IS awesome), but it's also a bit unfair, eg ignoring tailwind affordances like `apply`. That said, for learning the "right" way to think about and use CSS, https://every-layout.dev https://every-layout.dev is hands-down the best resource I've encountered in my 20+ years working with websites.
  - hungryhobbit 1y ago
    What a terrible article! The author is so very ignorant, but presents themselves as an expert :( I barely got into the "dunking" on Tailwind when I saw this. > If you misspell one of these plain strings your editor is not going to tell you. Ummm ... sure, if you're one of the 1% of devs who refuse to use a linter. Either the author is part of that 1%, or maybe they just weren't aware of Tailwind's linting capabilities (https://tailwindcss.com/blog/introducing-linting-for-tailwindcss-intellisense https://tailwindcss.com/blog/introducing-linting-for-tailwin...). Now, to be fair, they wrote the article in 2025, and Tailwind linting was only released five years prior (in 2020) ... five years is hardly long enough to learn relevant tech for your industry /s The rest of the article seemed similarly ill-informed, with the author fixating on meaningless byte-size differences in contrived examples. However, he ignores the fact that Tailwind is used on some of the most performant sites on the Internet. He also ignores the fact that (for 99% of sites at least) sacrificing a k or two of bandwidth is well worth it for a major increase in developability. With Tailwind you completely get rid of stylesheets: that alone is huge! There's a reason why so many devs use Tailwind: they don't worry about minimal file size differences, but they do care about massive savings in development time and complexity reduction.
    - spoiler 1y ago
      You described a lot of orthogonal points and highlighted your opinions, more than pointed out flaws in the article. I use Tailwind at work at a large company, and it's... Okay. Its biggest strength is the documentation, since most companies have poorly documented style guide/component library. I'd never use it for a personal project though. It's fine to disagree
- simjnd 1y ago
  I find it just inevitably leads to massive classes that pollute markup. Makes it a lot harder to parse HTML and figure out the structure. There are ways to make it a bit better but it's still not great (for me). It's even worse with conditional styling since you're not toggling a single class on an off but dozens. You can't use string interpolation for classes, e.g. `<div class={`bg-${color}-400`}>` (Tailwind won't include the classes in your CSS because it doesn't recognize you want all or a subset of bg-<color>-400 classes. They recommend using maps but this becomes very verbose once there are more than a few options. ``` const colorMap = { 'red' : 'bg-red-400', 'blue': 'bg-blue-400' } <div class={colorMap[color]}></div> ``` I'm using Svelte which has a great built-in styling solution with component-scoped styles by default, and modern CSS with nesting is a lot more compact than it used to be.
JimDabell 1y ago
I took a look thinking that this might actually be useful and somehow came away with an even lower opinion of Tailwind. It’s all like this: /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Reset the default border style to a 1px solid border. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } Why can’t they do anything reasonably? It would be easy to put code comments against the actual code it is commenting, but instead they do this weird comment index up front.
- zinekeller 1y ago
  Because this is how Normalize.css was written (and I suspect this is Normalize.css-derived).
- brazukadev 1y ago
  that is how open source code used to be written before AI and it was appreciated, actually.
  - JimDabell 1y ago
    Pretty much everybody here has been coding long enough to know that is a blatant untruth.

by simjnd 1y ago

BrandoElFollito 1y ago

Could you write a few words why you moved away from TailwindCSS? I am an amateur dev (I write open-source useful for me and possibly others) and I am prone to the "front-end diarrhea syndrome", where when I see something cooler, I jump on it and regret afterwards the time spent. I am on TailwindCSS right now and I am afraid to learn the drawbacks, but one must be courageous in life.

alt187 1y ago
https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ https://colton.dev/blog/tailwind-is-the-worst-of-all-worlds/ This is a pretty good post. In general, I don't think `class` is a good place for styling.
- pacha3000 1y ago
  This is actually an awesome post, thank you for sharing
- BrandoElFollito 1y ago
  Thank you, this is a nice post. On the other hand, the author is happy to have HTML and CSS generated with JS, which is weird as well (I know - React).
  - llbbdd 1y ago
    Why is that weird?
    - BrandoElFollito 11mo ago
      Because his article is about bringing back CSS to its glory (more or less :)) and at the same time is happy with his HTML being generated by JS. Instead of having a pure semantic HTML section. I am not saying that is good or bad (I use Vue for instance), just a bit contradictory. But that's nitpicking on my side.
  - alt187 11mo ago
    I agree, I like my CSS good and saved in a .css file.
- chrisweekly 1y ago
  It has some good points (and vanilla-extract IS awesome), but it's also a bit unfair, eg ignoring tailwind affordances like `apply`. That said, for learning the "right" way to think about and use CSS, https://every-layout.dev https://every-layout.dev is hands-down the best resource I've encountered in my 20+ years working with websites.
- hungryhobbit 1y ago
  What a terrible article! The author is so very ignorant, but presents themselves as an expert :( I barely got into the "dunking" on Tailwind when I saw this. > If you misspell one of these plain strings your editor is not going to tell you. Ummm ... sure, if you're one of the 1% of devs who refuse to use a linter. Either the author is part of that 1%, or maybe they just weren't aware of Tailwind's linting capabilities (https://tailwindcss.com/blog/introducing-linting-for-tailwindcss-intellisense https://tailwindcss.com/blog/introducing-linting-for-tailwin...). Now, to be fair, they wrote the article in 2025, and Tailwind linting was only released five years prior (in 2020) ... five years is hardly long enough to learn relevant tech for your industry /s The rest of the article seemed similarly ill-informed, with the author fixating on meaningless byte-size differences in contrived examples. However, he ignores the fact that Tailwind is used on some of the most performant sites on the Internet. He also ignores the fact that (for 99% of sites at least) sacrificing a k or two of bandwidth is well worth it for a major increase in developability. With Tailwind you completely get rid of stylesheets: that alone is huge! There's a reason why so many devs use Tailwind: they don't worry about minimal file size differences, but they do care about massive savings in development time and complexity reduction.
  - spoiler 1y ago
    You described a lot of orthogonal points and highlighted your opinions, more than pointed out flaws in the article. I use Tailwind at work at a large company, and it's... Okay. Its biggest strength is the documentation, since most companies have poorly documented style guide/component library. I'd never use it for a personal project though. It's fine to disagree
simjnd 1y ago
I find it just inevitably leads to massive classes that pollute markup. Makes it a lot harder to parse HTML and figure out the structure. There are ways to make it a bit better but it's still not great (for me). It's even worse with conditional styling since you're not toggling a single class on an off but dozens. You can't use string interpolation for classes, e.g. `<div class={`bg-${color}-400`}>` (Tailwind won't include the classes in your CSS because it doesn't recognize you want all or a subset of bg-<color>-400 classes. They recommend using maps but this becomes very verbose once there are more than a few options. ``` const colorMap = { 'red' : 'bg-red-400', 'blue': 'bg-blue-400' } <div class={colorMap[color]}></div> ``` I'm using Svelte which has a great built-in styling solution with component-scoped styles by default, and modern CSS with nesting is a lot more compact than it used to be.

JimDabell 1y ago

I took a look thinking that this might actually be useful and somehow came away with an even lower opinion of Tailwind. It’s all like this: /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Reset the default border style to a 1px solid border. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } Why can’t they do anything reasonably? It would be easy to put code comments against the actual code it is commenting, but instead they do this weird comment index up front.

zinekeller 1y ago
Because this is how Normalize.css was written (and I suspect this is Normalize.css-derived).
brazukadev 1y ago
that is how open source code used to be written before AI and it was appreciated, actually.
- JimDabell 1y ago
  Pretty much everybody here has been coding long enough to know that is a blatant untruth.