I used the JIT version recently on a new landing page with code completion for class names in my IDE and found it great. The distance between what I'm picturing in my head and what I have to type to see that on the screen felt so much shorter and less fatiguing than the standard CSS approach.<p>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.<p>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).<p>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.<p>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.<p>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.
I tried Tailwind (and a similar project Windi) on a few projects now and have some findings.<p>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.<p>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.<p>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.<p>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.
I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind works, but any CSS that's built at runtime and JS and inserted into the DOM dynamically should be avoided, and is an example of favoring developer experience over end user experience. It's always surprising to me when the build process isn't front and center of any CSS framework, since that's the most important performance aspect. I'm not concerned about Tailwinds verbose CSS use since that's gzipped away, but the static stylesheet compilation aspect worries me if it's not front and center of the framework.<p>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.<p>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?
just got parachuted into a tailwind project. have to say I don't fully get it.<p>the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo.<p>For example, say I want to do something basic like "display:flex; justify-content: start".<p>In tailwind you would type "flex justify-start" instead.<p>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 <i>lot</i> of keywords (many modifiable according to n-dimensional properties) to memorize.<p>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.
I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following:<p>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.<p>2. <i>Some</i> 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.<p>I think the problem is Tailwind goes too far and tries to replace EVERYTHING with a stack of utility classes.<p>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.<p>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.<p>1. <a href="https://www.pollen.style" rel="nofollow">https://www.pollen.style</a>
I've been working with CSS for over twenty years, and Tailwind is the way forward for me. Some of the big benefits are:<p>* 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.<p>* 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.<p>* 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.<p>* TailwindUI is a great way to jumpstart a project and looks way better (IMO) than Bootstrap's components.<p>* JIT is awesome<p>I'd be remiss if I didn't mention some cons:<p>* 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.<p>* 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)<p>* Sometimes you'll have to create class selectors when working with web frameworks and JS libs that require a single class selector option.
I've been a Bootstrap user for a long time, but I recently made the jump to Tailwind. It's not the revolutionary upgrade I was hoping for, but it's nice evolutionary step in the right direction. It's quite intuitive, but it doesn't get rid of most of the frustrations that come from doing layouts, as those come from the design of CSS itself. `@apply` makes the upgrade worth it though, it's easy to make custom classes from the Tailwind elements.<p>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.
As always when anything about Tailwind gets posted on HN… 200 comments so far and (almost) not a single one about the actual blog post.<p>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.
Tailwind always looks like a cool evolution of Tachyons [0] to me (with a build step). On the other hand, tachyons is really simple, you just drop it into your project with no build required (or drop the sass in), and I've never really felt like it was missing any features I wanted.<p>Has anyone used both seriously who can compare?<p>[0]: <a href="https://tachyons.io/" rel="nofollow">https://tachyons.io/</a>
For those wondering "but separation of concerns!" or "but code reuse!", the dev behind Tailwind wrote a post about his thinking around this, which IMO makes quite a lot of sense, a while back:<p><a href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/" rel="nofollow">https://adamwathan.me/css-utility-classes-and-separation-of-...</a>
I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that looks like this:<p><pre><code> <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>
</code></pre>
I would love to have a transpiler that produces the line above from a code like this:<p><pre><code> <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></code></pre>
I’ve never understood CSS frameworks. CSS is the most lightweight thing I touch in the front end.<p>It’s predictable, there are a billion ways to accomplish things, and it’s super easy to namespace yourself to safety.<p>SASS I understand. It makes writing CSS faster.<p>Tailwind feels like you have to learn CSS, but you’ll never have to actually write CSS.<p>Reminds me of CoffeeScript in that way. You always had to understand both It and JavaScript.
For those that don't know, the laundry list of new stuff is probably all enabled by the first item in the list, just-in-time compilation. This means anything they can dream up can be included as a utility class, without bloating the compile time of the 99% of projects that will never use the feature (also without bloating the css package size, but that's not new since shaking out dead classes for prod has been a thing since forever).
Looks fantastic. My only concern using this in a full React project is its lack of interoperability with standard libraries. It seems like for the best experience, you either buy Tailwind UI to use with a tailwind project for anything except the most basic UIs, reimplement the Tailwind UI components yourself, or have a weird mix of css-in-js and Tailwind CSS. Although I love the idea of HTML-native inputs all the way through, I tend to immediately run into issues where using a native interface instead of a JS-based implementation harms the user experience.<p>Props to the team though - I feel like this is something I'll try out for a marketing site.
I've never used Tailwind CSS. I watched the video "Just-In-Time: The Next Generation of Tailwind CSS" and all of it seems like they're solving problems that are entirely of their own creation, and doing so in an impressively complex way.<p>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.<p>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.<p>Is this progress? I could use the style attribute in 1999.
<i>By far</i> Tailwind has been <i>the</i> fastest way for me to prototype UI.<p>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 <i>first attempt</i>.<p>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.<p>However, I have learnt to be careful with my code, and I often limit the styles by splitting them off into sub-components.
The thing that made Bootstrap click for me years ago as a backend developer were these complete example layouts:<p><a href="https://getbootstrap.com/docs/5.1/examples/" rel="nofollow">https://getbootstrap.com/docs/5.1/examples/</a><p>Is there anything similar for Tailwind CSS?
Before you ask, as it happens in every Tailwind post, what is the point of this when CSS "promotes" reuse and separation of concerns, have a look at @
5e92cb50239222b comment: <a href="https://news.ycombinator.com/item?id=29501650" rel="nofollow">https://news.ycombinator.com/item?id=29501650</a><p>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.
We've been using Tailwind for over a year now. We use it with Angular for our web application and with Gatsbyjs/React for our production website. I have nothing but love for Tailwind.
Tailwind feels like the correct abstraction on-top-of css which works for 90% of use-cases.<p>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.
Every time Tailwind does something great and gets posted here, the conversation devolves into the same arguments: “I don’t get it. It’s just inline styles.”<p>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.<p>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.<p>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.
Since I learned to write semantic class names, and to compose using scss or react components, Tailwind feels like it would be a big step back. I get that it would be kind of nice to prototype in, but is anybody here using it for complex apps or UIs?
I took a stab at using Tailwind a while back but I'm embarrassed to admit it didn't make much sense to me as someone with only the most basic CSS skills. And for some reason CSS to me has been something really hard to get any kind of foothold in and I've always ended up just resorting to big UI component libraries like Bootstrap. Any recommendations on skilling up in CSS for your average back end dev? Manning's "CSS In Depth" maybe <a href="https://www.manning.com/books/css-in-depth" rel="nofollow">https://www.manning.com/books/css-in-depth</a>
I've always been a bit apprehensive of Tailwind but with the latest JIT compiler it actually seems usable. I'm happy to see it getting more use for mainstream applications but I wish it wasn't the "default" for a lot of open source projects.<p>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.<p>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.<p>[1] <a href="https://github.com/vercel/next.js/tree/canary/examples/blog-starter" rel="nofollow">https://github.com/vercel/next.js/tree/canary/examples/blog-...</a>
I used to use Zurb Foundation or Bootstrap for my personal projects but I found these two frameworks required me to use their javascript and their JS does not play nice always. So I moved to Bulma and that has served me well so far. I like not having to worry about CSS (it drives me nuts) and I would like to just focus on building components and functionality.<p>Is TailwindUI an alternate to Bulma ?
TIL about css columns (a replacement of flex if you're not building responsive design)
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/columns</a>
If you would decide or have to use Vue for a complex project today, would you use Tailwind with Vue? If yes, why? If no, why not? Would your answer and rationale change in cases, when you decide or have to use a Web application framework like Nuxt or a UI component library like Vuetify and PrimeVue?
I love Tailwind but now with these updates I'm like "ok whatever". Information overload.<p>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.<p>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.<p>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".
I really like Tailwind, and was excited to use it for a new application at our company. However, I find the lack of standard component classes (modal, card, button, wherever) pretty limiting.<p>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.<p>Again it's a really cool library, but feel the approach is probably better for smaller apps and teams.<p>Daisy UI might help with this, but seems pretty small at the moment. <a href="https://daisyui.com/" rel="nofollow">https://daisyui.com/</a>
Arbitrary Properties (inline styles) can now use constraints (css vars), media queries, and hover/focus states, the reasons Tailwind said you should use their utility classes instead of inline styles in the first place :)<p><a href="https://tailwindcss.com/docs/utility-first#why-not-just-use-inline-styles" rel="nofollow">https://tailwindcss.com/docs/utility-first#why-not-just-use-...</a><p><a href="https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties" rel="nofollow">https://tailwindcss.com/docs/adding-custom-styles#arbitrary-...</a>
I don't have the energy to explain to the naysayers why I love tailwind so much but I do have the energy to log back into HN just to comment that I absolutely love tailwind. Give it a try and maybe it'll stick!
If anyone is interested I just updated a bunch of my example Docker apps to use TailwindCSS v3. That includes examples for Flask, Django, Phoenix, Rails, Node and Play.<p>Here's a link to the repos: <a href="https://github.com/nickjj?tab=repositories&q=docker-*-example" rel="nofollow">https://github.com/nickjj?tab=repositories&q=docker-*-exampl...</a><p>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.
I finally got into Tailwind a few months ago after originally HATING the paradigm shift, but it's started to grow on me -- especially since most of the modern "material design" CSS libraries are starting to show their age and Tailwind fills a similar throw-together-something-beautiful-fast niche.<p>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.
I am the one who always has had issues with TailwindCSS. But now I know why. It's not because it's polluting HTML. It's because I am not one of those, who can whip up some cute buttons on the fly. I have no idea how to apply padding, chose fonts, colors or combine shadows. I'm better off with CSS frameworks which provide me with these things out of the box. TailwindCSS ir just a method for rapid designing, which I am totally incapable of.
Having used it pre-release, the JIT compiler is really incredible. It makes Tailwind a sea-change when compared to Bootstrap and the other, similar, CSS toolkits.
I want something like this which includes a few ExtJS-like grid (as in data table) and treelist classes for "enterprise" CRUD want-to-be-spreadsheets-when-they-grow-up apps. (point being, everything in a single toolkit)<p>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.
Coming from someone who mostly does platform / service work and usually avoids "the frontend", tailwind helped me to actually understand CSS, it made sense to me and has saved me a lot of time. The site I built looked professional very quickly and without much effort.<p>Thank you to the team and I look forward to using it more in the future.
Really happy to see this before the end of the year. The JIT improvements and comprehensive arbitrary value support will no doubt come in handy for quick one-off projects or bespoke landing pages.<p>I'm happy they have also expounded upon some of the more common FAQs on the homepage, including the extraction to components.
I like the idea of tailwind, I’ve dealt with raw css and bootstrap before but I’m certainly no frontend developer.<p>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,
If you want to jump into learning and using Tailwind quickly, I highly recommend their official playlist:<p><a href="https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0" rel="nofollow">https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOL...</a><p>It helped me a lot!
I tried Tailwind not long ago and really liked it, but setting it up with Create React App seemed a bit of a hassle as I couldn't do it without replacing the build, run, and watch scripts with something else I'd forgot the name of.
I inherently from a coworker who was terminated, a web app built with Tailwind.<p>The tailwind.config.js is missing.<p>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.<p>Make sure you don’t lose that file!
lol Its funny how this thread just turned into a review of tailwind.<p>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.<p>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.<p>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.<p>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.
Last time I tried the jit or purge mode, some classes were missing randomly each build and broke my site. (I followed their purge rules very carefully).<p>The worst thing is it ONLY happens on the production build.<p>I like Tailwind CSS and I really hope they make it stable.
Great! but the docs are on the offensive side:
- "Yes, send me all your stupid updates"
- "The new print modifier lets you style how your site should look when <i>animals</i>(in strikethrough) people print it."
Tailwind has to have the gold standard of library docs - impeccably well thought out with the fastest & relevant quick search UX.<p>The invaluable utility of which ultimately convinced us to implement real-time search into our docs as well.
Seems surprising that no one has mentioned UnoCSS - the big umbrella of atomic CSS frameworks yet.<p><a href="https://github.com/antfu/unocss" rel="nofollow">https://github.com/antfu/unocss</a>
I wonder what the future of code-splitting with Tailwind will be. With JIT and a large web app, it's easy to ship a massive CSS file even if 90% of the rules are unused on 90% of the pages.
And the usual release video:<p>What's new in Tailwind CSS v3.0?<p><a href="https://www.youtube.com/watch?v=mSC6GwizOag" rel="nofollow">https://www.youtube.com/watch?v=mSC6GwizOag</a>
> Modern aspect ratio API — no more padding hacks, well unless you need to support Safari 14, which you probably do, but still.<p>This is what makes me cry at night.
I find it funny whenever Tailwind people tout that you "don't have to name things." You still have to name your JS-framework-of-choice components, <i>and</i> you still have names for each of the parts of a single component that get smattered with class names; it's just that the name is implicit in your head now instead of explicit in the CSS
Geez, every time I see stuff from Tailwind I get so jealous…<p>Tailwind is fine, but how they pulled off making tons of people pay for a css framework just blows my mind.<p>I remember reading the “UI for developers” articles, and saw how they built up the hype. This was so well done…
congrats to the team, they’ve been moving at a solid pace while keeping the quality high. funny that this also continues to be one of the most controversial topics on HN
(Formerly: dupe of <a href="https://news.ycombinator.com/item?id=29501125" rel="nofollow">https://news.ycombinator.com/item?id=29501125</a> . The comments have now been merged.)
Why have very spurious html, intertwined with the presentation layer?<p>Are you going to update all your HTML in a year when a fresh new hip library lands on your HN homepage?
With no disrespect to anyone, I think it'd be useful if people bashing Tailwind would briefly list what their day to day programming consists of.<p>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.<p>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.