13 ms·

Tailwind CSS v3.2: revisiting my “feature creep” warning

110 points by brycewray 4y ago

mikojan 4y ago
Nice! They've introduced the "aria-*"-variants I had previously been adding via their plugin API. Real cool I can style based on whether an element is being pressed in a cross browser compatible way without ever touching the config now.
thangngoc89 4y ago
I've used a lot of tools for writing "CSS" over the years: pure CSS, CSS modules, SASS, LESS, BEM,... I think when using Tailwind, you have to know the "real" CSS anyway, but the most important thing that Tailwind offers is the consistency. So you need 1-unit padding? `p-1`. Double that? `p-2`. Still not enough? `p-3`. More? `p-4`. I don't have to think and do math in my head like 0.25rem, 0.5rem, 1rem,... and IMHO, it's a big enough win for me to keep using Tailwind CSS. The features that were introduced in recent versions are just about supporting more CSS features to be more complete and not about feature-bloat.
- klysm 4y ago
  I get that same exact property with css-in-js. All my components have a p prop and an m prop
  - thangngoc89 4y ago
    I'm not sure about libraries that could compile and extract to static css like linaria, but Tailwind is 100% compile time only, all CSS are generated and there isn't any runtime overhead.
- waboremo 4y ago
  That doesn't seem like a big enough win when CSS variables exist and offer far more readable options (as you're the one naming them). On that front, I reckon majority of Tailwind developers use far fewer variables than they believe, so it's not some gigantic monumental task where you have to set up a million different CSS variables. This is the problem with Tailwind, it doesn't offer enough nor does it move faster than CSS to justify its existence. The only real use case for it seems to be solo developers that do not have the time or resources to set up their own baseline set of variables, or those that use it with a component library that's based on TW.
  - dawnerd 4y ago
    I think you need a reality check on who actually uses Tailwind. Very large cops and sites use it because it improves the dev exp and increases performance through smaller file sizes. Further I’m not sure what you mean about not moving fast enough, they just added container queries.
    - waboremo 4y ago
      Yes, and you'll find many of those very large corps are questioning why they're using it now. Which is a great thing, many businesses should be in constant reevaluation of why they rely on certain tooling. Personally doubt the better performance, I have yet to see a case where that is true unless they were comparing it unevenly to some behemoth like Styled-Components. When you compare it to SASS the performance difference ceases to exist. Same with "improves the dev exp", I don't see how this is the case at all especially when you have to install an additional extension to get full proper support in your IDE of choice. You are still working with variables, if you are on a tiny team/solo, it makes sense to use Tailwind defaults but on a large team where your design team should be creating their own? What use does Tailwind have then when the utility classes are just going to be overwritten? You're still creating the components yourself.
    - ricardobeat 4y ago
      I suggest you double check those performance claims. The CSS might be smallish, but you're usually moving the weight to non-cached HTML which is re-downloaded on every page view. I helped analyze the impact on a very large website (billion+ pageviews) and it did not look very good.
      - johnchristopher 4y ago
        What you are saying is: "tailwind class names are cumulative and so verbosein the HTML tag that it negates the benefits of smaller CSS and eat the bytes saved?". Am I reading that right ?
        4y ago
- csande17 4y ago
  Funny, I had the exact opposite experience using Tailwind: my design tools gave me measurements in pixels or rems, and I had to do math to convert them into Tailwind units.
- hypertele-Xii 4y ago
  > I don't have to think and do math in my head Imagine being a computer programmer and not thinking nor doing math in your head. Good thing there are other people to do the thinking and math for you, huh? Because the multiplication table for 0.25 is too complicated... Next you'll need an enterprise-grade library for adding numbers together. Because sums are hard, man. Who's got time to remember what 1+1 is?
gmaster1440 4y ago
I've always found the "Tailwind as CSS shim" attitude compelling, and like most shims will successfully pave the way for its own gradual superfluousness (a good thing imo).
jackconsidine 4y ago
It seems straightforward to just bite off what you need from Tailwind- the new features won't inhibit you from continuing to write flex and padding interfaces. I don't even think that a selling point of TW is not needing to learn CSS. It's easier a lot of times and cleaner to refrain from adding new files with conventions you have to come up with to do something that takes 4 characters with TW
naiv 4y ago
I don't understand the reasoning of 'feature creep'. If the author has an idea for better improvements, hit up the Tailwind team. Feature creep does not mean that you need to use the features.
- brycewray 4y ago
  True, you don‘t need to know them, but they’re in the ever-growing documentation. I guess I’m thinking about teams which are onboarding devs who are new to Tailwind. It was a lot easier intro two years ago than it would be now, and I’m uncertain of how much brainpower and time it now truly saves for those to whom it’s a totally new experience (and reading job).
  - naiv 4y ago
    don't waste energy thinking for other people and invest it in whatever works best for you.
  - 0xCAP 4y ago
    To be fair, like with any other form form of knowledge, there's a "minimal viable" amount, and a "complete grasp" amount. TailwindCSS adding to the latter is not the library becoming more complex. In order to know 2020's tw's feature set, the amount of stuff to study remained the same.
  - peferron 4y ago
    Tailwind is a utility library. Utility libraries typically do not require reading their documentation from cover to cover before starting to use them. Instead, you just hit the docs when you need help solving a specific problem.
- JediLuke 4y ago
ehutch79 4y ago
supports-[backdrop-filter]:bg-black/25 Way easier and clearer than writing normal css
- spyke112 4y ago
  Haven’t used Tailwind before. Is that an actual class name? Seems a bit silly.
  - ehutch79 4y ago
    Yeah, it's straight from the blog post for the 3.2 version
    - spyke112 4y ago
      Oh boy, that seems quite convoluted.
      - jmull 4y ago
        Well... you really need to compare it to the equivalent vanilla CSS.
        ehutch79 4y ago
        This? @supports(backdrop-filter: blur(6px)) { .card { background-color: rgba(0,0,0,0.75); // Why would you not also be using backdrop-filter here anyways? } } It's more verbose if you have one property sure... but if you do two, tree, or more, all in the @supports rule, it's a big difference.
  - brycewray 4y ago
    Part of the v3.2 additions: https://tailwindcss.com/blog/tailwindcss-v3-2#browser-support-based-styling-with-supports https://tailwindcss.com/blog/tailwindcss-v3-2#browser-suppor...
aqibgatoo 4y ago
Don't use those features that you dont like, simple as that.
warent 4y ago
So why not just bite the bullet and learn to use CSS without the additional tooling (and weird, often lengthy additions to your HTML) that Tailwind and other utility-first styling frameworks require? Because I'm not a designer :) (EDIT: there seems to be some confusion by what I mean here. What I meant is that knowledge of plain CSS does not enable me to create clean designs like Tailwind does.) Really though a huge benefit of Tailwind is their UI package https://tailwindui.com/ https://tailwindui.com/ which I routinely use Aside from that, I also like how their components are all very lightweight normal HTML. Compare to Material UI, etc. which are so heavy that you can't even use them with many 3rd party libraries because they're more than just CSS. Often times, third party components accept some class lists, which fundamentally means they are only compatible with simple CSS libraries like tailwind rather than component libraries. Anyway I get the concern but I also feel like the concern is still very, very far away from becoming reality.
- ehutch79 4y ago
  Then you're using the equivalent of bootstrap or bulma. You're not really doing anything benefiting from utility classes. And if you're going to use tailwind utility classes, they're mostly one for one with a single css property, so you're learning something that is functionally similar to, but not css.
  - warent 4y ago
    Logically it may be "equivalent" but I use Tailwind also because of an emotional aspect--Bootstrap et al. feel extremely dated. When Tailwind feels dated I'll be here to champion the new hotness too.
    - ehutch79 4y ago
      ...I'm not sure that's something to be proud of.
      - warent 4y ago
        Haha which part? Staying up-to-date with the latest tech trends, or having self awareness of my own emotions?
deergomoo 4y ago
> The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet and learn to use CSS without the additional tooling […] that Tailwind and other utility-first styling frameworks require? This is an incredibly silly argument because Tailwind has always required you know CSS, or at least understand how it works. The selling point of Tailwind is a more convenient and co-located way to write styles—the utility classes map pretty much 1:1 to CSS properties after all. Covering more CSS features with Tailwind classes does not make Tailwind inherently more complicated, it just adds a way to express more CSS that you need already know about.
- ehutch79 4y ago
  But tailwind fans keep saying that you don't need to learn css. Even in the comments here, people have said they use tailwind so they don't have to learn css because they're not a designer. Also the biggest reason to use tailwind is apparently because naming css classes is hard...
  - nightski 4y ago
    I can't speak for others but I'd imagine you are talking about two different things. There's "learning css" in the sense of learning all the syntax & semantics. Tailwind does not help you here at all. Then there is "learning css" in the sense of using it decently. Meaning proper spacing of elements, good typography, etc.. A design system if you will. This is where tailwind steps in by providing very reasonable defaults for a lot of things. The advantage of tailwind over a full design system is that it is piecemeal, you only pay for what you use. It really makes a lot of sense when combined with a component system like React because you get re-usability at the component level instead of the style level. I like this a lot, but it may not resonate with everyone.
    - warent 4y ago
      I think they're referring to my comment and yes your interpretation is what I intended to communicate. Give me a picture of a dream website and I can easily write all the CSS and HTML to create it identically and responsively as I have done for years. But give some general product description, and no amount of CSS knowledge will save the monstrosity I create
rukshn 4y ago
Recently I had to develop a somewhat complex vuejs web app that works well in both desktop and mobile And most importantly I had only 7 days to develop it. And I just breezed though the frontend development thanks to tailwind which I won’t be able to do had I used a different framework like bootstrap or vanilla css I think developers can select the features they want to use, and if they don’t want to use the new features they can just use the existing ones and leave the new ones alone. For the moment I don’t find a reason to skip tailwind
- gedy 4y ago
  > And I just breezed though the frontend development thanks to tailwind which I won’t be able to do had I used a different framework like bootstrap That’s interesting because I had the exact opposite experience with Tailwind. We were in a hurry to but Tailwind’s lack of standard component classes meant we spent a lot of time trying to find components to do basic things, we even paid for Tailwind UI but we found the experience really weird that all you get is code samples that you just paste into your code and tweak? We ended up going with bootstrap because there’s plenty of open source libraries that have all the components and it’s easy enough to tweak the bootstrap theme to look how our marketing and branding needed. Where we needed more customization, bootstrap has a lot of nice utility classes too now.
- DoesntMatter22 4y ago
  Tailwind is a lot of fun when you end up with spaghetti code and classes littered all over the place. Sometimes there are 20+ classes on 1 div, it's insanely hard to maintain. I love tailwind for small things but when I have to maintain it, it's pretty awful.
  - tomtheelder 4y ago
    I've had the total opposite experience. I've found that any sort of CSS scheme that tries to be clever or have any meaningful amount of re-use becomes an unmaintainable nightmare over time. Tailwind keeps the bits and pieces of the utility classes as close to the content that they are styling as possible, and that _drastically_ reduces the complexity of maintenance. You use the reusability scheme you already have- typically components in some sense, React or templates or whatever- instead of attempting to layer another one on top for just your styles. In fact, maintainability is by far the #1 reason I use Tailwind. IMO it's actually quite a bit more clunky and slow for the initial styling process.
beardedman 4y ago
I don't like massive long class names on my DOM elements. And I don't think it makes the code look/read nice. Tailwind is so close to CSS that I'm often left scratching my head as to why people don't just write CSS - it will look nicer too.
- aloisdg 4y ago
  because the cascade part of CSS is error prone and because naming stuff is hard. Functional lib like tailwind or tachyons solve both those problem as far as I am concerned.
  - beardedman 4y ago
    > because naming stuff is hard This feels like a weak argument. Yes, naming things are hard - but we name classes, variables, dom elements & everything else every day. There are also really good naming patterns for CSS out there too (BEM, etc.).
- 0xCAP 4y ago
  Because, if we're talking about css-in-js, then they'd need an external dependency anyway to handle hover/etc.. states. TailwindCSS lets you inline that.
  - beardedman 4y ago
    You also don't need CSS-in-JS.
    - methyl 4y ago
      So you need either to keep styles inline, which has a lot of drawbacks, or figure out a name for every single thing. Tailwind is essentially inline styling done right + a set of constraints to keep your design consistent even if you are not a designer. Pretty sweet setup if you ask me.
- ape4 4y ago
  It moved stuff from style="..." to class="..." - what a break thru
johnfn 4y ago
> The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet and learn to use CSS without the additional tooling (and weird, often lengthy additions to your HTML) that Tailwind and other utility-first styling frameworks require? This misses the point of Tailwind entirely. The point of Tailwind is to give everyone a common vernacular of CSS phrases so that I can bust out something like "p-2 m-2 border-red" super fast and still be writing code which is immediately comprehensible to everyone else on my team. There's also the benefit that I no longer have to think about class names, which is shockingly large. Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary. It's also why I'm not concerned about Tailwind getting more features: * Tailwind needs to have all the features of CSS, otherwise it's incomplete. * The notion of Tailwind being "bloated" makes no sense: * The Tailwind compiler eliminates any styles you don't need. * Tailwind stylesheets are always going to be much smaller than normal CSS for any decently-sized app.
- blowski 4y ago
  > Tailwind needs to have all the features of CSS, otherwise it's incomplete. This is how I see it too. If Tailwind doesn't bother adopting some CSS features, I have to jump between Tailwind and CSS files and syntax.
  - inopinatus 4y ago
    The occurrences have become fewer and farther between, but in such cases I'll configure my own utilities until the project catches up. The syntax for adding utilities is lightweight and embeds directly in config, ref. https://tailwindcss.com/docs/plugins#adding-utilities https://tailwindcss.com/docs/plugins#adding-utilities
- shubhamjain 4y ago
  > Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary. While I agree, sometimes I feel Tailwind users forget that writing regular CSS is also an option. I have seen examples where developers repeat Tailwind classes for every paragraph, every link. They repeat same typography styles over and over again instead of creating some base CSS. A great example is this checkbox[1] where developers used 71 Tailwind classes to style the input. [1]: https://twitter.com/hovhaDovah/status/1461672155108806658 https://twitter.com/hovhaDovah/status/1461672155108806658
lioeters 4y ago
My heart sank a bit when reading the phrase, "absolutely massive amount of new stuff" in Tailwind's release note. I agree with the article that this may be the inflection point where I return to just using Sass. (So far I've been using both.) But Sass has been recently introducing seemingly unnecessary changes in syntax, making their documentation incompatible with existing compiler implementations - and I'm getting tired of trying to catch up. I'm thinking of moving to PostCSS with a small subset of features, like nested selectors, to stay close to the CSS specs and hopefully one day we can do without any preprocessor. --- Edit: The author of the posted link has an in-depth article on Sass, with much of which I heartily agree. https://www.brycewray.com/posts/2021/04/speaking-up-for-sass/ https://www.brycewray.com/posts/2021/04/speaking-up-for-sass...
- brycewray 4y ago
  Thank you.
jorams 4y ago
Looking at the Tailwind 3.2 feature list I don't necessarily disagree that some of these look like feature creep, but I think this article falls flat because it asserts a premise that I just don't think is true: > the idea behind Tailwind, like every other utility-first CSS framework, is to make styling easier, especially for front-end developers who dislike getting under CSS’s hood. > The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet and learn to use CSS without the additional tooling Tailwind is not an alternative to learning CSS, or "getting under CSS's hood", and I don't think I've ever seen anyone promote it as such. Tailwind is explicitly very low-level. It's an alternative way to write CSS, not an alternative to knowing CSS. All of its class documentation starts with the exact equivalent CSS declarations for a reason.
- snorremd 4y ago
  Exactly. Tailwind's utility classes correspond 1-1 with CSS attributes more or less. Then you have variants to help you target things like hover and focus states as well as pseudo elements like before and after. But Tailwind does nothing to hide away CSS in that you still have to understand flex and grid layouts, padding, z-indexing, margins, etc. What Tailwind does give you is a way to build on top of a design system. The Tailwind config gives you a pretty good default design system in terms of spacings (padding and margins), colours (palettes and shades), etc. And you are free to modify or make your own design system, but once you do your design is much more likely to be consistent. You can of course achieve the same design system with css custom properties (aka variables), but you have to be much more cognisant of using them. With Tailwind the design system is the default and you have to go out of your way to use custom values.
mogoh 4y ago
> The more capabilities that get added to Tailwind, the more complex Tailwind becomes. It may not yet be near a tipping point, but that’s a danger for which the Tailwind team will have to be on the lookout. Tipping point of being too complex? For what? Doing more harm then good? Is that the argument? I am not a Tailwind fan, I don't use it, but I think, it did not reached the tipping point (of being useful) just at the 3.2 release.
NayamAmarshe 4y ago
Well, just don't use them. I know I won't.
gimliapp 4y ago
The author may have a point. Some people will be: "well, just don't use those features then". But you are often not the only dev on a project. And some devs just love using the shiny new stuff even if it does not make any sense. Shameless plug: https://gimli.app/tailwinddx.html https://gimli.app/tailwinddx.html - A Chrome DevTools extension enabling smart Tools for Tailwind CSS :)
- m00x 4y ago
  A framework developer's priority is not to think about preventing bad devs from misusing features, it's to empower the framework. Preventing bad devs from doing horrible mistakes should be your team leader's job.
clord 4y ago
I want tailwind as a DSL or IDE feature to write CSS. That’s mainly what I like about it. I don’t mind css but it’s repetitive to style a bunch of nodes.
srcreigh 4y ago
The point of Tailwind is that it curates the useful subset of CSS into a nice DSL. Not unlike Typescript and type systems. I'll learn about any of the stuff that makes its way into Tailwind release notes and Tailwind docs. Anything else about CSS I will happily never learn about. This is why people could say "Don't learn CSS, just learn Tailwind". Tailwind is the only decent way to use and to learn CSS.
jackblemming 4y ago
I’m always amazed at how sadistic frontend developers are to themselves. I saw Tailwind required some config file and compiler and noped right out. I guess they have to keep up with the backend folks screwing around with the million different DevOps and cloud bullshit.
- m00x 4y ago
  If you're scared of configs and compilers, you must not be doing much coding.
  - jackblemming 4y ago
    I generally try to keep the number of config files and compilers minimal. I suppose that's considered blasphemous these days, since every simple web app has at minimum 20 different config files in the project root. I prefer solving actual problems related to my domain.
    - m00x 4y ago
      Not a bad thing to keeps thing minimal, but when it gives you massive benefits, it's a stupid argument.
m00x 4y ago
Imagine giving criticism on Tailwind when your website looks like it was made using Myspace and not updated since 2004.
- brycewray 4y ago
  I purposely chose the simpler appearance earlier this year. Previously, a typical page looked like this: https://web.archive.org/web/20220516010347/https://www.brycewray.com/posts/2022/05/tips-using-giscus/ https://web.archive.org/web/20220516010347/https://www.bryce... Oddly, the sentiment I see most often in HN threads about website complexity is that a simpler look is better, but perhaps your experience is different. I definitely have done more complex things in 25 years of web dev, but I simply choose not to do so now. Otherwise, I will let your reply stand for itself.
  - m00x 4y ago
    It's a little better, but definitely something I'd expect more from a backend developer than a frontend developer. Simpler is better, but you still need to do well on the things you keep. The whitespace on the navbar isn't great, the logo looked stacked on and doesn't fit well, don't use gradient backgrounds on content, the note color doesn't match with the background, the bottom section is too vertically long, you could simplify, or move it to use horizontal space instead, and the black bar for "Previous" looks out of place. What I like: - Title is strong and centered - Date is very easy to find (especially for technical blog posts, they can tell you if it's outdated or not) - Good choice of fonts
    - brycewray 4y ago
      Interesting, and thanks for the compliments within. Perhaps you could point me to two or three other personal sites/blogs whose styling you *do* find pleasing or appropriate, so I'd have some idea of the standard(s) to which I should be adhering? Since I've seen many sites with designs not that different from mine over the years, it would help me to know where else I should be looking for look-and-feel guidance, instead. Thanks.
exelib 4y ago
I wouldn't say that the article or tailwindcss are good or bad. I would just point out that the difference between good and bad product management is the feature creep. Did tailwind css do a bad job at product management? I don't know, but some new features are useful to me.

110 points by brycewray 4y ago

Nice! They've introduced the "aria-*"-variants I had previously been adding via their plugin API. Real cool I can style based on whether an element is being pressed in a cross browser compatible way without ever touching the config now.

thangngoc89 4y ago

I've used a lot of tools for writing "CSS" over the years: pure CSS, CSS modules, SASS, LESS, BEM,... I think when using Tailwind, you have to know the "real" CSS anyway, but the most important thing that Tailwind offers is the consistency. So you need 1-unit padding? `p-1`. Double that? `p-2`. Still not enough? `p-3`. More? `p-4`. I don't have to think and do math in my head like 0.25rem, 0.5rem, 1rem,... and IMHO, it's a big enough win for me to keep using Tailwind CSS. The features that were introduced in recent versions are just about supporting more CSS features to be more complete and not about feature-bloat.

klysm 4y ago
I get that same exact property with css-in-js. All my components have a p prop and an m prop
- thangngoc89 4y ago
  I'm not sure about libraries that could compile and extract to static css like linaria, but Tailwind is 100% compile time only, all CSS are generated and there isn't any runtime overhead.
waboremo 4y ago
That doesn't seem like a big enough win when CSS variables exist and offer far more readable options (as you're the one naming them). On that front, I reckon majority of Tailwind developers use far fewer variables than they believe, so it's not some gigantic monumental task where you have to set up a million different CSS variables. This is the problem with Tailwind, it doesn't offer enough nor does it move faster than CSS to justify its existence. The only real use case for it seems to be solo developers that do not have the time or resources to set up their own baseline set of variables, or those that use it with a component library that's based on TW.
- dawnerd 4y ago
  I think you need a reality check on who actually uses Tailwind. Very large cops and sites use it because it improves the dev exp and increases performance through smaller file sizes. Further I’m not sure what you mean about not moving fast enough, they just added container queries.
  - waboremo 4y ago
    Yes, and you'll find many of those very large corps are questioning why they're using it now. Which is a great thing, many businesses should be in constant reevaluation of why they rely on certain tooling. Personally doubt the better performance, I have yet to see a case where that is true unless they were comparing it unevenly to some behemoth like Styled-Components. When you compare it to SASS the performance difference ceases to exist. Same with "improves the dev exp", I don't see how this is the case at all especially when you have to install an additional extension to get full proper support in your IDE of choice. You are still working with variables, if you are on a tiny team/solo, it makes sense to use Tailwind defaults but on a large team where your design team should be creating their own? What use does Tailwind have then when the utility classes are just going to be overwritten? You're still creating the components yourself.
  - ricardobeat 4y ago
    I suggest you double check those performance claims. The CSS might be smallish, but you're usually moving the weight to non-cached HTML which is re-downloaded on every page view. I helped analyze the impact on a very large website (billion+ pageviews) and it did not look very good.
    - johnchristopher 4y ago
      What you are saying is: "tailwind class names are cumulative and so verbosein the HTML tag that it negates the benefits of smaller CSS and eat the bytes saved?". Am I reading that right ?
      - 4y ago
csande17 4y ago
Funny, I had the exact opposite experience using Tailwind: my design tools gave me measurements in pixels or rems, and I had to do math to convert them into Tailwind units.
hypertele-Xii 4y ago
> I don't have to think and do math in my head Imagine being a computer programmer and not thinking nor doing math in your head. Good thing there are other people to do the thinking and math for you, huh? Because the multiplication table for 0.25 is too complicated... Next you'll need an enterprise-grade library for adding numbers together. Because sums are hard, man. Who's got time to remember what 1+1 is?

gmaster1440 4y ago

I've always found the "Tailwind as CSS shim" attitude compelling, and like most shims will successfully pave the way for its own gradual superfluousness (a good thing imo).

jackconsidine 4y ago

It seems straightforward to just bite off what you need from Tailwind- the new features won't inhibit you from continuing to write flex and padding interfaces. I don't even think that a selling point of TW is not needing to learn CSS. It's easier a lot of times and cleaner to refrain from adding new files with conventions you have to come up with to do something that takes 4 characters with TW

naiv 4y ago

I don't understand the reasoning of 'feature creep'. If the author has an idea for better improvements, hit up the Tailwind team. Feature creep does not mean that you need to use the features.

brycewray 4y ago
True, you don‘t need to know them, but they’re in the ever-growing documentation. I guess I’m thinking about teams which are onboarding devs who are new to Tailwind. It was a lot easier intro two years ago than it would be now, and I’m uncertain of how much brainpower and time it now truly saves for those to whom it’s a totally new experience (and reading job).
- naiv 4y ago
  don't waste energy thinking for other people and invest it in whatever works best for you.
- 0xCAP 4y ago
  To be fair, like with any other form form of knowledge, there's a "minimal viable" amount, and a "complete grasp" amount. TailwindCSS adding to the latter is not the library becoming more complex. In order to know 2020's tw's feature set, the amount of stuff to study remained the same.
- peferron 4y ago
  Tailwind is a utility library. Utility libraries typically do not require reading their documentation from cover to cover before starting to use them. Instead, you just hit the docs when you need help solving a specific problem.
JediLuke 4y ago

ehutch79 4y ago

supports-[backdrop-filter]:bg-black/25 Way easier and clearer than writing normal css

spyke112 4y ago
Haven’t used Tailwind before. Is that an actual class name? Seems a bit silly.
- ehutch79 4y ago
  Yeah, it's straight from the blog post for the 3.2 version
  - spyke112 4y ago
    Oh boy, that seems quite convoluted.
    - jmull 4y ago
      Well... you really need to compare it to the equivalent vanilla CSS.
      - ehutch79 4y ago
        This? @supports(backdrop-filter: blur(6px)) { .card { background-color: rgba(0,0,0,0.75); // Why would you not also be using backdrop-filter here anyways? } } It's more verbose if you have one property sure... but if you do two, tree, or more, all in the @supports rule, it's a big difference.
- brycewray 4y ago
  Part of the v3.2 additions: https://tailwindcss.com/blog/tailwindcss-v3-2#browser-support-based-styling-with-supports https://tailwindcss.com/blog/tailwindcss-v3-2#browser-suppor...

aqibgatoo 4y ago

Don't use those features that you dont like, simple as that.

warent 4y ago

So why not just bite the bullet and learn to use CSS without the additional tooling (and weird, often lengthy additions to your HTML) that Tailwind and other utility-first styling frameworks require? Because I'm not a designer :) (EDIT: there seems to be some confusion by what I mean here. What I meant is that knowledge of plain CSS does not enable me to create clean designs like Tailwind does.) Really though a huge benefit of Tailwind is their UI package https://tailwindui.com/ https://tailwindui.com/ which I routinely use Aside from that, I also like how their components are all very lightweight normal HTML. Compare to Material UI, etc. which are so heavy that you can't even use them with many 3rd party libraries because they're more than just CSS. Often times, third party components accept some class lists, which fundamentally means they are only compatible with simple CSS libraries like tailwind rather than component libraries. Anyway I get the concern but I also feel like the concern is still very, very far away from becoming reality.

ehutch79 4y ago
Then you're using the equivalent of bootstrap or bulma. You're not really doing anything benefiting from utility classes. And if you're going to use tailwind utility classes, they're mostly one for one with a single css property, so you're learning something that is functionally similar to, but not css.
- warent 4y ago
  Logically it may be "equivalent" but I use Tailwind also because of an emotional aspect--Bootstrap et al. feel extremely dated. When Tailwind feels dated I'll be here to champion the new hotness too.
  - ehutch79 4y ago
    ...I'm not sure that's something to be proud of.
    - warent 4y ago
      Haha which part? Staying up-to-date with the latest tech trends, or having self awareness of my own emotions?

deergomoo 4y ago

> The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet and learn to use CSS without the additional tooling […] that Tailwind and other utility-first styling frameworks require? This is an incredibly silly argument because Tailwind has always required you know CSS, or at least understand how it works. The selling point of Tailwind is a more convenient and co-located way to write styles—the utility classes map pretty much 1:1 to CSS properties after all. Covering more CSS features with Tailwind classes does not make Tailwind inherently more complicated, it just adds a way to express more CSS that you need already know about.

ehutch79 4y ago
But tailwind fans keep saying that you don't need to learn css. Even in the comments here, people have said they use tailwind so they don't have to learn css because they're not a designer. Also the biggest reason to use tailwind is apparently because naming css classes is hard...
- nightski 4y ago
  I can't speak for others but I'd imagine you are talking about two different things. There's "learning css" in the sense of learning all the syntax & semantics. Tailwind does not help you here at all. Then there is "learning css" in the sense of using it decently. Meaning proper spacing of elements, good typography, etc.. A design system if you will. This is where tailwind steps in by providing very reasonable defaults for a lot of things. The advantage of tailwind over a full design system is that it is piecemeal, you only pay for what you use. It really makes a lot of sense when combined with a component system like React because you get re-usability at the component level instead of the style level. I like this a lot, but it may not resonate with everyone.
  - warent 4y ago
    I think they're referring to my comment and yes your interpretation is what I intended to communicate. Give me a picture of a dream website and I can easily write all the CSS and HTML to create it identically and responsively as I have done for years. But give some general product description, and no amount of CSS knowledge will save the monstrosity I create

rukshn 4y ago

Recently I had to develop a somewhat complex vuejs web app that works well in both desktop and mobile And most importantly I had only 7 days to develop it. And I just breezed though the frontend development thanks to tailwind which I won’t be able to do had I used a different framework like bootstrap or vanilla css I think developers can select the features they want to use, and if they don’t want to use the new features they can just use the existing ones and leave the new ones alone. For the moment I don’t find a reason to skip tailwind

gedy 4y ago
> And I just breezed though the frontend development thanks to tailwind which I won’t be able to do had I used a different framework like bootstrap That’s interesting because I had the exact opposite experience with Tailwind. We were in a hurry to but Tailwind’s lack of standard component classes meant we spent a lot of time trying to find components to do basic things, we even paid for Tailwind UI but we found the experience really weird that all you get is code samples that you just paste into your code and tweak? We ended up going with bootstrap because there’s plenty of open source libraries that have all the components and it’s easy enough to tweak the bootstrap theme to look how our marketing and branding needed. Where we needed more customization, bootstrap has a lot of nice utility classes too now.
DoesntMatter22 4y ago
Tailwind is a lot of fun when you end up with spaghetti code and classes littered all over the place. Sometimes there are 20+ classes on 1 div, it's insanely hard to maintain. I love tailwind for small things but when I have to maintain it, it's pretty awful.
- tomtheelder 4y ago
  I've had the total opposite experience. I've found that any sort of CSS scheme that tries to be clever or have any meaningful amount of re-use becomes an unmaintainable nightmare over time. Tailwind keeps the bits and pieces of the utility classes as close to the content that they are styling as possible, and that _drastically_ reduces the complexity of maintenance. You use the reusability scheme you already have- typically components in some sense, React or templates or whatever- instead of attempting to layer another one on top for just your styles. In fact, maintainability is by far the #1 reason I use Tailwind. IMO it's actually quite a bit more clunky and slow for the initial styling process.

beardedman 4y ago

I don't like massive long class names on my DOM elements. And I don't think it makes the code look/read nice. Tailwind is so close to CSS that I'm often left scratching my head as to why people don't just write CSS - it will look nicer too.

aloisdg 4y ago
because the cascade part of CSS is error prone and because naming stuff is hard. Functional lib like tailwind or tachyons solve both those problem as far as I am concerned.
- beardedman 4y ago
  > because naming stuff is hard This feels like a weak argument. Yes, naming things are hard - but we name classes, variables, dom elements & everything else every day. There are also really good naming patterns for CSS out there too (BEM, etc.).
0xCAP 4y ago
Because, if we're talking about css-in-js, then they'd need an external dependency anyway to handle hover/etc.. states. TailwindCSS lets you inline that.
- beardedman 4y ago
  You also don't need CSS-in-JS.
  - methyl 4y ago
    So you need either to keep styles inline, which has a lot of drawbacks, or figure out a name for every single thing. Tailwind is essentially inline styling done right + a set of constraints to keep your design consistent even if you are not a designer. Pretty sweet setup if you ask me.
ape4 4y ago
It moved stuff from style="..." to class="..." - what a break thru

johnfn 4y ago

> The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet and learn to use CSS without the additional tooling (and weird, often lengthy additions to your HTML) that Tailwind and other utility-first styling frameworks require? This misses the point of Tailwind entirely. The point of Tailwind is to give everyone a common vernacular of CSS phrases so that I can bust out something like "p-2 m-2 border-red" super fast and still be writing code which is immediately comprehensible to everyone else on my team. There's also the benefit that I no longer have to think about class names, which is shockingly large. Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary. It's also why I'm not concerned about Tailwind getting more features: * Tailwind needs to have all the features of CSS, otherwise it's incomplete. * The notion of Tailwind being "bloated" makes no sense: * The Tailwind compiler eliminates any styles you don't need. * Tailwind stylesheets are always going to be much smaller than normal CSS for any decently-sized app.

blowski 4y ago
> Tailwind needs to have all the features of CSS, otherwise it's incomplete. This is how I see it too. If Tailwind doesn't bother adopting some CSS features, I have to jump between Tailwind and CSS files and syntax.
- inopinatus 4y ago
  The occurrences have become fewer and farther between, but in such cases I'll configure my own utilities until the project catches up. The syntax for adding utilities is lightweight and embeds directly in config, ref. https://tailwindcss.com/docs/plugins#adding-utilities https://tailwindcss.com/docs/plugins#adding-utilities
shubhamjain 4y ago
> Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary. While I agree, sometimes I feel Tailwind users forget that writing regular CSS is also an option. I have seen examples where developers repeat Tailwind classes for every paragraph, every link. They repeat same typography styles over and over again instead of creating some base CSS. A great example is this checkbox[1] where developers used 71 Tailwind classes to style the input. [1]: https://twitter.com/hovhaDovah/status/1461672155108806658 https://twitter.com/hovhaDovah/status/1461672155108806658

lioeters 4y ago

My heart sank a bit when reading the phrase, "absolutely massive amount of new stuff" in Tailwind's release note. I agree with the article that this may be the inflection point where I return to just using Sass. (So far I've been using both.) But Sass has been recently introducing seemingly unnecessary changes in syntax, making their documentation incompatible with existing compiler implementations - and I'm getting tired of trying to catch up. I'm thinking of moving to PostCSS with a small subset of features, like nested selectors, to stay close to the CSS specs and hopefully one day we can do without any preprocessor. --- Edit: The author of the posted link has an in-depth article on Sass, with much of which I heartily agree. https://www.brycewray.com/posts/2021/04/speaking-up-for-sass/ https://www.brycewray.com/posts/2021/04/speaking-up-for-sass...

brycewray 4y ago
Thank you.

jorams 4y ago

Looking at the Tailwind 3.2 feature list I don't necessarily disagree that some of these look like feature creep, but I think this article falls flat because it asserts a premise that I just don't think is true: > the idea behind Tailwind, like every other utility-first CSS framework, is to make styling easier, especially for front-end developers who dislike getting under CSS’s hood. > The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet and learn to use CSS without the additional tooling Tailwind is not an alternative to learning CSS, or "getting under CSS's hood", and I don't think I've ever seen anyone promote it as such. Tailwind is explicitly very low-level. It's an alternative way to write CSS, not an alternative to knowing CSS. All of its class documentation starts with the exact equivalent CSS declarations for a reason.

snorremd 4y ago
Exactly. Tailwind's utility classes correspond 1-1 with CSS attributes more or less. Then you have variants to help you target things like hover and focus states as well as pseudo elements like before and after. But Tailwind does nothing to hide away CSS in that you still have to understand flex and grid layouts, padding, z-indexing, margins, etc. What Tailwind does give you is a way to build on top of a design system. The Tailwind config gives you a pretty good default design system in terms of spacings (padding and margins), colours (palettes and shades), etc. And you are free to modify or make your own design system, but once you do your design is much more likely to be consistent. You can of course achieve the same design system with css custom properties (aka variables), but you have to be much more cognisant of using them. With Tailwind the design system is the default and you have to go out of your way to use custom values.

mogoh 4y ago

> The more capabilities that get added to Tailwind, the more complex Tailwind becomes. It may not yet be near a tipping point, but that’s a danger for which the Tailwind team will have to be on the lookout. Tipping point of being too complex? For what? Doing more harm then good? Is that the argument? I am not a Tailwind fan, I don't use it, but I think, it did not reached the tipping point (of being useful) just at the 3.2 release.

NayamAmarshe 4y ago

Well, just don't use them. I know I won't.

gimliapp 4y ago

The author may have a point. Some people will be: "well, just don't use those features then". But you are often not the only dev on a project. And some devs just love using the shiny new stuff even if it does not make any sense. Shameless plug: https://gimli.app/tailwinddx.html https://gimli.app/tailwinddx.html - A Chrome DevTools extension enabling smart Tools for Tailwind CSS :)

m00x 4y ago
A framework developer's priority is not to think about preventing bad devs from misusing features, it's to empower the framework. Preventing bad devs from doing horrible mistakes should be your team leader's job.

clord 4y ago

I want tailwind as a DSL or IDE feature to write CSS. That’s mainly what I like about it. I don’t mind css but it’s repetitive to style a bunch of nodes.

srcreigh 4y ago

The point of Tailwind is that it curates the useful subset of CSS into a nice DSL. Not unlike Typescript and type systems. I'll learn about any of the stuff that makes its way into Tailwind release notes and Tailwind docs. Anything else about CSS I will happily never learn about. This is why people could say "Don't learn CSS, just learn Tailwind". Tailwind is the only decent way to use and to learn CSS.

jackblemming 4y ago

I’m always amazed at how sadistic frontend developers are to themselves. I saw Tailwind required some config file and compiler and noped right out. I guess they have to keep up with the backend folks screwing around with the million different DevOps and cloud bullshit.

m00x 4y ago
If you're scared of configs and compilers, you must not be doing much coding.
- jackblemming 4y ago
  I generally try to keep the number of config files and compilers minimal. I suppose that's considered blasphemous these days, since every simple web app has at minimum 20 different config files in the project root. I prefer solving actual problems related to my domain.
  - m00x 4y ago
    Not a bad thing to keeps thing minimal, but when it gives you massive benefits, it's a stupid argument.

m00x 4y ago

Imagine giving criticism on Tailwind when your website looks like it was made using Myspace and not updated since 2004.

brycewray 4y ago
I purposely chose the simpler appearance earlier this year. Previously, a typical page looked like this: https://web.archive.org/web/20220516010347/https://www.brycewray.com/posts/2022/05/tips-using-giscus/ https://web.archive.org/web/20220516010347/https://www.bryce... Oddly, the sentiment I see most often in HN threads about website complexity is that a simpler look is better, but perhaps your experience is different. I definitely have done more complex things in 25 years of web dev, but I simply choose not to do so now. Otherwise, I will let your reply stand for itself.
- m00x 4y ago
  It's a little better, but definitely something I'd expect more from a backend developer than a frontend developer. Simpler is better, but you still need to do well on the things you keep. The whitespace on the navbar isn't great, the logo looked stacked on and doesn't fit well, don't use gradient backgrounds on content, the note color doesn't match with the background, the bottom section is too vertically long, you could simplify, or move it to use horizontal space instead, and the black bar for "Previous" looks out of place. What I like: - Title is strong and centered - Date is very easy to find (especially for technical blog posts, they can tell you if it's outdated or not) - Good choice of fonts
  - brycewray 4y ago
    Interesting, and thanks for the compliments within. Perhaps you could point me to two or three other personal sites/blogs whose styling you *do* find pleasing or appropriate, so I'd have some idea of the standard(s) to which I should be adhering? Since I've seen many sites with designs not that different from mine over the years, it would help me to know where else I should be looking for look-and-feel guidance, instead. Thanks.

exelib 4y ago

I wouldn't say that the article or tailwindcss are good or bad. I would just point out that the difference between good and bad product management is the feature creep. Did tailwind css do a bad job at product management? I don't know, but some new features are useful to me.