by pspeter3 on 12/9/21, 6:33 PM with 428 comments
by seanwilson on 12/9/21, 7:55 PM
With the regular way, to style something that's probably not going to appear elsewhere, I'm having to: come up with class names, annotate the HTML with them, repeat some of this annotating in a CSS file, jump back and forth between files to tweak the styles, use the web inspector to figure out which CSS class is overriding another then jump to the right CSS file to fix it etc.
Tailwind classes are also faster to type and flip between when you're experimenting (e.g. editing "mt-5" to "pb-3" vs "margin-top: 4.25em" to "padding-bottom: 2.75em") and you get less distracted because it has sensible defaults and helpful guardrails (you rarely need all the possible attributes and range of parameter values CSS has available).
I also rarely had the super irritating and common CSS scenario where you edit a style and it doesn't change and you have to go investigate to find out why e.g. something is overriding something, your selector is wrong, and even after all that maybe you undo the edit because it doesn't look good. Plus you no longer have the fear that tweaking a shared class to going to break some completely different page.
I feel that beyond some building blocks, trying to create reusable CSS classes with cascading styles has similarities to using excessive abstraction and deep OOP class hierarchies in regular programming languages to avoid a little duplication.
I also don't have a problem with styling stuff appearing in my HTML files either as long as the right HTML tags are used around the data. HTML files are already full of class annotations and divs that are only there for styling yet this doesn't cause a problem to e.g. browsers, screen readers or crawlers.
by hiimshort on 12/10/21, 1:27 AM
Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive.
However, those were new projects. After completing them and needing to go back and modify or maintain them, the experience has been horrible. The resulting style declarations (as class names) are completely unreadable and unmaintainable. I've tried organizing them and splitting class names onto multiple lines, but it has only cluttered things.
In my experience, Tailwind (and similar projects) produce styles that are effectively read only. They are superb when writing a new component and styling things from scratch, but maintenance is nonexistent.
Because of this, I've now switched to using a CSS-in-JS solution to gain the benefits of in-context styling and still have the ability to write CSS declarations in a structured and maintainable way.
by stevebmark on 12/9/21, 8:29 PM
CSS modules let you use the full power and control of vanilla CSS, without having to worry about styles bleeding across components. Sprinkle in your global utility classes for your design system and you're good to go. Or sometimes even better, abstract design into components like `<grid>` `<column>` etc and not even worry about the classname implementation.
I know I'm missing part of the picture, because of the hype and joy that people report from Tailwind. What part(s) am I missing that move folks from the power, beauty, and simplicity of CSS modules, to all-utility-classes-all-the-time Tailwind?
by marstall on 12/9/21, 8:16 PM
the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo.
For example, say I want to do something basic like "display:flex; justify-content: start".
In tailwind you would type "flex justify-start" instead.
Which doesn't really follow any rules as far as how to get from A to B, so it's just a matter of having to look the magic word up in their docs each time until you memorize. And there are a lot of keywords (many modifiable according to n-dimensional properties) to memorize.
I know there are handy slugs like "w-1/3" that encapsulate a best practice - but I'm a person who'd rather master the underlying mechanics of that best practice and be able to deploy, tweak and debug it myself.
by burlesona on 12/9/21, 9:51 PM
1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color variables.
2. Some of the utility classes are very helpful. Even as someone who likes writing CSS, it's nice to not need to give something a custom classname just because I want to put margin-top on it. class="mt-4", done.
I think the problem is Tailwind goes too far and tries to replace EVERYTHING with a stack of utility classes.
This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore.
Personally I think the best parts of Tailwind are captured in Pollen[1], but I do wish it came with a subset of utility classes for colors, font sizes, margin, padding, and text alignment. I think the hard part is defining which subset is the right subset... I doubt you could find strong agreement from a large majority of developers on that.
by ahallock on 12/10/21, 12:55 AM
* No more worrying about naming class selectors. This frees up so much cognitive space. The less you have to worry about naming the better. I used the SUIT CSS naming convention before, which allows a mix, and that just creates friction. You need the same level of abstraction all the way through.
* No more flipping between files. You edit your styles directly in the HTML. You will need to consult the TW docs, of course, but they're easy to navigate.
* Tailwind is more than just inline styles. It provides a nice syntax for targeting breakpoints and little utilities for conveying more abstract styles/stacking rules.
* TailwindUI is a great way to jumpstart a project and looks way better (IMO) than Bootstrap's components.
* JIT is awesome
I'd be remiss if I didn't mention some cons:
* Looking at a bunch of class names in your HTML is at overwhelming at first. It's hard to delineate the structure. Using proper HTML elements, roles, etc. helps.
* You will need to DRY up your repetitive styles by moving things to templates/components. So you still have to name things, but just keep it generic (alert, dropdown, badge, etc)
* Sometimes you'll have to create class selectors when working with web frameworks and JS libs that require a single class selector option.
by Mizza on 12/9/21, 8:16 PM
The one thing I don't like is that the culture around Tailwind seems a lot more proprietary, like you're getting three quarters of a product that you need to buy the rest of, whereas Bootstrap felt like you got everything you could ever need for free.
by rekoros on 12/9/21, 7:41 PM
by ggregoire on 12/9/21, 11:06 PM
Looking at the new features, I wondered why they went with a major version bump, but seems like it's because the Just-in-Time engine released in Mars as a feature flag is now the default engine, which is a pretty big change by itself.
by rgbrgb on 12/9/21, 7:59 PM
Has anyone used both seriously who can compare?
[0]: https://tachyons.io/
by bschne on 12/10/21, 8:40 AM
https://adamwathan.me/css-utility-classes-and-separation-of-...
by yasserkaddour on 12/10/21, 12:59 AM
<div class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded md:w-32 md:h-32 md:rounded-md md:text-base lg:w-48 lg:h-48 lg:rounded-lg lg:text-lg focus:bg-red-400 focus:rounded-md hover:bg-yellow-200 hover:rounded-t-md md:focus:rounded-xl md:focus:text-lg lg:focus:rounded-xl lg:focus:text-xl md:hover:rounded-xl lg:hover:rounded-xl">Yikes!</div>
<div
class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded"
md="w-32 h-32 rounded-md text-base hover:rounded-xl"
md-focus="rounded-xl text-lg"
lg="w-48 h-48 rounded-lg text-lg hover:rounded-xl"
lg-focus="rounded-xl text-xl"
focus="bg-red-400 rounded-md"
hover="bg-yellow-200 rounded-t-md">Yeah!</div>by etchalon on 12/9/21, 8:47 PM
It’s predictable, there are a billion ways to accomplish things, and it’s super easy to namespace yourself to safety.
SASS I understand. It makes writing CSS faster.
Tailwind feels like you have to learn CSS, but you’ll never have to actually write CSS.
Reminds me of CoffeeScript in that way. You always had to understand both It and JavaScript.
by savanaly on 12/9/21, 7:14 PM
by gunshowmo on 12/9/21, 7:20 PM
Props to the team though - I feel like this is something I'll try out for a marketing site.
by peterkelly on 12/10/21, 4:53 AM
The use case demonstrated was suppose you have a twitter button on your site, and it has to have a background color of #1da1f2 because that is Twitter's brand color. Instead of writing style="background-color: #1da1f2" like a normal person they have a class name called bg-[#1da1f2], and their "JIT compiler" generates a named class with that property.
In another part of the video, they use className="font-bold" instead of style="font-weight: bold". Apparently the advancement in this version is that instead of having all of those pre-defined classes they only generate the ones you actually use. The feature list for 3.0 includes the ability to use any color you want, and even arbitrary CSS properties that the framework doesn't explicitly know about.
Is this progress? I could use the style attribute in 1999.
by kumarvvr on 12/10/21, 1:43 AM
I am a developer nerd and have a good taste for design. However, during actual development, I do not have the ability to visualize what I want in the first attempt.
So, I have to tweak the look and bring out the beauty I want through a 1000 cuts. TW makes that process extremely easy. Like, mindbogglingly easy.
However, I have learnt to be careful with my code, and I often limit the styles by splitting them off into sub-components.
by keewee7 on 12/9/21, 7:59 PM
https://getbootstrap.com/docs/5.1/examples/
Is there anything similar for Tailwind CSS?
by 1_player on 12/9/21, 7:23 PM
And let me repeat what every Tailwind fanboy (like me) states every time this project is on HN: don't knock it till you've tried it. Look at the animated example in the front page. You'll never be able to iterate that quickly with CSS.
by lewantmontreal on 12/9/21, 7:28 PM
by Yabood on 12/9/21, 10:26 PM
by aej on 12/10/21, 10:42 AM
I struggled with css for many years but Tailwind has actually helped me improve my css - when I'm forced to write plain old css, my mental model of how everything works is much better. The fact that Tailwind has become so popular is a smell that css is slightly too low-level for most developers.
by commanderkeen08 on 12/9/21, 11:37 PM
What is it about CSS that gets people so offended and opinionated? If it were a new JS framework, few people would be saying “I just don’t get XYZ. Use React”. Is it because Tailwind is so drastically different and breaks people’s core ideas about separation of concerns? Maybe it’s because we all learned CSS very early and were told to do it XYZ and now challenging that is painful.
If you honestly want to “get” Tailwind, go use it in a project. If you don’t like it, don’t use it. Nobody is going to change your mind in a comment and you’ll never convince anyone to stop using it.
Idk. CSS is what I least care about. It’s a thing. I use it to do a thing. And I move on. I used SASS. Now I don’t.
by awestroke on 12/9/21, 7:12 PM
by joshlemer on 12/9/21, 11:27 PM
by chrysoprace on 12/9/21, 11:45 PM
For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some people. The problem I find is that it adds opinion and mental overhead for people learning related technologies or trying to get a head start without an opinionated styling solution. In order to use something like the blog-starter example for next.js I have to go and learn tailwind and then come back before I can use their blog starter, where as CSS is universal. CSS works with every project, without depending on Tailwind.
Anyway, looking forward to seeing newer improvements to Tailwind, but I hope that people will consider it an alternative to something like Bootstrap instead of an alternative to CSS.
[1] https://github.com/vercel/next.js/tree/canary/examples/blog-...
by brightball on 12/9/21, 8:42 PM
by manishsharan on 12/9/21, 7:36 PM
Is TailwindUI an alternate to Bulma ?
by asimpletune on 12/9/21, 7:09 PM
by jerrygoyal on 12/9/21, 9:04 PM
by ablekh on 12/10/21, 1:25 AM
by AltruisticGapHN on 12/10/21, 10:23 AM
There is a point where there are so many utilities; it's just not reasonable to ask me to remember them... and at that point where I can't keep them in my mind, then the "framework" loses some of its appeal and benefits.
Of course I suppose it's up to the user to decide what they want to remember, and it is the nature of the framework to become exhaustive.
I don't really have an answer to this. Only that it further reinforces how TW is a tool, among others, and as it becomes more and more complex it can no longer become a "holy grail" sort of approach precisely because you lose the benefits of having "rails".
by gedy on 12/9/21, 7:25 PM
This makes it difficult to have open source Tailwind components that can be imported and themed differently for your apps. Even after buying Tailwind UI, they are basically just code samples that we'd have to copy into our own libraries and maintain.
Again it's a really cool library, but feel the approach is probably better for smaller apps and teams.
Daisy UI might help with this, but seems pretty small at the moment. https://daisyui.com/
by ___q on 12/9/21, 7:30 PM
https://tailwindcss.com/docs/utility-first#why-not-just-use-...
https://tailwindcss.com/docs/adding-custom-styles#arbitrary-...
by mcgingras on 12/10/21, 1:35 AM
by nickjj on 12/10/21, 12:41 AM
Here's a link to the repos: https://github.com/nickjj?tab=repositories&q=docker-*-exampl...
It took longer to rebuild the Docker images than making the v2 to v3 Tailwind specific changes. In my case it came down to deleting and renaming a single property in my Tailwind config file.
by drusepth on 12/10/21, 1:04 AM
This comes at particularly nice timing with Rails 7 releasing at the end of the month. I can't wait to pair the two and see how well the new features of each work together.
by laacz on 12/10/21, 11:30 AM
by zackbloom on 12/9/21, 7:11 PM
by gjvc on 12/9/21, 8:02 PM
So much of enterprise IT is little more than glorified form fill-in, and yet so few CSS/JS libraries solidly cover these use cases.
by bamboozled on 12/9/21, 10:29 PM
Thank you to the team and I look forward to using it more in the future.
by yurishimo on 12/9/21, 7:19 PM
I'm happy they have also expounded upon some of the more common FAQs on the homepage, including the extraction to components.
by hsbauauvhabzb on 12/9/21, 10:25 PM
How can I learn tailwind enough to become proficient? Most of the documentation I looked at seemed to lack any tutorial on how to locate the correct classes I need, or any other sharp edges that might exist,
by arjunbajaj on 12/9/21, 11:58 PM
https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOL...
It helped me a lot!
by Accacin on 12/9/21, 11:35 PM
by alberth on 12/9/21, 10:26 PM
The tailwind.config.js is missing.
I can’t even begin to describe all of the reverse engineering I’ve tried to regenerate the config file with no luck and we’re royally screwed.
Make sure you don’t lose that file!
by edwnj on 12/10/21, 10:03 AM
IMO Tailwind is awesome (and cant wait to try out v3). It took me a second to warm up to it but now it makes so much sense.
You deal with a lot of minutia writing your own classes and since css is designed to be put in classes, it looks ugly when you add it to elements.
Minifying the styles into structured classes makes life so much easier. Once you map out like 5% of the lingo, you can instantly play with it like lego blocks.
I literally get the same feeling I had when I was first messing around with frontend. That feeling of power/possibilities/excitement when you can tweak a few words and shit changes on the screen.
by trungdq88 on 12/10/21, 1:47 AM
The worst thing is it ONLY happens on the production build.
I like Tailwind CSS and I really hope they make it stable.
by weakwire on 12/9/21, 7:40 PM
by mythz on 12/10/21, 6:16 AM
The invaluable utility of which ultimately convinced us to implement real-time search into our docs as well.
by yewenjie on 12/10/21, 5:47 AM
by travisd on 12/9/21, 8:00 PM
by dorianmariefr on 12/9/21, 9:06 PM
What's new in Tailwind CSS v3.0?
by cuddlecake on 12/9/21, 9:14 PM
This is what makes me cry at night.
by aruanavekar on 12/10/21, 2:49 PM
by rasulkireev on 12/9/21, 10:59 PM
by ipaddr on 12/9/21, 7:17 PM
by fadikhadra on 12/9/21, 7:49 PM
by droptablemain on 12/10/21, 3:26 AM
by nauticacom on 12/10/21, 4:29 PM
by 5cott0 on 12/9/21, 7:28 PM
by d--b on 12/9/21, 10:06 PM
Tailwind is fine, but how they pulled off making tons of people pay for a css framework just blows my mind.
I remember reading the “UI for developers” articles, and saw how they built up the hype. This was so well done…
by jlelse on 12/9/21, 9:41 PM
by nfRfqX5n on 12/9/21, 11:11 PM
by loeg on 12/9/21, 7:16 PM
by Ataraxy on 12/9/21, 9:06 PM
by tomcooks on 12/10/21, 6:18 AM
Are you going to update all your HTML in a year when a fresh new hip library lands on your HN homepage?
by brainzap on 12/9/21, 7:42 PM
by iovrthoughtthis on 12/10/21, 11:48 PM
by danbruder on 12/9/21, 11:43 PM
by acro5piano on 12/9/21, 6:36 PM
by plesiv on 12/9/21, 10:23 PM
My impression is that most of the negative comments are coming from people that don't code for Web often (I could be wrong). To those folks: I'm not saying you don't know your stuff or that you argue badly - since I was on that side myself a few months back.
What I am saying is that the elegance and pragmatism of Tailwind might not be easy to intuit just by reading about it. Try to implement a simple landing page using Tailwind+TailwindUI and see if any lightbulbs gets lit.