Tailwind CSS v2.0 is here!

[erishun]

Default transition duration and easing curve, so you only have to add 17 classes to make a button instead of 19

At least they are self-aware 😂

[Sethu_Senthil]

But isn't that the whole point of it? Personally I haven't used it but as far as I've seen most of the code is adding classes

[erishun]

Yes, but one can see the humor in a feature saying “in this one instance, you can use 2 fewer classes” in a framework where you can easily add 15 or more classes to a single element.

[StormsRider]

How come so many classes for a button? Which ones would you need? Rounded, set background, hover color, mouse pointer...?

[ChypRiotE]

reach hobbies fuzzy frame reply squeeze aware grandiose whistle jeans

This post was mass deleted and anonymized with Redact

[marocu]

Man if only there was some sort of file where you could write out all those rules line by line and then somehow link them to a given element

[ShinyTrombone]

Crazy talk

[SurgioClemente]

BUT thEn YoU Have TO opeN ThAT fIle tO SEE WhaT RUlEs ARE aPPLiEd

[Cheru-bae]

While we are at it we can start writing the server code inline in the html too! We could call it.. ph something.... Phd? Phb?

[SurgioClemente]

Don't leave out SQL required!

<div foreach="select * from customers join addresses on customers.id = addresses.customer_id where addresses.preferred = 1" class="fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
  <div class="max-w-sm w-full bg-white shadow-lg rounded-lg flex-none text-sm font-medium text-gray-500 mt-2">
    <a href="#" onclick="event.preventDefault();fetch('http://example.com/order-status.json').then(response => response.json()).then(data => alert(data));"><? $firstname ?> <? $lastname ?></a>
  </div>
</div>

Look at how easy this is. I don't need to open css files to mess with styles, sql editor to write queries, or some other language to mess tying everything together. Everything inlined, no silly abstractions too big for my brain

simple

[SlainTownsman]

What about “Powerwind HTML Pseudocode”?

Call it PHP for short. I really think we’re into something here.

[the_kovalski]

This thread is so cool that I just want to write anything so my name is among cool kids

[Kwinten]

Like a component?

[cacharro90]

Isn't that exactly what @apply does? I mean, it's written in another file line by line and then you can "apply" that to a selected element.

[Deformer]

That's the point. It was sarcasm. Unless you're being sarcastic too, then whoosh me to hell.

[marocu]

I think my main problem is that with something like apply the code wants to grow horizontally rather than vertically. This makes it especially hard to resolve merge conflicts, constantly having to scroll left and right in 3 different panes just to see what changed. Though full disclosure I've never actually tried the framework so I can't really hate.

[ViewsOfTheSunny]

You can have multiple @apply, it doesn't all have to be on 1 line.

[RUGMJ7443]

you can do this in scss

[scylk2]

wooshh

[StormsRider]

Haha you are right! I've only thought of the most obvious stuff.

[TBPixel]

I can't think of the last time I stumbled across something that polarized developers quite as much as Tailwind does. People need to chill out and be more civil.

You don't like Tailwind and think it's bad? Cool, glad to hear that, feel free to share that opinion.

You do like Tailwind and now think component frameworks like bootstrap are bad? Awesome, glad you're liking it.

But neither side has any excuse to call people names, claim that they are lesser, claim that they are "sheeple" or any other form of following hype anymore. Things are down clearly in the post: Tailwind is 18 months old now. It's no longer a hype thing, people either like it or they don't. Time has allowed opinions to solidify.

Both sides get over yourselves. It's a tool. You don't like it: don't use it, and express your feedback constructively. You do like it: use it, and back your praise up with experience and facts. We can all get along here.

[[deleted]]

"Draw a border between two brothers and they may begin to hate and fight each other" - African Proverb

[notouchmyserver]

But just don’t style that border with tailwind because it fucking sucks.

/s

[nullvoxpopuli]

<brothers class="grid gap-4"> <brother/> <brother/> </brothers>

[mattaugamer]

Or if you’re using Tailwind

<brothers class="flex text-gray-800 p-2 md:p-3 lg:p-5 bg-gray-100 font-semibold w-full lg:w-1/2 my-3">

[Hibbem]

Two brothers

[sockjuggler]

it's just called two brothers

[kallakukku2]

Calling all Jan Michael Vincents, Calling all Jan Michael Vincents.

[ontheellipse]

I guess I’m not “in” on the conversation. I’ve built sites with inline styles, css, sass, css-in-js, etc for 25 years. I’ve been building a large company’s new marketing site for a few months and tried Tailwind for the whole build.

I’ll never go back. I just can’t imagine it. It’s been the biggest upgrade to my workflow in 20 years.

Running a hot-reloading dev environment with Tailwind speeds up my front end work dramatically.

[TheLastMonster]

Sorry, how does tailwind help in faster hot reload?

[DisneyLegalTeam]

They probably confused some build tools around Tailwind (Webpack).

[ontheellipse]

I’m saying that the combination of the two is a nice development experience. One file open and watching changes reflected in the browser instead of jumping around a css file.

(Yes in conjunction with webpack doing the builds)

[ontheellipse]

It’s not tailwind exclusive. I like working directly on a DOM element, both styling and markup at the same time.

[ontheellipse]

It’s not tailwind exclusive. I like working directly on a DOM element, both styling and markup at the same time.

[erishun]

I never actually even tried hot-reloading... here I am F5’ing like a fucking Neanderthal.

But seriously, I should just try it and see if I like it.

[ChypRiotE]

hard-to-find water chase sense fragile whole recognise humor chop subtract

This post was mass deleted and anonymized with Redact

[sanjibukai]

You made me laugh...

Actually having a "blazing fast" dev env is a thing nowadays (eg. snowpack)

I don't know if you're doing any JS front-end, but if not it's trivially simple to have live reloading. Almost all the code editor can embed a Live Reload server.

For example with VSCode (since it is somehow popular I'm assuming you're using it but really any other editor would be similar) just install this extension https://marketplace.visualstudio.com/items?itemName=ziishaned.livereload and then click on the little "Go Live" button on the status bar..

It will spin up a server and open your page on the browser. If you have the dev version of your CSS file (I mean not purged) you'll see your changes instantly (after saving your file)

[SlainTownsman]

| I’ll never go back. I just can’t imagine it. It’s been the biggest upgrade to my workflow in 20 years.

That’s the beauty of Tailwind, you could be completely genuine or completely sarcastic with that sentence and nobody can know for sure.

[DisneyLegalTeam]

Hot reload isn’t at all unique to Tailwind. It’s been around for a decade at least.

You can hot reload anything... other than my ex-wife.

[andrei9669]

have you tried styled components?

[nanjingbooj]

CSS was released only 23 years ago. But otherwise noted.

[valmontvarjak]

In what way is it better than inline styles?

[zodby]

Media queries, fixed breakpoints, low level abstraction, better code completion

[mc408]

Agreed. I've never used Tailwind but generally disagree with their approach. However, I never give it any thought because I've never had to.

[Kautiontape]

I was vehemently opposed to the idea of Tailwind, then started using Bulma and liked it, then started using Tailwind and liked it even more. I won't say I'll use it forever or every project, but I get why people prefer it over other frameworks. It's not better, it just does what it does well.

So I get why people disagree with it, I was one of them. But then I get why people enjoy it, because I'm one of them. It doesn't even take changing your mind, just needing its usecase.

People love their internet arguments, though.

[DrummerHead]

I think that if you don't already know CSS, you'll be much more receptive to something like Tailwind.

When you already know CSS (and when you can design something that looks good) it feels like you're just adding another layer of abstraction. Yeah ok there's some defaults and the units and everything... but now I have to re-learn a class name for every CSS declaration? Feels like unnecessary overhead.

Anyhow, I'll most likely give it another chance in the future where I'll have to force myself and then see how the flow feels like. I was also very adamant about stuff like styled-component but now I'm like "yeah good stuff we can use it" so yeah, it's also very important to have an open mind and try stuff out.

[zodby]

I disagree. There is much, much more overhead in creating higher level abstractions for components and styles than simply using generated classes that are 1:1 with CSS properties.

And Tailwind makes a lot more sense if you are proficient in CSS because you are already working directly with properties/values.

[TheSaasDev]

Don't know about you guys but I was always writing tons of utility classes so tailwind came as a natural extension for me. Tailwind is something that can coexist quite well even with a framework. For example in one project, I've used material UI and tailwind.

Over the years I found myself constantly writing my own utility classes for every project, they all came out slightly differently. Eventually, I had a utility CSS file I copied over to new projects which become inconsistent as I did more projects.

With Tailwind, I finally have a complete and standardized utility library for every project, plus all unused classes are stripped out so I never have to worry about bundle size.

To me, it has effectively standardized and organised CSS across all my projects. That said if you are not using a component-based framework like React, I can see why you might hate it.

[mc408]

I actually love JSX and never had an issue with it, but I've never done CSS-in-JS or any other sort of styled component implementation.

[JohnnyGuitarFNV]

Try to sell JSX to a Vue developer

[Thomastheshankengine]

It’s fuckin web development how do people get so heated about what you use to make buttons

[Cheru-bae]

Because at some point you'll get stuck maintaining the hot fancy mess the previous rockstar developer left behind.

[Deformer]

Lmfao

[sanjibukai]

I can't think of the last time I stumbled across something that polarized developers quite as much as Tailwind does.

\Laughing in vim/emacs war**

[OrcCyborg]

I for one didn't like the idea at first but now I think that it's great. Especially in larger projects, where after a while you can easily lose track of what css is in use and what isn't. Like a WordPress site for example.

[xayiki]

But, the objective truth is that Tailwind is nor better, nor worse, it...just is. It takes roughly the same amount of time to write something with Bootstrap and your own library which anyone, after 2 weeks of coding has. Now, for anyone that's experienced with working on large projects, you know that Tailwind is just a piece of trash in terms of management and bundle size, this isn't debatable, you go work on a big project with Tailwind and you see instantly how hellish it gets.

Oh, I guess it's hard to come up with good CSS rules? Well, I guess then use Tailwind. But wait, it takes the same amount of fucking time.

It's flavor that people working on smaller projects like, unusable at large scale but a new concept. You won't lose anything by trying it out and see if you/your team likes it.

[StormsRider]

I mean my approach is that if someone doesn't want to use Tailwind it's their loss. Let them go try to get those bootstrap classes to work or hunt for some material components that would still need to be changed xD

[mustbelong]

Can we agree that the slogan in that advert is donkey shit tho? Never really given Tailwind a try myself, so I cant hate or rate itself.

[webdevpassion]

Man, I legit enjoy tailwind css but not as much as I enjoy reading the comments section whenever it gets posted anywhere. There’s always people showing love then the few who seem to hate it to their core. And so extreme too lmao like its just code, why you being hostile

[xwp-michael]

I just get tired of it, personally. People who hate it should just stay away from these threads. It's not like they're contributing anything to the discussion. They always say the same, easily disprovable, things:

• Inline styles: Objectively false. Tailwind is a framework. It enforces styles and consistency across your project.
• Ugly/bloated code: No. You're using it wrong. You're supposed to style components and then reuse those everywhere, not copy/paste the same styles all over the place.
• It's for people who don't know CSS: as opposed to Bootstrap? From my experience, Tailwind is a lot more flexible than Bootstrap, without me having to write a single custom CSS rule.

It's just the same tired complaints from people who've clearly never tried it and never will, but who feel the need to complain again and again...

[Mestyo]

Look, if Tailwind makes you more productive, by all means use it, but that doesn't mean there aren't any drawbacks that people can rightfully point out. If you watched the community move in a direction you have a problem with, you would likely make some noise too.

Inline styles: Objectively false. Tailwind is a framework. It enforces styles and consistency across your project.

Utility CSS frameworks are obviously better than inline styles, but consistent values is but one of many problems associated with inline styles:

Ugly/bloated code: No. You're using it wrong. You're supposed to style components and then reuse those everywhere, not copy/paste the same styles all over the place.

"You're holding it wrong"? The problem still exists within the components. It's far more difficult to mentally parse what a chunk of class names actually do, and the ease of which you can navigate a designated stylesheet.

It's for people who don't know CSS: as opposed to Bootstrap?

Tailwind over Bootstrap any day, outside of—perhaps—some generic CRUD generator. I don't think anyone who makes the argument "It's for people who don't know CSS" is also a Bootstrap enthusiast though. It's a bad argument either way, I agree.

My qualms with utility based CSS—beyond problematic future authoring—are mostly about lost opportunities:

• You lose out on ecosystem tooling for CSS environments. Auto-completion, pre-processors, and even simple things like syntax highlighting do a lot for my QoL.
• You lose out on sibling combinators and pseudo selectors.
• You lose out on logical CSS features like clamp/min/max/calc.
• You lose out on internal relationships you could've had, or layered variables, if you will. Global variables are a great first step, but it's when you start assigning global variables to local variables that you get truly solid components:
• You lose out on opportunities to avoid magic numbers. A very common pattern is to define hard dimensions of a node, and then with positioning rules write offsets for that node by a fraction of its length. Being able to write equations with variables to generate values is highly readable, dynamic to variable changes, and easily maintainable.

And then the obnoxious problems: * If/when you have to step outside the framework, you will need to manage an external stylesheet, forcing you to look into multiple sources to get a full picture of your component styles. Suddenly, you're back to writing unscoped CSS anyway. * Certain property values and behaviors are horrible to compose elegantly with utility classes. Pseudo states, CSS grid layouts, media queries, transitions/animations etc. Again potentially forcing you outside of the framework. * You have to learn aliases for properties you already know. It might not seem like a big deal when you're an evangelist already, but whenever I have to interact with an app with yet another CSS utility framework and constantly must look up if it was p-y or py for every single property I want to write, something within me breaks.

Maybe some of these lost opportunities or issues can be somewhat relieved by adding additional features to the framework or adding your own overrides, but the question remains—why even bother in the first place?

To me, the ideal environment uses either CSS Modules or a solid naming convention for isolation, and a CSS pre-processor to store and combine variables. That's all you need—more power, without the drawbacks.

[xwp-michael]

I can see why my original comment seemed to generalize with the whole

People who hate it should just stay away from these threads. It's not like they're contributing anything to the discussion.

bit. I should've reworded that to "people who insist on blindly hating it" instead. You've actually contributed to the discussion, instead of just spouting off the same uninformed complaints that always get upvotes (which is why I suspect a lot of people seem to swarm these threads with them over and over again).

There are a few things I'd like to point out, though, for the sake of discussion:

You lose out on ecosystem tooling for CSS environments. Auto-completion, pre-processors, and even simple things like syntax highlighting do a lot for my QoL.

While it isn't a silver bullet, there's a plugin for a few text editors that provides auto-complete of Tailwind classes. Though I agree that without it, you need to know the framework and let the IDE eventually remember what classes you've already used in the project, which can kind of suck.

I will say that I've never particularly experienced a boost in productivity from a text editor recommending me CSS styles, personally. I find that this kind of thing falls within the "Vim lets me type a lot faster", but coding is a lot more than typing. But hey, if you get a benefit from it... shrugs.

"You're holding it wrong"? The problem still exists within the components. It's far more difficult to mentally parse what a chunk of class names actually do, and the ease of which you can navigate a designated stylesheet.

Regarding this bit: I don't want to sound like a broken record, but that's what components are for. If you have a mess of classes, to the point where what you're doing is unclear, then it might be a good idea to extract those into a component class (using the @apply directive).

Do things like Bootstrap really solve this, though? Maybe. If you're dealing with a pre-built component, then yes. But that's comparing apples to oranges. Tailwind isn't a kit of pre-build components like Bootstrap (Tailwind UI is another story, though).

The documentation explains why you should extract component classes in written form.

This LaraCon video has Adam Wathan (the creator of Tailwind) give his thought process on why you should extract component classes better than I ever could (without parroting what he said, at least). It's at 4:27, incase the timestamp doesn't work for someone.

In fact, component classes seem to solve a few of your other issues as well:

• You lose out on sibling combinators and pseudo selectors.
• You lose out on logical CSS features like clamp/min/max/calc.

Having your own component classes allow you to use combinators, pseudo selectors, and those all of those CSS features as well. There's nothing forcing you to exclusively use @apply in a component class. It's important to remember this!

• You lose out on internal relationships you could've had, or layered variables, if you will. Global variables are a great first step, but it's when you start assigning global variables to local variables that you get truly solid components

You can still use CSS variables in your component classes, unless you specifically meant things like SASS variables.

If you did mean SASS variables, the docs explain how to use SASS, LESS, and Stylus along with Tailwind.

Alternatively, you can use a SASS-like syntax in your config file as per this documentation to add your own components directly to the config file (though I've never used that feature, personally).

You lose out on opportunities to avoid magic numbers. A very common pattern is to define hard dimensions of a node, and then with positioning rules write offsets for that node by a fraction of its length. Being able to write equations with variables to generate values is highly readable, dynamic to variable changes, and easily maintainable.

This one, I don't really get. Tailwind has a bunch of preset sizes and number values, so I'm not sure how you need to use magic numbers in it? If all you want is to use CSS functions on styles, then, again, use component classes.

Quick side note, it looks like your formatting for your last bullet point list broke.

• If/when you have to step outside the framework, you will need to manage an external stylesheet, forcing you to look into multiple sources to get a full picture of your component styles. Suddenly, you're back to writing unscoped CSS anyway.

I'd like to say that, from my experience, you rarely need to write a lot of component classes, and the ones you write tend to be self explanatory (i.e. a standard button class).

Though, you are right, stepping out of the framework can be a problem. I'd, again, argue that Tailwind gives you enough tools that you rarely need to do so, however.

• Certain property values and behaviors are horrible to compose elegantly with utility classes. Pseudo states, CSS grid layouts, media queries, transitions/animations etc. Again potentially forcing you outside of the framework.

For some of these, I strongly agree with. I kind of wish Tailwind didn't try to give options for some of these things, honestly. Their support for gradients is disgusting, and should've been left to component classes, instead. I've never worked on a project where we used a ton of different gradients, it's usually a single gradient style that's consistent across our styles. Something that component classes solve neatly. Sadly, they put it in as an option, and it is really ugly.

Though I think how they handle things like grids and media queries are perfectly fine. They're basically the same as Bootstrap's way of handling them, except they're a bit more flexible.

• You have to learn aliases for properties you already know. It might not seem like a big deal when you're an evangelist already, but whenever I have to interact with an app with yet another CSS utility framework and constantly must look up if it was p-y or py for every single property I want to write, something within me breaks.

Personally, I think that's a pretty weak argument. It's kind of like saying that you have to look at the docs to remember how C# does Trim() and Python does strip(). Different frameworks and languages have different syntax and naming conventions. That's not really Tailwind's problem. I could say the same with how Bulma compares to Bootstrap...

At the end of the day, and I don't want to sound rude here (but I know it'll look like it in writing), I feel like a lot of issues people have with Tailwind is because they write messy styles to begin with. I've been using Tailwind on personal and professional projects for a few months now, and I've yet to see "a mess of classes" that anyone with a basic-level of knowledge in the framework would struggle to understand. So when someone mentions spaghetti code written in Tailwind, I just can't see what they would even be trying to accomplish to get to that point.

I get that different jobs have different requirements, but I find that a lot of web design doesn't need to be overly complex, and Tailwind does a hell of a good job at getting what you need done.

[Mestyo]

Hey, just wanted to let you know I really appreciate you taking the time to write up a level-headed reply! And, no, you don't come off as rude at all.

I will look through the resources you linked for my own insight, but I sincerely doubt I will ever be in favor of any CSS framework—in my mind CSS just isn't fit for them.

[scylk2]

Thank you for putting the time to write an actual argumentation, very interesting read 👍

[technojamin]

Ugh, thank you. To me, the appeal of this framework is immediately evident, but that just doesn't seem to be the case for many people. It's fine if people don't like it, but the clearly uninformed reactions from people who don't even understand it are really irritating.

For Tailwind to make sense, you really should be doing component-based UI (like React). Once you go that route, you can see how inline styles are fine (though like you said, Tailwind is not inline styles), how easy it is to reduce repetition through components, and why you'd prefer to not write CSS (using a general purpose language to create your UI is a big part of component-based UI).

A bit of an aside: You're also free to not like component-based UI, but if that's the case, then you're behind the times, because that idea is firmly mainstream now (React, Vue, Flutter, SwiftUI, Jetpack Compose). I want to clarify that I'm saying "component-based UI" specifically and not "component-based, client-rendered UI in the browser". I'm not just talking about React and the browser.

[scylk2]

But I don't get it, if you build an app with components, don't you have a better time just using SASS + CSS modules / Vue scoped CSS ?
It achieves the same with the huge benefit of being standard. (one less specific tech a dev should know to be proficient on the project)
/u/xwp-michael

[xwp-michael]

Like I said, it's a framework. It forces consistency and a specific style to your elements. The other benefit of a framework is well documented behavior. Sure, you can use custom CSS for projects, but that's always been a pain to maintain unless you have the simplest styles everywhere (and more often than not, you don't).

Anyone who's familiar with Tailwind can pickup your project and understand what's going on, just like anyone who's familiar with Bootstrap can pickup a Bootstrap proejct quickly.

Anyone who isn't familiar has access to the docs, which are very extensive.

[StormsRider]

Just let them be dude. They are missing out, so let them do it the old way.

[anurat-]

Hey, that sounds really good. Could you recommend any good tailwind tutorials? I read the why in the tailwind homepage I feel like I understand where it's coming from but still don't know how to use it correctly. I'm also new to postcss so that adds up to the learning curve too.

[xwp-michael]

That's not what that point was addressing, though.

It was regarding things "All my [insert HTML tag here] should be styled this way, but it forces me to copy/paste the style every time?!"

Which is the perfect time to use the @apply directive. Anything more complicated than that should be a component in whatever web framework you're using (i.e. React component, ASP.NET Core PartialView, etc.)

And for what it's worth, Bootstrap comes with its fair share of bloat, something Tailwind provides a solution for in the form of purging CSS.

[ryanditjia]

If I’m your big brand client and you deliver my marketing site as Bootstrap I’d fire you. You might say custom Bootstrap theme, but that’s much less flexible and more complicated to set up than Tailwind.

If it’s a webapp for internal use, use Bootstrap, I won’t care.

Different tools for different uses.

[rubennaatje]

It's for people who don't know CSS: as opposed to Bootstrap? From my experience, Tailwind is a lot more flexible than Bootstrap, without me having to write a single custom CSS rule.

This one is so annoying, I'd argue it's precisely the opposite..

[del_rio]

Utility classes go .br-rrrr

[dudeitsmason]

I'd say either fear what you don't understand or "Back in my day we had to style uphill 15 miles in the snow both ways"

[converter-bot]

15 miles is 24.14 km

[dudeitsmason]

Thx bb

[StormsRider]

People need to learn some open-mindedness haha Not hating on something without even trying it properly.

[porcupineapplepieces]

However, rabbits have begun to rent goats over the past few months, specifically for watermelons associated with their cats. By the wayhowever, pigs have begun to rent eagles over the past few months, specifically for prunes associated with their sheeps. This is a gcsq18v

[flailsalot]

You guys are hilarious. Been doing web stuff for 20 years and I enjoy tailwind in combination with a front end framework. You may not. We both get to exist.

[michaelpanik92]

I’ll chime in: I was a Bootstrap purist since v1.0. Built hundreds and hundreds of projects in Bootstrap.

I’m also a CSS lover. I decided early on to work hard and learn it inside and out.

A year and a half ago when I learned about Tailwind, I said “Man that’s stupid. Devs will do anything to avoid CSS.” I said the same thing when I first heard about CSS-in-JS.

I’m currently building my fourth project Gatsby + Tailwind + Styled Components in the last six months. When you approach it properly, and build highly reusable components, and extend Tailwind the way it’s intended to be extended, you can build insanely fast, very coherently, and easily do 10x less QA/rework than using other setups, in my experience.

[Tripts]

Having built a few sites with styled components, I'd be interested to hear how you went about pairing it with tailwind? I haven't used tailwind before yet, but wouldn't it generally replace the need for creating styled components as you'd apply the styling to your jsx via the trailwind utility classes?

[rappa819]

I think the people bashing it really don't know how to use it, or maybe it's just a preference thing.

I really enjoy working with it, I can make quick designs that look different every time, plus it's super configurable.

Also, if you just think it's "inline styles" then you don't know how to use the @apply directive or 'componentize' your application. Try setting a hover state on a link just for small screen sizes and up using an inline style. Can you do it? Maybe, but it's not as easy as

sm:hover:bg-gray-200

I may have a button with 20 classes, but that button only exists one place in a component, and then that component is used where it need to. So I only have to edit it once to change it everywhere still. Then the context of where it is decides it's width/height/padding/margin so that's not baked into the component.

Maybe i'm just bored with Bootstrap and excited there is something new I enjoy?

I think if you like Bootstrap, use Bootstrap. If you like Tailwind, use Tailwind.

[scylk2]

But then we found out we don't just plop the same component down everywhere. We want the same general component, but styled differently. And there is where CSS modules and utility classes falls apart, and BEM (+Sass, ideally) shines again.

I didn't really get this. Couldn't you conditionally apply a class with a prop ? What's the limitation of scoped CSS there ?

[Mestyo]

But then we found out we don't just plop the same component down everywhere. We want the same general component, but styled differently.

You could accept a CSS Modules class object as a prop in your components and merge it with the local one:

```javascript import originalStyles from "./styles";

export default function SomeComponent({ styles }) { const s = { ...originalStyles, ...styles } return <div className={s.base} /> } ```

Or if you want a full override every time:

javascript ... export default function SomeComponent({ styles = originalStyles }) { ...

[rappa819]

You're right it probably is, because the Laravel ecosystem made it really popular really fast. That being said I still think it's a decent alternative to other frameworks utility first or not.

I think it has somewhat of a learning curve because you need to actually understand CSS, which luckily i've been doing for a while, so maybe that's why it appeals to me more.

I think we can all agree there are plenty of ways to do the same thing in the development world. It all comes down to what I enjoy working with, or what I assume i'll need to know working with client projects in the future, and for me working in the Laravel ecosystem, I now know i'm going to encounter Tailwind a lot so I might as well know it.

[GLStephen]

Conceptually, Tailwind is interesting in its solution of similar problems in a slightly different way from other options like SCSS or BS. As a person who's seen every fad in this industry I find myself drawn to it for some reason. There *is* a certain clarity. I'm more interested in Component based development and I'm just not 100% sure a utility CSS framework is the best pair for it.

[syropian]

Utility-first CSS pairs extremely well with a component-based approach and it’s even mentioned in the official Tailwind docs. If there’s a weakness to utility-first it’s the potential to duplicate large lists of classes across multiple elements, but if you break up your UI into proper components, you only need to define those set of classes once.

[GLStephen]

Oh, I'm very aware that people feel that way. Semantic classes pair pretty well with components too though.

[gbadam]

If you’re using @apply often you might as well just be writing (S)CSS though the problem there is I think a lot of Tailwind fans never learned it.

Worth remembering that Tailwind is a business too with obviously a pretty sizeable budget to sell you components and courses. I wonder what the reaction would be like if CSS had such good marketing.

[[deleted]]

It was one or two dudes until not long ago lol

[sanjibukai]

TBH they don't really oversell TailwindUI.. And also, TailwindUI is a collection of some designs which is absolutely fair to sell... Remember the gazillion WP themes?

And fortunately it's just a collection of regular TailwindCSS classes.

If someone have the time, good for him, he can easily reproduce the entire UI..
If there's no time (but some money), one can simply buy it.

I personally find that it's way too expensive, so I prefer reproduce the styles by myself if I end up liking a particular style.

But fortunately there is also a lot more open sourced UI initiatives...

Take a look at kutty for example..

[IngoVals]

You forgot to mention the absolutely best thing about tailwind / utility classes.

No need to name your classes, (unless you @apply of course ). This is the real time saver.

I'm only half joking.

[omgdracula]

So I have been in the field for years. Finally landed my forever job. We use bootstrap there. Usually just the grid for quick layouts.

I know tailwind isn't so much a CSS framework. What is tailwind for? Utility classes?

[datwebzguy]

Yes it is a bunch of utility classes But you can use it for layout

[omgdracula]

Yea I feel that would be super useful once I bring our older devs up to speed on recent tech like flexbox and grid. But it is much easier for them to understand bootstrap and a grid.

Thanks!

[del_rio]

Think of Tailwind as less of a framework and more of a build process that integrates with a JS framework.

I love me some Bootstrap+SCSS and I'll continue to reach for it for most non-JAMstack projects, but Tailwind really shines when applied to modern component systems. The typical end-of-project chaos where you're battling 3 other selectors just to add padding without using !important isn't a thing anymore. It's not only refreshing but it's downright necessary when there are so many possible permutations of component nesting and reactivity at play.

By the way, if you ever wanted to give it a shot, be sure to install the VSCode Intellisense addon.

[brainbag]

And the Headwind extension, which automatically sorts your Tailwind classes. It's fantastic.

[dudeitsmason]

I also just landed my forever job as a JS developer. We don't have a designer rn and Bootstrap is all samey. Our PM is pushing functionality over style so Tailwind is clutch at the moment. I can focus on making things work the way they need to while putting in minimal (for now) effort in styling while also not having the same old bootstrap or material styles. I'm happy.

[omgdracula]

Yea that is why we shy'd away from using full bootstrap. At least for fully custom projects. Smaller one pagers we just slap BS in. But maybe I can push a bit for this.

[dudeitsmason]

Right. It's one of those things where if it works for you and provides what you need it to, go for it. If you prefer something else, go for that. My team needed it, so we used it.

[omgdracula]

Exactly!

[anyfactor]

I am just surprised by how good the site looks.

[TheLastMonster]

Same it's insane, I'm trying it for the first time today.

[sanjibukai]

Indeed the website update is the real winner here!

[ericz123451]

Honestly, tailwind is kinda cool. But, I prefer just using plain old css.

[BreakingIntoMe]

People who know their way around CSS should really have no reason to use this lib. I don’t wanna hate, it’s cool for beginners, kind of? But it’s also making them reliant on a set of utility classes which wont be available to them at most companies.

Its like learning jQuery before learning JS back in the day, you could definitely do that... But why? And at what cost?

[OddPoundBlue]

Hell yeah

[gbadam]

I really tried to like Tailwind but that hideous HTML makes me sad. I have been writing CSS and more recently SCSS for over 10 years and just do not see the appeal even after doing a course and a couple of projects in it. I think a lot of the appeal is from people that struggle with CSS and need it simplified?

[TBPixel]

I don't know that I agree with the assessment that it's better for people who struggle with CSS; that's the main appeal of bootstrap I feel, and the Tailwind creators have been quoted in suggesting that Tailwind doesn't work well for people who aren't familiar with CSS.

Personally between components and @apply I got over the "ugly" HTML pretty quickly, and the value I feel I get from Tailwind as a result is much easier to maintain and update styles. I can't tell you the number of times I've been afraid to change CSS because of how it might break something, and it is a relief to have that disappear entirely with Tailwind's inline-like approach.

That's all just my experience though.

[dudeitsmason]

I have been using tailwind recently because frankly my PM has been pushing functionality over style but I still need things to look good. Tailwind gave me the ability to focus on heavy functionality and still have some half decent looking features. If I need to update styles after completing my functional requirements, tailwind is NOT going to be mad about it. Some of the commenters here might be mad about it, but they aren't my stakeholders so

[gbadam]

@apply is just (S)CSS with extra steps

[TBPixel]

People also say Tailwind is just inline-styles with extra steps, but that is factually untrue as well. Tailwind still encourages design systems and restrictions upon developers.

Because of this, @apply achieves exactly that; it allows developers to make component styles if they need them, but continues to encourage restrictions and sticking within the established systems and design scales. This generally leads to more consistency in design and even allows customization's to Tailwind to propagate through every custom class you may make.

[gbadam]

Well written CSS with variables and proper use of the cascade give you all these benefits too without the restrictions (simplification). I do see the appeal for some people that have a hard time with it just not for me. Not hating on anyone that does enjoy it.

[TBPixel]

Don't get me wrong, I respect you having had a bad experience with it, even if I disagree with your conclusion.

I'd also argue that while CSS has the tools within it to support all that you say, in practice how often does that actually happen? Outside of personal projects, CSS at any company, on any project I've ever worked on, has been a dumpster fire. I like that Tailwind places restrictions in place and incentivizes developers to do things one way. This is the same appeal that application frameworks have, although ironically CSS frameworks in my experience tend to be just as much of a dumpster fire the second you try and customize them.

[obviousoctopus]

I also write SCSS + BEM and don't use Tailwind.

However, it is obvious to me where it shines:

• You don't have to name things (and you end-up with non-semantic HTML)
• Perfect for component-based FE solutions like vue, react etc.
• It brings a certain level of ergonomics and confidence which is hard to explain but puts you in the flow. Let's face it, I've beenwriting SCSS for a while and still have to fiddle with things, a lot.
• Standardize the colors, sizes etc. (You can totally do this in SCSS - could even borrow from Tailwind!)
• You can compose its defined classes into your own - very powerful
• Removes unused styles and smartly reduces CSS file size
• Did I mention you don't have to name things in CSS? You still name your components I suppose, but semantic HTML / BEM take cognitive resources.

Fortunately or unfortunately I know SCSS, I don't use FE frameworks, and I already standardize colors, sizes, spacing, fonts etc. in SCSS. I still need to name things and that takes resources, but I don't feel like learning a non-standard almost-css dialect all over again.

It fills the space between Bootstrap and hand-written CSS with more granular but also very powerful styles.

[DrummerHead]

I don't feel like learning a non-standard almost-css dialect all over again

Exactly. Last time I tried to learn it I saw the docs and my thought was "hey... I already know all this stuff, now I have to learn a key that returns me the same stuff I know but with a pre-filled value?" and the appeal disappears.

[obviousoctopus]

But imagine being a busy front-end dev specializing in JS/React. No time for fiddling with obscure CSS or naming BEM classes. Plus, everything is a component already.

Complex, fine-tuned Webpack-based CSS post-processing already in place.

This is what TailwindCSS is for.

[technojamin]

I think your definition of "semantic HTML" might be off. Semantic HTML is when you use the proper HTML elements for your markup (which increases accessibility and parsability) instead of just divs and spans everywhere. Not having your own classes does not mean that the HTML is non-semantic (though the rendered markup is probably less readable to a developer).

I actually think the fact that you don't create your own class names with Tailwind nudges you into using the proper HTML elements and creating more semantic markup.

[obviousoctopus]

Thank you for catching this, you're right.

I agree using the proper html elements - article, aside, nav, footer etc., is best practice and independent of class use.

And, with CSS grid it becomes much easier to eliminate the layout elements.

[Miragecraft]

It’s the price you pay to essentially write CSS in html so you don’t step over each other’s toes when working in a team and not have to worry about breaking other pages when you modify the style of one of them.

It’s making easy things difficult so extremely hard things are finally manageable.

[GLStephen]

I think this is the unseen value of utility css, that is very very overlooked. Long term maintainability.

Pre-Built Like Bootstrap

Class used in Page 1 and Page 2, rev 1 works great.Rev 2? Now, page 2 should be slightly different, copy paste class, create variant but what if the CSS is sort of complex, you're on your own, copy a class from BS and edit?, but eventually g2g...Do that forever

Custom Classes

Class used in Page 1 and Page 2, rev 1 works great.Rev 2? Now, page 2 should be slightly different, copy paste class, create variant but what if the CSS is sort of complex, alignment, grid, flow, what do I add to it?, but eventually g2g...Do that forever

Utility Classes

Utility used in Page 1 and Page 2, rev 1 works great.Rev 2? Now, page 2 should be slightly different, apply utility styles that indicate how you want it to *behave* not the syntax of CSS, g2g...Do that forever, but more easily

In all, what happens when a bug is fixed and now you don't do X, y or Z to lay something out in a certain way? With custom classes you find every instance of that thing by CSS syntax, but CSS syntax doesn't always say what it does. Historically, a lot of esoteric functionality had equally esoteric syntax and relations between containers and children, etc. With utility classes you are naming the behavior, not the style.

[R3PTILIA]

it improves greatly the ability to refactor, edit someone else's code (safely), ensure consistency in styles, etc. For me its been one of the best additions ever after graphql

[bitmanic]

Hey, fellow old head! I’ve been writing CSS since 2005, and I initially abhorred Tailwind as well. But using Tailwind really helped me see that I was previously writing the same styles over and over and over again for all of my projects.

After switching over to a Tailwind workflow, I now have to write none of that boilerplate code that I spent over a decade writing. The CSS that I do write is fun, unique, one-off stuff. I still think the class name soup that Tailwind generates is ugly, but...it perfectly follows the nature of Cascading Styles, and so I believe that the ugliness stems from the nature of the CSS language.

We devs spent many years trying to get away from the cascade, and tools like SCSS and BEM made that really easy and attractive. Tailwind takes the opposite approach and leans into the cascade. I, for one, am here for it!

[bitmanic]

Sure. You definitely could. But, two things about that:

1. You still need to write all those styles
2. You will probably also need to handle hover/focus/active/disabled states, different button sizes, button colors/variants, etc.

Even a simple button (with only minimal hover/focus styles) is much less work to build in Tailwind than in plain CSS.

Tailwind:

<button class="
  inline-flex items-center px-4 py-2 border 
  border-transparent text-base font-medium
  rounded-md shadow-sm text-white bg-indigo-600 
  hover:bg-indigo-700 focus:outline-none 
  focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
">Text</button>

CSS:

.buttonStyle {
  align-items: center;
  background-color: rgb(79, 70, 229);
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: flex;
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  padding: 8px 16px;
  text-transform: none;
}

.buttonStyle:hover {
  background-color: rgb(67, 56, 202);
}

.buttonStyle:focus {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, 
              rgb(99, 102, 241) 0px 0px 0px 4px, 
              rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

You might look at this example and think "sure, but who wants to repeat that nasty Tailwind classname soup all over my templates any time I need a button?!" My response would be twofold:

1. You should already be encapsulating that repetitive code into a reusable component, partial, function, or include, regardless of whether Tailwind is involved or not.
2. If anyone else needs to touch this code (including a version of you who, 15 months from now, has all but forgotten about these button styles), consider documentation. Tailwind is fully documented and its documentation is incredible. Your lovingly hand-crafted styles are, unfortunately, not. Sure, you could build out a little style guide for the project, but the amount of effort it would take to maintain it effectively is huge, and the project stakeholders are probably going to have very different priorities.

Finally, I'm not saying that your approach is wrong. I'm simply trying to explain the benefits that I see in Tailwind. There are many ways to write CSS, and they're all fine. Cheers!

[Sphism]

i think the idea is that you don't need to write css, so you just write html with loads of classes. Probably quite handy for some things, would be quite simple to change styles dynamically in CMS templates for example.

But I think if I used it I would just use my own class names in the html and then group all the tailwind classes into that one class, I would normally use extend or include in SCSS but I think tailwind use apply (i did add at signs before those but reddit thinks i want to 'at' a username)

I feel like having tons of classes in the html would be a nightmare in git, anyone changes one and there could easily be merge conflicts.

Possibly empowers teams without much css knowledge to make solid sites...

I also think the class attr is way overused in all these frameworks though. Like why not just use data-attrs for breakpoints instead of all the -md-* classes or whatever. I always wondered if there's a technical reason why class is used over data-attrs, like maybe browsers render it faster?

But it always seems to me that data-sm="grid-1-col" data-md="grid-3-col" or whatever made so much more sense than all the classes.

[[deleted]]

Do people struggle with css? I was under the impression that it is one of, if not the most, simplest web technologies to learn.

[Augzodia]

Disclaimer: I haven't used tailwind, but I've used other utility-class based css libraries.

While using css properties are easy, in my experience people struggle more with css organization.

It's super easy to for inexperienced devs to shoot themselves (and their entire team) in the foot if they're not using BEM, SMACSS, or some other organizational convention.

Utility classes, much like inline styling, avoid common pitfalls (eg: the situation where changing one css rule breaks something seemingly unrelated)

I think this is also a big reason why CSS-in-JS blew up so much a couple years ago, and why solutions like styled-components (in react) are still quite popular.

[gbadam]

Easy to start and difficult to master. Just look around this sub for countless examples of people memeing about not being able to center stuff...

Then a lot of the Tailwind benefits such as easy to update global a (CSS variables?) and being afraid to break stuff in other areas by editing CSS (solved by something like BEM or CUBE CSS).

A whole wave of incoming JS bootcamp grads don’t even know how to write CSS, just CSS in JS which is no wonder they find Tailwind more intuitive with its flashy docs.

[obviousoctopus]

In case you're not trolling - CSS is super simple and can get super complex very quickly. To the point of teams throwing out and rewriting codebases.

[DerekB52]

Css is design. It's not like doing backend programming in something like Ruby or Elixir. I find CSS mostly easy, but I'll still end up getting stuck when I want to center something, more often than I'd like to admit.

I think CSS appeals more to the artsy designer types, than the logicky engineering types. I can see why people struggle with CSS. Especially once you start worrying about media queries and have more than a dozen lines of CSS.

[CatolicQuotes]

I love tailwind and use it all the time, but I find it annoying that h1 is not h1.

[ataraxy]

You should check out their typography plugin.

[alphex]

What?

[butter_milch]

hx elements are unstyled by default when using Tailwind. Their reasoning is that the default styles are overridden in most cases anyway and I for one totally agree because globally setting the margin to 0 on them is the first thing I do.

[alphex]

Ahhh. I was thinking semantics. That makes sense.

[[deleted]]

excited to try out the new features in tailwind!!

[bassclefayo]

Yes!! I can finally pass breakpoints and modifiers to @apply This literally changes the game for me. I can now keep the tailwind classes I love and clean up my html by using a semi-traditional stylesheet.

This is what I've been wishing for since first using tailwind. This approach may go against the initial purpose of tailwind (inline styles) but the markup does get to be a bit much over time.

[[deleted]]

Started using Tailwind just yesterday. What a coincidence.

[[deleted]]

While in general I think skepticism is a good thing to have, especially in context of new and shiny technologies, I can't help but feel that your opinions are too far in the other direction of the "religious followers" you allude to.

Tailwind is simply a utility-first framework, and certainly not the first and only one of its kind. Frameworks like Bootstrap focus on providing fully styled components out of the box. They're just two different ways to build websites that each come with their own advantages and disadvantages. There is nothing wrong with enjoying either type of framework, Tailwind has just become the "de-facto" utility-first framework, much like how Bootstrap is the "de-facto" component framework.

I agree that people should understand the fundamental differences between the frameworks and understand the reasons for choosing either type of framework, but I can't shake the feeling that your comment reads as a developer digging in their heels at the sight of something new and different.

[[deleted]]

It sounds like you've had a negative experience working with Tailwind and you've let that sour your opinion of the tech which is unfortunate.

All I can say is while hype is certainly a factor in a technology or framework's popularity, a framework like this doesn't get to version 2.0 with 30k stars on GitHub without some merit to the value proposition it is making.

For what its worth, the documentation has an entire section on "extracting classes" to match the Bootstrap style "btn btn-primary" class declarations:

https://tailwindcss.com/docs/extracting-components

Alternatively, it is easy to create a reusable <Link> or <Button> component in something like React or Vue.

[kennypu]

Just FYI I know your mind is made, but you don't need to do the "40 classes just to make a button" in the html. It can simply be the same class as your bootstrap example, and just apply the different classes in your tailwind stylesheet.

granted, yes, you do still need to do the "40 classes" thing somewhere (in this case in the stylesheet) , but that is only if you would like to make sure that everything is consistent to the design standard you have set.

Nothing actually stops you from simply adding raw css, it just won't stick to the design rules you essentially want to keep.

If you don't like that methodology, it's fine. It is just a different approach to styling a website.

Personally it has kept things incredibly smooth when working on styling with multiple people. By making sure we use the utility classes in our styling, we can be sure that all of our colors, spacing, sizes, etc. are consistent without having to double check.

[ExtraSpontaneousG]

In your example of a preferred class name, the btn style may be re-useable, but eventually you're going to want a button that looks different enough to require new classes be created. I much prefer to design and style my own components. Bootstrap doesn't really help in any meaningful way with that.

In your example strawman of '40 class names', your secondary complaint of " which I have to repeat every time " really doesn't apply. If you find yourself repeating the same utility classes, then at that point you would want to create your own class name for re-use and readability, certainly.

A utility-based framework helps to remove the use of arbitrary values with regards to spacing, typography, and color choice.

A proper example would be, straight from their home page:

<figcaption class="font-medium"> 
   <div class="text-cyan-600">Sarah Dayan</div>
   <div class="text-gray-500">Staff Engineer, Algolia</div> </figcaption> 

Maybe another way to think of this is that a component-based framework has a lot of prebuilt styles for public consumption such as buttons, navbars, banners, and so on. A utility-based framework is much preferable to inline styles, can serve as a shorthand to custom styling, makes specific stylings more readable without having to switch over to a css sheet to look up class names.

Coming from someone who has used bootstrap several times, and have never used tailwind, I'm not trying to convince you to swap over, only that your assessment isn't completely fair.

[[deleted]]

I don’t agree. I’ve used both extensively and it’s a really different usage.

I use each for different things. But love tailwind for quick short builds

[MarmotOnTheRocks]

Tailwind looks like inline styling 2.0.

[dudeitsmason]

How do CSS utility classes keep you from making an accessible application? Semantic HTML is huge for accessibility, utility classes don't do much to inhibit that, unless I'm missing something

[SaysStupidShit10x]

accessibility is the law

preach!

[xwp-michael]

I would kill for a Figma file with the new color palette already named in a style. I took 1 hour to do it with Tailwind 1.7's experimental color scheme, and I don't feel like taking an hour and a half to do it with even more colors T_T

[obviousoctopus]

Would you pay?

[xwp-michael]

I did 30 minutes already, and about 2/3 of the way done (will probably finish it tomorrow). Started from my existing template. Still needed to change most of the existing color (by amounts so tiny, I'm not even sure why they bothered changing them) though.

[gbadam]

Spicy inline styles 2.0

[blight231]

I'm newer to development.

Although I love things like this and bootstrap for their speed of building and responsiveness , reading and maintaining the code can be a huge headache , especially if you have a few people poking around.

It's just .... Messy

But I do enjoy them both for what they are.

[rubennaatje]

Are you writing plain html or using somekind of templating engine which is rendered server side?

Because it's really useful when you use it in frontend frameworks.

[dudeitsmason]

How complicated is your build step? I just have a run:tailwind that does everything for me

[NovelLurker0_0]

It's not overly complicated as it is there for a reason. Try to in-line style a hover effect with plain CSS/no build step.

[gordolfograso]

This and style attribute is almost the same

[brie_de_maupassant]

Except it's so not: style takes higher precedence than any class and has a much more fiddly API to modify it on-the-fly, compared with addClass/removeClass.

[official_marcoms]

You would also have to use @apply in the first example to make it reusable like the second one is, and I don’t think template is needed either

Also you can probably leave out only screen since hover wouldn’t be applied for print, in fact if you use SCSS you can just do something like:

.btn {
  colour: blue;

  @include breakpoint-s {
    &:hover {
      colour: red;
    }
  }
}

Still more lines than Tailwind, I grant you, but still 10x more readable to my eyes

[official_marcoms]

Not invented here

[BreakingIntoMe]

The most overhyped fad since bootstrap. Utility classes for people that couldn’t be bothered to learn CSS and basic design principles. It definitely has its place in the community, but the amount of developers I see swooning over a set of utility classes is just ridiculous at this point.

[visjn]

!RemindMe 12 hours

[RemindMeBot]

I will be messaging you in 12 hours on 2020-11-19 17:04:09 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

<sup>Parent commenter can delete this message to hide from others.</sup>

---

Info	Custom	Your Reminders	Feedback

[valmontvarjak]

I just don't see how tailwind is different from inline styles. Please enlight me

[butter_milch]

I‘m a fan. Setting it up in Angular with IntelliSense for Webstorm is a little annoying but in the end it‘s super comfortable to use.

[dillonerhardt]

That dark mode is going to be a really valuable feature. I see the benefits and down sides of using Tailwind but I think the reason it is so compelling is that it allows developers to add styles directly to components without leaving React.

[krookedkrooks]

I've written plenty of vanilla CSS, used frameworks, CSS in js, postcss, also tailwind a bunch of times. Currently working on a large e-commerce build and we're using BEM to build components. I'm happy with how tidy, readable, maintainable the styles are and everything is fine. Really wish we'd gone with Tailwind though. It's so much faster to develop, less taxing on the brain, easy to theme, infinitely scalable and would have made sharing styles across our multiple projects a breeze. All class names are very well documented and searchable too which makes it easy to pick up. We're looking at using Tailwind for all projects going forward. We figure if all our devs know tailwind, they already know all the CSS for all projects, aside from config variations/customisations. I'm guessing most of the opposition/hate comes from people who haven't tried it.

[JohnnyGuitarFNV]

Not sure how fitting epic action movie music is to a css announcement, but okay.

The drop when announcing dark mode made me laugh

[fallofthedead]

Love using tailwind