9 ms·

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular t

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

madeofpalk 4y ago
I'm with you. I'm pretty into neat experimental frontend + css stuff, and I'm baffled by how passionate Tailwind's fans are. It always feels like there's something I'm missing. In all fairness, I've never actually tried it.
- danielvaughn 4y ago
  You should give it a shot, but IMO what makes it worth it is the Tailwind Intellisense plugin. I can design an element in just a few keystrokes, it's amazing.
- christophilus 4y ago
  > In all fairness, I've never actually tried it. I was of your opinion until I tried it. Been using it for over a year on my current project, now. I recently built a little prototype without using Tailwind, and man… I didn’t realize how big a quality of life improvement Tailwind is until I stopped using it. It’s really hard to imagine going back. Edit: I’ve been building websites since 2000, and know CSS quite well, and hope to never write much CSS again.
  - chrisshroba 4y ago
    Agreed - they even include almost at the top of their homepage [1] a quote from the creator which includes: "If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way." [1]: https://tailwindcss.com/ https://tailwindcss.com/
- rozenmd 4y ago
  > In all fairness, I've never actually tried it. That's what you're missing. Try it.
agloeregrets 4y ago
> It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. In my experience, tailwind is pretty close to the real CSS properties. What I found to be wonderful and freeing about it is that it stops the middle step of engineering and naming classes and naming elements with class names and let's you just do styling. There's also a really great plugin for VS code that adds intellisense. Personally I found the modifiers that allow you to target pseudo selectors like :hover to be a superpower. I totally understand the other side of the argument though. It's a lot.
- jonwinstanley 4y ago
  CSS has special syntax for media queries, hover states, dark mode etc. If anything, once you are into it Tailwind is far more "guessable".
  - agloeregrets 4y ago
    Correct, but wring all of those can get confusing and adding a single psudoselector syntax for something is at least a few lines and figuring out how to organize css. Scss is definitely better for this but even then it's a bit nebulous remembering which selector has the states in them.
rjknight 4y ago
You have to learn the browser layout model, yes - you need to know what flexbox is, or how padding or transforms or line height works. But Tailwind provides sensible defaults for how those things are applied, which removes a lot of potential for screwups. It also removes most of the potential for badly “architected” CSS, where you accidentally end up with a set of classes that don’t compose together in a predictable fashion. This greatly lowers the cognitive burden, which helps when collaborating with others or even with your past and future self. I get that it is aesthetically ugly, but if you can stop caring about that then you might find that it’s better on most other dimensions.
andiareso 4y ago
I thought the same thing before requiring to use it on an open-source project I was collaborating on.... it changed my mind within a few hours. It is a God send. Like others have said, the selector logic is top-notch and not having to build your own styles is great as they are pre-defined. You can always modify the styles any way you want and add your own custom ones too. It looks "gross", but it's very practical. If you follow the best standards for component sizing, you should never really have much of a problem with the styling getting in the way.
- yen223 4y ago
  I've noticed this pattern with Tailwind specifically where people who look at it hate it, but people who tried it love it. I've tried it, and I like it. This phenomenon encourages me to try something out before forming an opinion.
  - isleyaardvark 4y ago
    It generally seems like the only objection is “it looks weird” whereas the people who use it invariably say it dramatically improves ease of development and prevention of bugs.
mightybyte 4y ago
Completely agree with you. I greatly prefer something like PicoCSS (https://picocss.com/ https://picocss.com/) which tries to use plain HTML5 as much as possible.
- clementmas 4y ago
  Interesting. I like the idea of clean HTML. It's probably great for small projects but I'm not sure it would scale for bigger applications.
  - mightybyte 4y ago
    In my experience with larger applications no matter what CSS framework you use you eventually want to ditch it and move to fully custom CSS. Starting with this kind of a clean HTML base makes that easier IMO.
    - tomtheelder 4y ago
      That was my experience... until I used Tailwind. The thing is, it basically is fully custom CSS. It's just inline since you already have a re-usability abstraction if you are building a component based application. It's not even really a CSS framework at all. It's infinitely less prescriptive than what you usually see.
seabea 4y ago
I'm really tired of needing to wade through these sort of comments. This is not a unique criticism. If you don't don't get it, either try it out or move on. These comments add no value to the conversation.
- rco8786 4y ago
  My apologies for having a discussion on a discussion forum
peterkelly 4y ago
Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS itself will be useful for many years to come, well beyond the lifetime of any given framework. The browser's built-in CSS support is the framework, I don't understand why people try to build things like this on top of it unless they're adding real value.
- pocketsand 4y ago
  It's really not just syntatic sugar for style. It's a design system as well as a set of utility classes. Consider the difference between <span style="color: #cccccc">Gray text</span> and <span class="text-gray-700">Gray text</span> In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.
  - jakelazaroff 4y ago
    So use a custom property instead (don’t use inline styles tho): <span style=“color: var(--text-gray-700)”>Gray text</span> Or use Sass or something. This problem has been solved for like 15 years.
    - hbn 4y ago
      I want the styles to be in the template though, because I don't want to bounce back and forth between 2 files when designing a single UI. And it's not just inline styles, there's some things Tailwind can do that a style tag can't. Such as screen size breakpoints. Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger: <div class="px-2 sm:px-8"> I'd much rather do this than mess with CSS's horrible media query syntax myself. And when I come back to this later, I don't have to cross-reference between (probably badly named) classes across 2 files to figure out how that div behaves.
      - 4y ago
pocketsand 4y ago
It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like <button class="bg-blue-700 border border-transparent hover:bg-blue-900 ring-2 ring-offset-2">. Change it to: <submit-button>Submit</submit-button> using whatever tooling you prefer. If you don't use this style, maybe you won't like it. I've found it's a waste of time to extract classes for items that are not repeated. And putting utilities in components lightens your "master" CSS file and makes it a lot easier to work with CSS. I've found that the "cascading" part of style sheets almost always breaks down in larger projects. Small components seem to avoid those breakdowns while allowing for reusability.
- moray 4y ago
  That is called Class in CSS...
  - aidos 4y ago
    This is all so played out now. People that haven't used Tailwind come along and say, "this is silly, just use css". The people who have used it say, "you should try it, it's not what you think." There are a bunch of subtle differences with Tailwind that make it quite a different experience. Really, it's closer to inline-styles++ than anything else. The style only applies to the element you're styling. This is by design as it means you can change that one style without wondering what else you've broken across your app. But you get variations that inline styles can't do (and aren't fun to do in css either): `text-green hover:text-red dark:hover:text-white` (interaction states, light/dark mode, responsive etc etc). This makes a huge difference when you're actually building this stuff. Personally, from a DX point of view, I really like it. I find it faster than anything else when I'm building and it's easy to debug too; no need to fish for the styles, they're inline on the element I'm styling. The biggest wart is the inability to functionally build up styles. For example, you have a bunch of js and you need to flip between several different colour states (say for an input that has "disabled | errored | valid | pristene"). There's no great way to force one of your classes to "win" because they're all just classes and the way they were added to the page will determine which border colour wins, for example.
- 4y ago
sph 4y ago
The usual answer, however trite, is "don't knock it till you've tried it." I haven't found a convincing explanation of why exactly this is better until I've used it in a project, and since then I'm completely sold. The semantic CSS concern separation pipe dream has always been snake oil in real projects. Long live Tailwind.
- jonwinstanley 4y ago
  Also - no more constant switching between the HTML and the corresponding style rules
- danielvaughn 4y ago
  I ended up deleting like 30% of my React components after switching to Tailwind, because suddenly they just felt like unnecessary overhead. Tailwind FTW.
jonwinstanley 4y ago
I totally thought this until I started using it on a full project. Six months in and I can't imagine writing traditional CSS or nested SASS classes anymore. Combined with either Flexbox or CSS Grid, the speed with which you can put together a good looking web page is crazy fast.
- hbn 4y ago
  I thought it looked silly when I started my current job and saw it for my first time in their frontend applications. Took a little bit to get the hang of, but once I did I was working WAY faster without the mental overhead of having to cross reference 2 text files (HTML + CSS) to build the same UI, keep them in sync, come up with names, etc. I iterate so much quicker, refactoring is so much faster cause you can literally just cut and paste a block of elements, throw them somewhere else, and they just render properly cause you brought the styles along with them. Screen size breakpoints make it so much easier to make responsive UIs. You get a free, built-in layout and color system. It eliminated basically all the major painpoints of building UIs that I had before. I use it in all my personal projects now.
- nazka 4y ago
  Is it not because you forgot CSS and instead remember the tailwind names?
  - jonwinstanley 4y ago
    Haha. No, I still know CSS but I can’t imagine coming up with class names for everything then going to a different file to define rules. Feels so long winded and hard to keep on top of.
clementmas 4y ago
I gave it a shot and now I like it. I don't have to add classes to my HTML and separate my CSS. I find it more maintainable. The built-in config and colors are also quite good.
- danielvaughn 4y ago
  I nearly always use the built-in config. Though oddly enough, I don't like the new colors (>=3.0 I think), because there's just too many of them now. What I appreciated was the restricted option set; now it just feels like I need to worry about design decisions, which is what Tailwind let me not worry about.
enobrev 4y ago
I wasn't a big fan of the idea before trying it and then I tried it for a small project. I get the appeal, but as the project grew in complexity, I found I disliked managing tailwind But the experience while writing the code is pretty excellent. It made me realize that what I really want (personally) is to have my css inlined in my editor when writing / editing it, and otherwise remain out of the way in my css file.
- aidos 4y ago
  Oooo. That’s an interesting idea. Being able to toggle className to be `className=“…”` in vim. Would be interesting to see what an experience of being able to toggle between classless and class-only jsx looked like.
  - vlod 4y ago
    That would make it more appealing for me. Just saw this proposal: "Add the option to hide class attribute in vscode plugin" https://github.com/tailwindlabs/tailwindcss/discussions/7922 https://github.com/tailwindlabs/tailwindcss/discussions/7922
onion2k 4y ago
It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. That's exactly what it is. But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. Hopefully you're good at that and you can remember, else you'll duplicate things. Hopefully your entire team are aligned on the same naming conventions, or your project's styles will be a total mess. Maybe you'll use styled-components or another CSS-in-JS solution, which helps a bit by making your styles scoped to components so they don't interfere with things outside of where they should, but then you'll have to keep a set of constants to use across all of them anyway, which puts you back at the same problem as plain CSS - you need to remember what's been set, and not duplicate things. Ultimately, Tailwind is a really well designed abstraction of inline styles that means you don't have to worry about inconsistency and duplication of things any more. It's another thing to learn but because it's so similar to raw CSS it's not actually a lot of effort. It works well.
- the_other 4y ago
  > If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. This is true. But if we better taught the cascade and promoted the idea of global styles rather than pretending it's a problem then more people would be better at this and the problems would gently recede. We (the high-end front-end dev community) have fallen into the habit of using class names where we really wanted IDs and using components when we really wanted global styles. I feel we have been pushed in this direction by developers who didn't understand the technology properly. The Tailwind author clearly understands it, so I'm not targeting them... but they are supporting the people who don't see why the cascade is useful. We have megabytes of code to create the impression of global consistency (components, style libraries, CSS-modules...) shipped to millions of users every hour. Browsers do that for us already. Embrace the simplicity of button { border: foo; color: bar; } .callout button { color: aux; } It's so clear, so elegant. The obsession with modularising everything, and then applying a DSL to get between the modules, makes the language's inherent convenience, elegance and clarity so much harder to work with that it boggles my mind.
f3b5 4y ago
Tailwind is a thin wrapper for the people scared of CSS. I use Tailwind at work, and it opened my mind to the benefits of an "ugly" html layout with inline styling. However, being there now, I think that inline CSS offers the better "Tailwind experience" - CSS requires no setup, and learning it properly is a good investment for the future when Tailwind, like so many other frameworks, will inevitably end up on the frontend dumpster fire.
- stefanfisk 4y ago
  how would you use media queries or pseudo selectors in inline CSS?
  - megaman821 4y ago
    I was about to say, if anything it shows there is demand for the style tag to handle pseudo selectors. Setting up some CSS variables on the root and accessing them through the style tags would provide most of the benefit of Tailwind.
  - f3b5 4y ago
    Good point, I don't know of any way of doing that inline. So that's definitely a good convenience function in Tailwind! My lived approach to inline vs. not-inline is: why not both? Inline is great for prototyping, and for edge cases, like specific margins for wrapper divs. Where CSS classes really shine is when it comes to mature / often used components.
    - deleted 4y ago
      [deleted]
  - pcthrowaway 4y ago
    Pseudo elements as well
- tomtheelder 4y ago
  Inline CSS has a few HUGE drawbacks compared to Tailwind, but I think the biggest by far is that your devs are totally unconstrained in what they can do for styling. You're forced to rely solely on convention to not, for example, violate your color palette, or use the wrong border radius, or the wrong padding value. For a small app with a small team and no concrete design system that's not a big deal. At scale that is absolutely massive. A few of the other advantages of Tailwind: - reduced noise in the markup compared to raw inline styles, with the underlying styles getting cached by the browser - utility classes can contain multiple properties that should always go together - media queries! You should learn what CSS is actually doing as well, but realistically Tailwind is, like you said, a pretty thin wrapper on CSS. Learning Tailwind usually just means learning CSS, with some different property names.
jononomo 4y ago
I had the exact same opinion after working with tailwind for a week, but then, after a couple more weeks, I fell in love and decided that this is what CSS should have been from the start.
RyanGoosling 4y ago
I use Bootstrap components. I’ll use Bootstrap utility classes (essentially what TailwindCSS is) for some one-off margin bottom (“mb-3”). Using TailwindCSS alone seems bad to me. Using TailwindCSS is pointless when using Bootstrap (Bootstrap Utilities)
divan 4y ago
Building UIs with typesetting engine and bunch of styling classes is fundamentally wrong. CSS is broken by definition. Tailwind makes it a bit less broken on practice.
cmehdy 4y ago
I do not know much about CSS but Tailwind was very straightforward, and through it I got to learn things in CSS which weren't made obvious before. It's funny that you use the terms "tedious mess" because that's exactly how I feel about CSS without it. Handling screen sizes, print, colors, and simple layouts.. all that seems way too annoying to do in pure CSS to my non-frontend-dev mind, and trivial to do with Tailwind.
mythz 4y ago
If your project is setup to use Tailwind in watch mode where you can view your changes at every save, there's nothing quite as productive. You get fast iterations without ever having to leave your markup to hunt down to find all the classes elements are using which uses their own structure & nomenclature, esp. if you need to support responsive layouts which every project implements differently that usually grows into some unmaintainable mess. With tailwind's utility classes it's all right there on the element, using intuitive prefixes and shorthand class names derived from the CSS properties it uses. It's also the only framework I've used where you can copy markup from a number of different sources and it will look exactly the same as the preview where you got it from without it being distorted by the websites leaking cascading CSS styles.
rajasimon 4y ago
I have eight years in full stack development experience and after tried four times Tailwind a chance now I am back to Bulma and going steadily.
likortera 4y ago
Because most people worry more about maintainability, ease of writing, modifying, performance, resulting bundle size, tooling, consistency, etc and very few about "how it looks". Everyone that complains about tailwind is because they didn't use it yet. Yes, looks weird at first. That's not everything that matters.
MarquesMa 4y ago
> and then scatter that all over your markup This is not how you use Tailwind. Back then there was no such concept as component, so people need to write CSS classes to encapsulate and reuse styles. Now Components are everywhere, and when you write components and CSS classes at the same time, you're non-obviously duplicating structures (Write components, then write classes corresponding that component). In essence, Tailwind (or styled components and such) makes component mechanic as your single source of abstraction.
deleted 4y ago
[deleted]

madeofpalk 4y ago

I'm with you. I'm pretty into neat experimental frontend + css stuff, and I'm baffled by how passionate Tailwind's fans are. It always feels like there's something I'm missing. In all fairness, I've never actually tried it.

danielvaughn 4y ago
You should give it a shot, but IMO what makes it worth it is the Tailwind Intellisense plugin. I can design an element in just a few keystrokes, it's amazing.
christophilus 4y ago
> In all fairness, I've never actually tried it. I was of your opinion until I tried it. Been using it for over a year on my current project, now. I recently built a little prototype without using Tailwind, and man… I didn’t realize how big a quality of life improvement Tailwind is until I stopped using it. It’s really hard to imagine going back. Edit: I’ve been building websites since 2000, and know CSS quite well, and hope to never write much CSS again.
- chrisshroba 4y ago
  Agreed - they even include almost at the top of their homepage [1] a quote from the creator which includes: "If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way." [1]: https://tailwindcss.com/ https://tailwindcss.com/
rozenmd 4y ago
> In all fairness, I've never actually tried it. That's what you're missing. Try it.

agloeregrets 4y ago

> It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. In my experience, tailwind is pretty close to the real CSS properties. What I found to be wonderful and freeing about it is that it stops the middle step of engineering and naming classes and naming elements with class names and let's you just do styling. There's also a really great plugin for VS code that adds intellisense. Personally I found the modifiers that allow you to target pseudo selectors like :hover to be a superpower. I totally understand the other side of the argument though. It's a lot.

jonwinstanley 4y ago
CSS has special syntax for media queries, hover states, dark mode etc. If anything, once you are into it Tailwind is far more "guessable".
- agloeregrets 4y ago
  Correct, but wring all of those can get confusing and adding a single psudoselector syntax for something is at least a few lines and figuring out how to organize css. Scss is definitely better for this but even then it's a bit nebulous remembering which selector has the states in them.

rjknight 4y ago

You have to learn the browser layout model, yes - you need to know what flexbox is, or how padding or transforms or line height works. But Tailwind provides sensible defaults for how those things are applied, which removes a lot of potential for screwups. It also removes most of the potential for badly “architected” CSS, where you accidentally end up with a set of classes that don’t compose together in a predictable fashion. This greatly lowers the cognitive burden, which helps when collaborating with others or even with your past and future self. I get that it is aesthetically ugly, but if you can stop caring about that then you might find that it’s better on most other dimensions.

andiareso 4y ago

I thought the same thing before requiring to use it on an open-source project I was collaborating on.... it changed my mind within a few hours. It is a God send. Like others have said, the selector logic is top-notch and not having to build your own styles is great as they are pre-defined. You can always modify the styles any way you want and add your own custom ones too. It looks "gross", but it's very practical. If you follow the best standards for component sizing, you should never really have much of a problem with the styling getting in the way.

yen223 4y ago
I've noticed this pattern with Tailwind specifically where people who look at it hate it, but people who tried it love it. I've tried it, and I like it. This phenomenon encourages me to try something out before forming an opinion.
- isleyaardvark 4y ago
  It generally seems like the only objection is “it looks weird” whereas the people who use it invariably say it dramatically improves ease of development and prevention of bugs.

mightybyte 4y ago

Completely agree with you. I greatly prefer something like PicoCSS (https://picocss.com/ https://picocss.com/) which tries to use plain HTML5 as much as possible.

clementmas 4y ago
Interesting. I like the idea of clean HTML. It's probably great for small projects but I'm not sure it would scale for bigger applications.
- mightybyte 4y ago
  In my experience with larger applications no matter what CSS framework you use you eventually want to ditch it and move to fully custom CSS. Starting with this kind of a clean HTML base makes that easier IMO.
  - tomtheelder 4y ago
    That was my experience... until I used Tailwind. The thing is, it basically is fully custom CSS. It's just inline since you already have a re-usability abstraction if you are building a component based application. It's not even really a CSS framework at all. It's infinitely less prescriptive than what you usually see.

seabea 4y ago

I'm really tired of needing to wade through these sort of comments. This is not a unique criticism. If you don't don't get it, either try it out or move on. These comments add no value to the conversation.

rco8786 4y ago
My apologies for having a discussion on a discussion forum

peterkelly 4y ago

Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS itself will be useful for many years to come, well beyond the lifetime of any given framework. The browser's built-in CSS support is the framework, I don't understand why people try to build things like this on top of it unless they're adding real value.

pocketsand 4y ago
It's really not just syntatic sugar for style. It's a design system as well as a set of utility classes. Consider the difference between <span style="color: #cccccc">Gray text</span> and <span class="text-gray-700">Gray text</span> In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.
- jakelazaroff 4y ago
  So use a custom property instead (don’t use inline styles tho): <span style=“color: var(--text-gray-700)”>Gray text</span> Or use Sass or something. This problem has been solved for like 15 years.
  - hbn 4y ago
    I want the styles to be in the template though, because I don't want to bounce back and forth between 2 files when designing a single UI. And it's not just inline styles, there's some things Tailwind can do that a style tag can't. Such as screen size breakpoints. Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger: <div class="px-2 sm:px-8"> I'd much rather do this than mess with CSS's horrible media query syntax myself. And when I come back to this later, I don't have to cross-reference between (probably badly named) classes across 2 files to figure out how that div behaves.
    - 4y ago

pocketsand 4y ago

It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like <button class="bg-blue-700 border border-transparent hover:bg-blue-900 ring-2 ring-offset-2">. Change it to: <submit-button>Submit</submit-button> using whatever tooling you prefer. If you don't use this style, maybe you won't like it. I've found it's a waste of time to extract classes for items that are not repeated. And putting utilities in components lightens your "master" CSS file and makes it a lot easier to work with CSS. I've found that the "cascading" part of style sheets almost always breaks down in larger projects. Small components seem to avoid those breakdowns while allowing for reusability.

moray 4y ago
That is called Class in CSS...
- aidos 4y ago
  This is all so played out now. People that haven't used Tailwind come along and say, "this is silly, just use css". The people who have used it say, "you should try it, it's not what you think." There are a bunch of subtle differences with Tailwind that make it quite a different experience. Really, it's closer to inline-styles++ than anything else. The style only applies to the element you're styling. This is by design as it means you can change that one style without wondering what else you've broken across your app. But you get variations that inline styles can't do (and aren't fun to do in css either): `text-green hover:text-red dark:hover:text-white` (interaction states, light/dark mode, responsive etc etc). This makes a huge difference when you're actually building this stuff. Personally, from a DX point of view, I really like it. I find it faster than anything else when I'm building and it's easy to debug too; no need to fish for the styles, they're inline on the element I'm styling. The biggest wart is the inability to functionally build up styles. For example, you have a bunch of js and you need to flip between several different colour states (say for an input that has "disabled | errored | valid | pristene"). There's no great way to force one of your classes to "win" because they're all just classes and the way they were added to the page will determine which border colour wins, for example.
4y ago

sph 4y ago

The usual answer, however trite, is "don't knock it till you've tried it." I haven't found a convincing explanation of why exactly this is better until I've used it in a project, and since then I'm completely sold. The semantic CSS concern separation pipe dream has always been snake oil in real projects. Long live Tailwind.

jonwinstanley 4y ago
Also - no more constant switching between the HTML and the corresponding style rules
danielvaughn 4y ago
I ended up deleting like 30% of my React components after switching to Tailwind, because suddenly they just felt like unnecessary overhead. Tailwind FTW.

jonwinstanley 4y ago

I totally thought this until I started using it on a full project. Six months in and I can't imagine writing traditional CSS or nested SASS classes anymore. Combined with either Flexbox or CSS Grid, the speed with which you can put together a good looking web page is crazy fast.

hbn 4y ago
I thought it looked silly when I started my current job and saw it for my first time in their frontend applications. Took a little bit to get the hang of, but once I did I was working WAY faster without the mental overhead of having to cross reference 2 text files (HTML + CSS) to build the same UI, keep them in sync, come up with names, etc. I iterate so much quicker, refactoring is so much faster cause you can literally just cut and paste a block of elements, throw them somewhere else, and they just render properly cause you brought the styles along with them. Screen size breakpoints make it so much easier to make responsive UIs. You get a free, built-in layout and color system. It eliminated basically all the major painpoints of building UIs that I had before. I use it in all my personal projects now.
nazka 4y ago
Is it not because you forgot CSS and instead remember the tailwind names?
- jonwinstanley 4y ago
  Haha. No, I still know CSS but I can’t imagine coming up with class names for everything then going to a different file to define rules. Feels so long winded and hard to keep on top of.

clementmas 4y ago

I gave it a shot and now I like it. I don't have to add classes to my HTML and separate my CSS. I find it more maintainable. The built-in config and colors are also quite good.

danielvaughn 4y ago
I nearly always use the built-in config. Though oddly enough, I don't like the new colors (>=3.0 I think), because there's just too many of them now. What I appreciated was the restricted option set; now it just feels like I need to worry about design decisions, which is what Tailwind let me not worry about.

enobrev 4y ago

I wasn't a big fan of the idea before trying it and then I tried it for a small project. I get the appeal, but as the project grew in complexity, I found I disliked managing tailwind But the experience while writing the code is pretty excellent. It made me realize that what I really want (personally) is to have my css inlined in my editor when writing / editing it, and otherwise remain out of the way in my css file.

aidos 4y ago
Oooo. That’s an interesting idea. Being able to toggle className to be `className=“…”` in vim. Would be interesting to see what an experience of being able to toggle between classless and class-only jsx looked like.
- vlod 4y ago
  That would make it more appealing for me. Just saw this proposal: "Add the option to hide class attribute in vscode plugin" https://github.com/tailwindlabs/tailwindcss/discussions/7922 https://github.com/tailwindlabs/tailwindcss/discussions/7922

onion2k 4y ago

It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. That's exactly what it is. But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. Hopefully you're good at that and you can remember, else you'll duplicate things. Hopefully your entire team are aligned on the same naming conventions, or your project's styles will be a total mess. Maybe you'll use styled-components or another CSS-in-JS solution, which helps a bit by making your styles scoped to components so they don't interfere with things outside of where they should, but then you'll have to keep a set of constants to use across all of them anyway, which puts you back at the same problem as plain CSS - you need to remember what's been set, and not duplicate things. Ultimately, Tailwind is a really well designed abstraction of inline styles that means you don't have to worry about inconsistency and duplication of things any more. It's another thing to learn but because it's so similar to raw CSS it's not actually a lot of effort. It works well.

the_other 4y ago
> If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. This is true. But if we better taught the cascade and promoted the idea of global styles rather than pretending it's a problem then more people would be better at this and the problems would gently recede. We (the high-end front-end dev community) have fallen into the habit of using class names where we really wanted IDs and using components when we really wanted global styles. I feel we have been pushed in this direction by developers who didn't understand the technology properly. The Tailwind author clearly understands it, so I'm not targeting them... but they are supporting the people who don't see why the cascade is useful. We have megabytes of code to create the impression of global consistency (components, style libraries, CSS-modules...) shipped to millions of users every hour. Browsers do that for us already. Embrace the simplicity of button { border: foo; color: bar; } .callout button { color: aux; } It's so clear, so elegant. The obsession with modularising everything, and then applying a DSL to get between the modules, makes the language's inherent convenience, elegance and clarity so much harder to work with that it boggles my mind.

f3b5 4y ago

Tailwind is a thin wrapper for the people scared of CSS. I use Tailwind at work, and it opened my mind to the benefits of an "ugly" html layout with inline styling. However, being there now, I think that inline CSS offers the better "Tailwind experience" - CSS requires no setup, and learning it properly is a good investment for the future when Tailwind, like so many other frameworks, will inevitably end up on the frontend dumpster fire.

stefanfisk 4y ago
how would you use media queries or pseudo selectors in inline CSS?
- megaman821 4y ago
  I was about to say, if anything it shows there is demand for the style tag to handle pseudo selectors. Setting up some CSS variables on the root and accessing them through the style tags would provide most of the benefit of Tailwind.
- f3b5 4y ago
  Good point, I don't know of any way of doing that inline. So that's definitely a good convenience function in Tailwind! My lived approach to inline vs. not-inline is: why not both? Inline is great for prototyping, and for edge cases, like specific margins for wrapper divs. Where CSS classes really shine is when it comes to mature / often used components.
  - deleted 4y ago
    [deleted]
- pcthrowaway 4y ago
  Pseudo elements as well
tomtheelder 4y ago
Inline CSS has a few HUGE drawbacks compared to Tailwind, but I think the biggest by far is that your devs are totally unconstrained in what they can do for styling. You're forced to rely solely on convention to not, for example, violate your color palette, or use the wrong border radius, or the wrong padding value. For a small app with a small team and no concrete design system that's not a big deal. At scale that is absolutely massive. A few of the other advantages of Tailwind: - reduced noise in the markup compared to raw inline styles, with the underlying styles getting cached by the browser - utility classes can contain multiple properties that should always go together - media queries! You should learn what CSS is actually doing as well, but realistically Tailwind is, like you said, a pretty thin wrapper on CSS. Learning Tailwind usually just means learning CSS, with some different property names.

jononomo 4y ago

I had the exact same opinion after working with tailwind for a week, but then, after a couple more weeks, I fell in love and decided that this is what CSS should have been from the start.

RyanGoosling 4y ago

I use Bootstrap components. I’ll use Bootstrap utility classes (essentially what TailwindCSS is) for some one-off margin bottom (“mb-3”). Using TailwindCSS alone seems bad to me. Using TailwindCSS is pointless when using Bootstrap (Bootstrap Utilities)

divan 4y ago

Building UIs with typesetting engine and bunch of styling classes is fundamentally wrong. CSS is broken by definition. Tailwind makes it a bit less broken on practice.

cmehdy 4y ago

I do not know much about CSS but Tailwind was very straightforward, and through it I got to learn things in CSS which weren't made obvious before. It's funny that you use the terms "tedious mess" because that's exactly how I feel about CSS without it. Handling screen sizes, print, colors, and simple layouts.. all that seems way too annoying to do in pure CSS to my non-frontend-dev mind, and trivial to do with Tailwind.

mythz 4y ago

If your project is setup to use Tailwind in watch mode where you can view your changes at every save, there's nothing quite as productive. You get fast iterations without ever having to leave your markup to hunt down to find all the classes elements are using which uses their own structure & nomenclature, esp. if you need to support responsive layouts which every project implements differently that usually grows into some unmaintainable mess. With tailwind's utility classes it's all right there on the element, using intuitive prefixes and shorthand class names derived from the CSS properties it uses. It's also the only framework I've used where you can copy markup from a number of different sources and it will look exactly the same as the preview where you got it from without it being distorted by the websites leaking cascading CSS styles.

rajasimon 4y ago

I have eight years in full stack development experience and after tried four times Tailwind a chance now I am back to Bulma and going steadily.

likortera 4y ago

Because most people worry more about maintainability, ease of writing, modifying, performance, resulting bundle size, tooling, consistency, etc and very few about "how it looks". Everyone that complains about tailwind is because they didn't use it yet. Yes, looks weird at first. That's not everything that matters.

MarquesMa 4y ago

> and then scatter that all over your markup This is not how you use Tailwind. Back then there was no such concept as component, so people need to write CSS classes to encapsulate and reuse styles. Now Components are everywhere, and when you write components and CSS classes at the same time, you're non-obviously duplicating structures (Write components, then write classes corresponding that component). In essence, Tailwind (or styled components and such) makes component mechanic as your single source of abstraction.

deleted 4y ago

[deleted]