13 ms·

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dra

by 65 4y ago

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future of writing CSS.

anthonylee 4y ago
I tried it out last year. Absolutely love it.
deleted 4y ago
[deleted]
mritchie712 4y ago
for haters, color management is a good starting example of why it's good. https://tailwindcss.com/docs/customizing-colors https://tailwindcss.com/docs/customizing-colors
- lolinder 4y ago
  Color management is easy in SCSS, too, though. I just have a _colors.scss file and enforce that no color is ever used that isn't in that file. If I'm working with a designer rather than designing my own UIs, that they have a default color palette isn't helpful, so what do I gain from Tailwind? EDIT: Reading some other comments, I wonder if part of the reason I don't see the utility is that I use Vue, not React. It sounds like Tailwind solves a lot of the same problems that Vue+SCSS does.
  - bpicolo 4y ago
    One good part is the generated classes for every color. Background colors, font colors, border colors... everything in the color palette is usable as `bg-blue-500`, `text-blue-500`, `border-blue-500` etc. Could be reproduced in css for sure, but it's a great set of defaults that you can utilize cross-repo. Standardization is a powerful concept.
  - ramesh31 4y ago
    The killer for SASS nowadays is CI. You're either using the (ancient, slow) Ruby implementation of SASS, or node-sass which requires a native binary build and causes headaches across environments. Furthermore, with Post-CSS, the feature set of SASS has been completely subsumed by the latest CSS standard. There's really no good reason to use it anymore.
    - toastal 4y ago
      It's Sass, not SASS. The native libsass is much faster. The headaches come from people trying to distribute binaries and libraries through NPM.
      - jbenner-radham 4y ago
        If we're being pedantic technically it's npm and not NPM ;)
        toastal 4y ago
        Oof. I did not know this one. > npm (originally short for Node Package Manager) Acronyms can make sense to switch case, but initialisms... en-pee-em... I guess it happens. I originally was introduced it as Node Package Manager, but I'm gonna make an effort to correct this now.
    - no_wizard 4y ago
      You should really be using the dart-sass[0] build (just `sass` on npm). None of the headaches of native binaries or using ruby, its pure JavaScript (its a dart codebase transpiled to JS). It is very fast. [0]: https://sass-lang.com/documentation/#older-versions https://sass-lang.com/documentation/#older-versions
      - ramesh31 4y ago
        >[0]: https://sass-lang.com/documentation/#older-versions https://sass-lang.com/documentation/#older-versions This is awesome, really glad to see things have progressed from the node-sass days. Might have to give it another look.
  - andrei_says_ 4y ago
    Including Tailwind’s list of colors in an scss codebase is trivial. Same for spacing and font sizes if you need these standardized and haven’t done it already. Which we always did way before tailwind was invented.
swyx 4y ago
agree. i'm a cynic turned convert as well. even told a friend it caused ugly unreadable classname soup and that zero-runtime CSS-in-JS solutions (like linaria, but even css modules) could do more with a lower learning curve (because you Actually Write CSS instead of tailwind shortcuts). then i tried learning it and it turns out that Tailwind's constraints both help my design and help with the learning curve wrote up full thoughts in an old post https://www.swyx.io/why-tailwind https://www.swyx.io/why-tailwind
bpicolo 4y ago
Same. People touted semantic CSS as the future for ages, and that's what I was taught in my first role out of college. Parts of that made sense (e.g. de-noising html), so I was against tailwind, but it's has quickly become one of my favorite tools. I am pretty conservative in terms of "use boring tech", because I see so much reinventing of the wheel and making the same mistakes, but Tailwind is not in that camp! I was never happy with any of the CSS in JS solutions in React land – all of them felt tedious or boilerplate-heavy compared to Vue's CSS model, which is excellent. Writing css and getting component scoping for free are great. But with tailwind I've minimized usage of Vue CSS too. I pull it in occasionally when I need specific overrides of the tailwind component lib I'm using, but other than that I don't even need to touch css.
gedy 4y ago
I really like utility classes and think Tailwind is really smart for many usecases, but the drawback with Tailwind is even if you componentize, your code is sprinkled with very specific visual classes like for shadows, border radius, etc. When companies want to refresh their look and feel, it's really annoying to change everything to remove now unwanted shadows, etc. In spite of it's age, I've found Bootstrap is better for this as it uses predefined component classes that can be restyled without rewriting the app or components (but also has some handy utility classes). I know you can define your own component classes in TW, but then you've just recreated Bootstrap/Bulma/etc, but with no 3rd party components available. (Tailwind UI is just some limited copy paste code snippets last I looked.)
- bpicolo 4y ago
  > but with no 3rd party components available There are a bunch of great 3rd party components available in tailwind now. https://daisyui.com/ https://daisyui.com/ is one I've been using. They're usually a tad bit lower level than typical framework component libs, but the flexibility is great. A great thing about that is they're not React-specific, Vue-specific, etc. You can use them in everything from raw html to your JS library flavor of choice.
  - gedy 4y ago
    DaisyUI is a nice approach and hope it succeeds. We were looking to use that until we realized it's almost identical to Bootstrap, and that we were just using Tailwind as an elaborate way to make a custom Bootstrap theme at build time. Company decided to go with BS5 instead.
- likortera 4y ago
  Have you ever had to change the company's look and feel with anything else than tailwind? I had to do it with a BEM codebase, and I also had to do it with tailwind. The tailwind situation was by far the easiest one. And it was because I was not afraid to remove things that could break unrelated parts of the application. Not allowing developer to hand write CSS is a great restriction for a good bunch of developers. The messes out there are unbelievable.
DecayingOrganic 4y ago
As a side note, you can configure prettier for automatic class sorting for tailwind! It makes a huge difference in terms of code readability and maintenance. https://tailwindcss.com/blog/automatic-class-sorting-with-prettier https://tailwindcss.com/blog/automatic-class-sorting-with-pr...
- phreack 4y ago
  Thank you so much for sharing that! I had no idea how much I even needed this, my classes tend to get incredibly messy and it'd always bothered me.
Existenceblinks 4y ago
The truth about web design is there's only a few things that repeat in semantics, that's why lowest level token works. At the end of the day, web design is mostly color, space, font, barely things that are higher. If you have some buttons and form inputs pattern, your design is almost done (excluding non-ui state/behavior).
ramesh31 4y ago
>I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. Same. I always said they'd pry my stylesheets from my cold dead hands. But then I tried it, and I'll never go back. I feel like it's time to let go of those last vestiges of the old "web development" paradigm, and start treating the browser as what it is; a universal VM for application development.
Vinnl 4y ago
If you're using a component-based architecture (e.g. when using React, Vue or Angular), otherwise it can get pretty annoying. But if you do, it's pretty great; you don't really need the abstraction of reusable classes, when you already have reusable components, and getting rid of useless abstractions makes me a happy programmer.
- debrice 4y ago
  I would add that, even for regular HTML you can write CSS using @apply and still leverage the nice structure tailwind provides while creating your component CSS classes.
  - rawfan 4y ago
    You can also just use regular webcomponents and make re-usable components regardless of frontend or backend usage.
- nojs 4y ago
  I am using it with traditional Django + Jinja2 for templating now which is working well. With {% macro %} you basically get fully reusable “components” on the backend so there’s limited copy pasting of tailwind classes.
- aaronbrethorst 4y ago
  This isn't meant as a contradiction of your point, but there are plenty of ways to use component-based architectures with server-side rendered apps, too, like GitHub's ViewComponent gem for Rails. https://viewcomponent.org https://viewcomponent.org Also, I'd go so far as to say that if you're not using a component based architecture for your web app's view layer, you're creating a ton of extra work for yourself.
  - cgarvis 4y ago
    +1 Using it in a Elixir/Liveview app. Using phx_component_helper has made making those components really easy. https://phx-component-helpers-demo.onrender.com https://phx-component-helpers-demo.onrender.com
hanifc 4y ago
I've seen this exact comment so many times over the past year or two that I think it's finally time that I try it out.
- srik 4y ago
  I was where you were and am glad I got over my reticence because it's genuinely feels like a pleasure to use now. Another good aspect is that while you're using tailwind's custom identifiers, you still have to write real CSS and so are quite likely to end up refining your own CSS skillset in the process.
fc373745 4y ago
I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will inevitably break your prettier printWidth rule is, by far, the most annoying aspect of Tailwind. absolute inset-0 bg-gradient-to-r from-cyan-400 to-sky-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl position: absolute; top: 0; left: 0; right: 0; bottom: 0; linear-gradient(45deg, #fff, #000); box-shadow: 1px 1px 1px 0 rgb(0 0 0 / 0.05); transform: skewY(60deg); border-radius: 4px; transform: rotate(60deg); Consider these two snippets, after time of not looking at your css code, do you think 10+ rules on one line is maintainable? Not even close, ask yourself to change a css property - you would have to iteratively go from left to right until you find it, whereas looking from top down you can immediately catch the css rule you want to find. Succinct doesn't mean maintainable, and sometimes verbosity does. Tailwindcss isn't even close to being the future.
- aidos 4y ago
  You can do both of those things with Tailwind. Put the css only components at the bottom and use them in your main component if you want. Break the classes over multiple lines if you want. The difference between your 2 examples is that TW allowed you to handle media queries seamlessly but you couldn't do that in your styles example.
  - teen 4y ago
    Each styled-component also increases your css payload size linearly
  - deleted 4y ago
    [deleted]
  - shroompasta 4y ago
    i'm not sure what you mean by 'seamlessly' but a media query in styled components would just be @media (max-width: 700px) { css here } it's not that much harder. Also, the lack of address of real problems of tailwindcss of OPs comment in terms of mantainability is something you consider. reading iteratively from left to right especially if it has 10+ css rules, in terms of legibility, is not really all too great. I would absolutely hate to adjust something in tailwindcss, after not seeing the codebase in a month's time. Whereas regular css properties, i can easily find by eye.
shroompasta 4y ago
Yeah, I've tried tailwindcss, but having many rules of css on one line isn't even at all legible, nor do I want to use horizontal scrolling.
- pcthrowaway 4y ago
  This, and the tendency towards repetition, is my biggest issue with tailwind (and I still love it). It tends to make the code pretty ugly. There are ways to improve things somewhat (moving "bundles" of classNames into properties of a local or global cssClasses object and adding those to your elements' className), but you lose the intellisense when editing classes and it often ends up feeling like the extra friction isn't worth it. Having the styles right there seems to be a key part of what makes using tailwind so productive. We have enough decisions to make regarding design as it is, adding organization, naming, selection, and attempting to maintain a sensible hierarchy into the mix leads to a fog of decision fatigue that I didn't realize existed until I tried Tailwind and it lifted.
- telman17 4y ago
  There are formatters for your text editor that can help alleviate some of this.
deleted 4y ago
[deleted]
mooktakim 4y ago
It's really for the React generation. People used to embedding the code, markup and style all in one file. I've tried multiple times to use it, but I always end up using something like bootstrap. Funnily enough, I paid for tailwindui and take the styles and reproduce them in bootstrap css. Bootstrap community seems to have given up. They only want to sell templates. The default is ugly. Sometimes I think about going back to bootstrap 2.
- mattwad 4y ago
  If you're using React, check out Material UI. I was a big fan of Bootstrap, but I didn't like that there was still so much for me to build. MUI comes with components for things like user avatars out of the box. But it doesn't get in the way at all either, it's very customizable at the theme and the component level (I'm using it with styled components, and I love not having to come up with class names for everything). I've also tried Antd and it's impossible to customize.
deckard1 4y ago
> it's the future of writing CSS. Tailwind didn't invent utility classes. We've done this since the '90s. > significantly easier to maintain Disagree totally. Utility classes are good for rapid prototyping. But they clutter your code, mix semantics with presentation, and are a pain in the ass when it comes to code reuse. The cascade part of CSS is, believe it or not, actually useful for code reuse. Need to change a font deep in some nested component? Not a problem with CSS. Tailwind, you're fucked. You'll need to modify each component layer to pass down a class prop. Or do some ugly context hack.
- krainboltgreene 4y ago
  Okay so one huge difference between now and the late 90's is that we have several very popular ways to create "components" of HTML/JS/CSS. From react to liveview it's very popular. This is important because it's much easier to maintain.
  - junon 4y ago
    We did back then too. In fact we had SSR. It often took the form of CGI, like PHP - which, hate the language all you want, it has a very sane and scalable model.
    - jozzy-james 4y ago
      and bi-directional data flow was done in the form on long polling. this sounds very much like a get off my lawn argument rather than anything rooted in reality of the now.
      - lenkite 4y ago
        Long polling has turned into SSE. And rocks with HTTP/2. What was once old is new and in vogue again!
        jozzy-james 4y ago
abdellah123 4y ago
The future? Have you tried imba.io?
jorgesborges 4y ago
> easier to maintain I’m a huge fan but maintaining tailwind projects is actually a huge pain in the ass. I could maybe improve it by factoring out the classes from my html into a separate sheet using @apply when I’m “done” a project, but I don’t, and it defeats the convenience value anyway. The markup is so overwhelming when there’s anything remotely complex. And sometimes components are almost identical but with slight variations. I miss seeing an element with a simple .classname to let me know what’s going on. Admittedly this is due to a lack of foresight on my part but moving forward I’m either re-thinking tailwind or ditching it. I even have a pre-release 0.6v or something running on a production site I need to maintain. Which is stupid and my fault but demonstrates 1) that I’m a huge fan and have been using it forever and 2) it can suck maintaining if not thought out properly. Don’t forget now you need to configure webpack for node sass and purge css and blah blah blah. Tailwind is great for building something you never need to touch again.
- inopinatus 4y ago
  > I could maybe improve it by factoring out the classes from my html I do it by refactoring my HTML. By the way, you don’t need webpack to use Tailwind. It works great with lightweight asset handling too. In particular, there’s a stand-alone compiler.
  - jorgesborges 4y ago
    Cool, I'll check it out thank you!
diob 4y ago
I honestly think I'd quit my job if I had to go back to any other system. Not sure what could be next for maintaining / styling, but this is the best I've ever had it.
lenkite 4y ago
" dramatically reduces your CSS build size" Isn't this at the cost of dramatically increasing HTML size ? I have seen tailwind littered HTML increase by 2x-3x the page size with all that extra-ordinary repetition. PS: I agree it makes CSS coding quite faster due to less typing involved when designing something thanks to succinct atomic CSS classes. I am not sure less typing is better though, especially for maintainability and performance.
mesadb 4y ago
I think windicss might be better than tailwind. I'm using tailwind but I think the structure on windi is pretty good

by 65 4y ago

anthonylee 4y ago

I tried it out last year. Absolutely love it.

deleted 4y ago

[deleted]

mritchie712 4y ago

for haters, color management is a good starting example of why it's good. https://tailwindcss.com/docs/customizing-colors https://tailwindcss.com/docs/customizing-colors

lolinder 4y ago
Color management is easy in SCSS, too, though. I just have a _colors.scss file and enforce that no color is ever used that isn't in that file. If I'm working with a designer rather than designing my own UIs, that they have a default color palette isn't helpful, so what do I gain from Tailwind? EDIT: Reading some other comments, I wonder if part of the reason I don't see the utility is that I use Vue, not React. It sounds like Tailwind solves a lot of the same problems that Vue+SCSS does.
- bpicolo 4y ago
  One good part is the generated classes for every color. Background colors, font colors, border colors... everything in the color palette is usable as `bg-blue-500`, `text-blue-500`, `border-blue-500` etc. Could be reproduced in css for sure, but it's a great set of defaults that you can utilize cross-repo. Standardization is a powerful concept.
- ramesh31 4y ago
  The killer for SASS nowadays is CI. You're either using the (ancient, slow) Ruby implementation of SASS, or node-sass which requires a native binary build and causes headaches across environments. Furthermore, with Post-CSS, the feature set of SASS has been completely subsumed by the latest CSS standard. There's really no good reason to use it anymore.
  - toastal 4y ago
    It's Sass, not SASS. The native libsass is much faster. The headaches come from people trying to distribute binaries and libraries through NPM.
    - jbenner-radham 4y ago
      If we're being pedantic technically it's npm and not NPM ;)
      - toastal 4y ago
        Oof. I did not know this one. > npm (originally short for Node Package Manager) Acronyms can make sense to switch case, but initialisms... en-pee-em... I guess it happens. I originally was introduced it as Node Package Manager, but I'm gonna make an effort to correct this now.
  - no_wizard 4y ago
    You should really be using the dart-sass[0] build (just `sass` on npm). None of the headaches of native binaries or using ruby, its pure JavaScript (its a dart codebase transpiled to JS). It is very fast. [0]: https://sass-lang.com/documentation/#older-versions https://sass-lang.com/documentation/#older-versions
    - ramesh31 4y ago
      >[0]: https://sass-lang.com/documentation/#older-versions https://sass-lang.com/documentation/#older-versions This is awesome, really glad to see things have progressed from the node-sass days. Might have to give it another look.
- andrei_says_ 4y ago
  Including Tailwind’s list of colors in an scss codebase is trivial. Same for spacing and font sizes if you need these standardized and haven’t done it already. Which we always did way before tailwind was invented.

swyx 4y ago

agree. i'm a cynic turned convert as well. even told a friend it caused ugly unreadable classname soup and that zero-runtime CSS-in-JS solutions (like linaria, but even css modules) could do more with a lower learning curve (because you Actually Write CSS instead of tailwind shortcuts). then i tried learning it and it turns out that Tailwind's constraints both help my design and help with the learning curve wrote up full thoughts in an old post https://www.swyx.io/why-tailwind https://www.swyx.io/why-tailwind

bpicolo 4y ago

Same. People touted semantic CSS as the future for ages, and that's what I was taught in my first role out of college. Parts of that made sense (e.g. de-noising html), so I was against tailwind, but it's has quickly become one of my favorite tools. I am pretty conservative in terms of "use boring tech", because I see so much reinventing of the wheel and making the same mistakes, but Tailwind is not in that camp! I was never happy with any of the CSS in JS solutions in React land – all of them felt tedious or boilerplate-heavy compared to Vue's CSS model, which is excellent. Writing css and getting component scoping for free are great. But with tailwind I've minimized usage of Vue CSS too. I pull it in occasionally when I need specific overrides of the tailwind component lib I'm using, but other than that I don't even need to touch css.

gedy 4y ago

I really like utility classes and think Tailwind is really smart for many usecases, but the drawback with Tailwind is even if you componentize, your code is sprinkled with very specific visual classes like for shadows, border radius, etc. When companies want to refresh their look and feel, it's really annoying to change everything to remove now unwanted shadows, etc. In spite of it's age, I've found Bootstrap is better for this as it uses predefined component classes that can be restyled without rewriting the app or components (but also has some handy utility classes). I know you can define your own component classes in TW, but then you've just recreated Bootstrap/Bulma/etc, but with no 3rd party components available. (Tailwind UI is just some limited copy paste code snippets last I looked.)

bpicolo 4y ago
> but with no 3rd party components available There are a bunch of great 3rd party components available in tailwind now. https://daisyui.com/ https://daisyui.com/ is one I've been using. They're usually a tad bit lower level than typical framework component libs, but the flexibility is great. A great thing about that is they're not React-specific, Vue-specific, etc. You can use them in everything from raw html to your JS library flavor of choice.
- gedy 4y ago
  DaisyUI is a nice approach and hope it succeeds. We were looking to use that until we realized it's almost identical to Bootstrap, and that we were just using Tailwind as an elaborate way to make a custom Bootstrap theme at build time. Company decided to go with BS5 instead.
likortera 4y ago
Have you ever had to change the company's look and feel with anything else than tailwind? I had to do it with a BEM codebase, and I also had to do it with tailwind. The tailwind situation was by far the easiest one. And it was because I was not afraid to remove things that could break unrelated parts of the application. Not allowing developer to hand write CSS is a great restriction for a good bunch of developers. The messes out there are unbelievable.

DecayingOrganic 4y ago

As a side note, you can configure prettier for automatic class sorting for tailwind! It makes a huge difference in terms of code readability and maintenance. https://tailwindcss.com/blog/automatic-class-sorting-with-prettier https://tailwindcss.com/blog/automatic-class-sorting-with-pr...

phreack 4y ago
Thank you so much for sharing that! I had no idea how much I even needed this, my classes tend to get incredibly messy and it'd always bothered me.

Existenceblinks 4y ago

The truth about web design is there's only a few things that repeat in semantics, that's why lowest level token works. At the end of the day, web design is mostly color, space, font, barely things that are higher. If you have some buttons and form inputs pattern, your design is almost done (excluding non-ui state/behavior).

ramesh31 4y ago

>I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. Same. I always said they'd pry my stylesheets from my cold dead hands. But then I tried it, and I'll never go back. I feel like it's time to let go of those last vestiges of the old "web development" paradigm, and start treating the browser as what it is; a universal VM for application development.

Vinnl 4y ago

If you're using a component-based architecture (e.g. when using React, Vue or Angular), otherwise it can get pretty annoying. But if you do, it's pretty great; you don't really need the abstraction of reusable classes, when you already have reusable components, and getting rid of useless abstractions makes me a happy programmer.

debrice 4y ago
I would add that, even for regular HTML you can write CSS using @apply and still leverage the nice structure tailwind provides while creating your component CSS classes.
- rawfan 4y ago
  You can also just use regular webcomponents and make re-usable components regardless of frontend or backend usage.
nojs 4y ago
I am using it with traditional Django + Jinja2 for templating now which is working well. With {% macro %} you basically get fully reusable “components” on the backend so there’s limited copy pasting of tailwind classes.
aaronbrethorst 4y ago
This isn't meant as a contradiction of your point, but there are plenty of ways to use component-based architectures with server-side rendered apps, too, like GitHub's ViewComponent gem for Rails. https://viewcomponent.org https://viewcomponent.org Also, I'd go so far as to say that if you're not using a component based architecture for your web app's view layer, you're creating a ton of extra work for yourself.
- cgarvis 4y ago
  +1 Using it in a Elixir/Liveview app. Using phx_component_helper has made making those components really easy. https://phx-component-helpers-demo.onrender.com https://phx-component-helpers-demo.onrender.com

hanifc 4y ago

I've seen this exact comment so many times over the past year or two that I think it's finally time that I try it out.

srik 4y ago
I was where you were and am glad I got over my reticence because it's genuinely feels like a pleasure to use now. Another good aspect is that while you're using tailwind's custom identifiers, you still have to write real CSS and so are quite likely to end up refining your own CSS skillset in the process.

fc373745 4y ago

I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will inevitably break your prettier printWidth rule is, by far, the most annoying aspect of Tailwind. absolute inset-0 bg-gradient-to-r from-cyan-400 to-sky-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl position: absolute; top: 0; left: 0; right: 0; bottom: 0; linear-gradient(45deg, #fff, #000); box-shadow: 1px 1px 1px 0 rgb(0 0 0 / 0.05); transform: skewY(60deg); border-radius: 4px; transform: rotate(60deg); Consider these two snippets, after time of not looking at your css code, do you think 10+ rules on one line is maintainable? Not even close, ask yourself to change a css property - you would have to iteratively go from left to right until you find it, whereas looking from top down you can immediately catch the css rule you want to find. Succinct doesn't mean maintainable, and sometimes verbosity does. Tailwindcss isn't even close to being the future.

aidos 4y ago
You can do both of those things with Tailwind. Put the css only components at the bottom and use them in your main component if you want. Break the classes over multiple lines if you want. The difference between your 2 examples is that TW allowed you to handle media queries seamlessly but you couldn't do that in your styles example.
- teen 4y ago
  Each styled-component also increases your css payload size linearly
- deleted 4y ago
  [deleted]
- shroompasta 4y ago
  i'm not sure what you mean by 'seamlessly' but a media query in styled components would just be @media (max-width: 700px) { css here } it's not that much harder. Also, the lack of address of real problems of tailwindcss of OPs comment in terms of mantainability is something you consider. reading iteratively from left to right especially if it has 10+ css rules, in terms of legibility, is not really all too great. I would absolutely hate to adjust something in tailwindcss, after not seeing the codebase in a month's time. Whereas regular css properties, i can easily find by eye.

shroompasta 4y ago

Yeah, I've tried tailwindcss, but having many rules of css on one line isn't even at all legible, nor do I want to use horizontal scrolling.

pcthrowaway 4y ago
This, and the tendency towards repetition, is my biggest issue with tailwind (and I still love it). It tends to make the code pretty ugly. There are ways to improve things somewhat (moving "bundles" of classNames into properties of a local or global cssClasses object and adding those to your elements' className), but you lose the intellisense when editing classes and it often ends up feeling like the extra friction isn't worth it. Having the styles right there seems to be a key part of what makes using tailwind so productive. We have enough decisions to make regarding design as it is, adding organization, naming, selection, and attempting to maintain a sensible hierarchy into the mix leads to a fog of decision fatigue that I didn't realize existed until I tried Tailwind and it lifted.
telman17 4y ago
There are formatters for your text editor that can help alleviate some of this.

deleted 4y ago

[deleted]

mooktakim 4y ago

It's really for the React generation. People used to embedding the code, markup and style all in one file. I've tried multiple times to use it, but I always end up using something like bootstrap. Funnily enough, I paid for tailwindui and take the styles and reproduce them in bootstrap css. Bootstrap community seems to have given up. They only want to sell templates. The default is ugly. Sometimes I think about going back to bootstrap 2.

mattwad 4y ago
If you're using React, check out Material UI. I was a big fan of Bootstrap, but I didn't like that there was still so much for me to build. MUI comes with components for things like user avatars out of the box. But it doesn't get in the way at all either, it's very customizable at the theme and the component level (I'm using it with styled components, and I love not having to come up with class names for everything). I've also tried Antd and it's impossible to customize.

deckard1 4y ago

> it's the future of writing CSS. Tailwind didn't invent utility classes. We've done this since the '90s. > significantly easier to maintain Disagree totally. Utility classes are good for rapid prototyping. But they clutter your code, mix semantics with presentation, and are a pain in the ass when it comes to code reuse. The cascade part of CSS is, believe it or not, actually useful for code reuse. Need to change a font deep in some nested component? Not a problem with CSS. Tailwind, you're fucked. You'll need to modify each component layer to pass down a class prop. Or do some ugly context hack.

krainboltgreene 4y ago
Okay so one huge difference between now and the late 90's is that we have several very popular ways to create "components" of HTML/JS/CSS. From react to liveview it's very popular. This is important because it's much easier to maintain.
- junon 4y ago
  We did back then too. In fact we had SSR. It often took the form of CGI, like PHP - which, hate the language all you want, it has a very sane and scalable model.
  - jozzy-james 4y ago
    and bi-directional data flow was done in the form on long polling. this sounds very much like a get off my lawn argument rather than anything rooted in reality of the now.
    - lenkite 4y ago
      Long polling has turned into SSE. And rocks with HTTP/2. What was once old is new and in vogue again!
      - jozzy-james 4y ago

abdellah123 4y ago

The future? Have you tried imba.io?

jorgesborges 4y ago

> easier to maintain I’m a huge fan but maintaining tailwind projects is actually a huge pain in the ass. I could maybe improve it by factoring out the classes from my html into a separate sheet using @apply when I’m “done” a project, but I don’t, and it defeats the convenience value anyway. The markup is so overwhelming when there’s anything remotely complex. And sometimes components are almost identical but with slight variations. I miss seeing an element with a simple .classname to let me know what’s going on. Admittedly this is due to a lack of foresight on my part but moving forward I’m either re-thinking tailwind or ditching it. I even have a pre-release 0.6v or something running on a production site I need to maintain. Which is stupid and my fault but demonstrates 1) that I’m a huge fan and have been using it forever and 2) it can suck maintaining if not thought out properly. Don’t forget now you need to configure webpack for node sass and purge css and blah blah blah. Tailwind is great for building something you never need to touch again.

inopinatus 4y ago
> I could maybe improve it by factoring out the classes from my html I do it by refactoring my HTML. By the way, you don’t need webpack to use Tailwind. It works great with lightweight asset handling too. In particular, there’s a stand-alone compiler.
- jorgesborges 4y ago
  Cool, I'll check it out thank you!

diob 4y ago

I honestly think I'd quit my job if I had to go back to any other system. Not sure what could be next for maintaining / styling, but this is the best I've ever had it.

lenkite 4y ago

" dramatically reduces your CSS build size" Isn't this at the cost of dramatically increasing HTML size ? I have seen tailwind littered HTML increase by 2x-3x the page size with all that extra-ordinary repetition. PS: I agree it makes CSS coding quite faster due to less typing involved when designing something thanks to succinct atomic CSS classes. I am not sure less typing is better though, especially for maintainability and performance.

mesadb 4y ago

I think windicss might be better than tailwind. I'm using tailwind but I think the structure on windi is pretty good