4 ms·

I tried Tailwind (and a similar project Windi) on a few projects now and have some findings. Tailwind aggressively speeds up development time of components by

I tried Tailwind (and a similar project Windi) on a few projects now and have some findings. Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive. However, those were new projects. After completing them and needing to go back and modify or maintain them, the experience has been horrible. The resulting style declarations (as class names) are completely unreadable and unmaintainable. I've tried organizing them and splitting class names onto multiple lines, but it has only cluttered things. In my experience, Tailwind (and similar projects) produce styles that are effectively read only. They are superb when writing a new component and styling things from scratch, but maintenance is nonexistent. Because of this, I've now switched to using a CSS-in-JS solution to gain the benefits of in-context styling and still have the ability to write CSS declarations in a structured and maintainable way.

proxyon 5y ago
we use tailwind along with a component system. works great.
kumarvvr 5y ago
Tailwind works wonders in a component based system, but component styling ought to be very fine grained to ensure maintainability. I have created React components with TW, where the components are complex and large. However, breaking them down into tiny functional blocks, maintenance is easier.
docmars 5y ago
Why not use both? twin.macro is an excellent library that compiles Tailwind (and adds additional, useful variants) in systems like Styled Components and Emotion, so you gain the benefits of quick component creation, but the same pleasant maintenance of colocating utilities and styles/classes/objects composed of these utilities with your components. It's been an absolute dream in a decent-sized project so far, and even with some refactors. Regardless, it's not everyone's cup of tea, but depending on the UI framework of choice and the flavor of CSS you use, YMMV when it comes to dev experience. In Vue or Svelte, I wouldn't even use a CSS-in-JS solution because vanilla Tailwind to compose utilities into localized classes is a straightforward approach.
- slantyyz 5y ago
  If you're using Svelte, you don't really need Tailwind (but are obviously free to use it), especially if you're using your own components. Svelte's styling is already pretty atomic as it is. With Svelte, I use a small global reset, and a global file containing native CSS variables (which I reuse across multiple projects). Most of my Svelte CSS is component specific (and in most cases, no classes are even necessary) and they can be themed by simply referring to the CSS variables in my global variable file.
  - docmars 5y ago
    Nice! This reminds me of Pollen: https://www.pollen.style/ https://www.pollen.style/
    - slantyyz 5y ago
      Yes, it's very similar to that. I looked at Pollen a while back to see if there were any ideas I missed, but while Pollen has a different approach to variable naming, it was very similar to what I do.
tomduncalf 5y ago
I found exactly the same with my brief experience with Tailwind. Great fun to write, couldn't make head nor tail of it when I came back a few weeks later. Perhaps this changes if you use Tailwind day in day out though! I've stuck with styled-components for now, though I confess that I've started to wonder if the the verbosity of creating a (styled) component for everything, passing props, etc. is a bit excessive since trying Tailwind.
hbn 5y ago
We use Tailwind at my work and I personally find hopping into the template of a file I've never been in before super easy with it. With normal CSS I've usually got an HTML file and a CSS file side-by-side in my IDE, and I'm cross-referencing awkwardly-named classes in the template with a stylesheet. Sometimes these styles might be coming from a local, dedicated stylesheet, sometimes they might be coming from a global stylesheet that I might end up needing to grep through the project for in order to find where these styles are coming from. With Tailwind, I see a <div>, and I see all the styles on it, right within the template. I don't need to follow class names, or cross-reference between files, it's just there, where I'm already looking.
hajile 5y ago
I'm very surprised that people actually like tailwinds. I wrote HTML in a time when you used inline HTML attributes for styling. Changing one bit of the style meant visiting every single page to update everything (then making sure to test because you definitely forgot at least one place). CSS was an amazing idea for making just one place to put all your styling. You could now change one style and everything else would automatically update. Tailwinds feels like it's just a trip right back to the old inline styling right down to searching bunches of pages if you're making a styling update.
- kfajdsl 5y ago
  Tailwind is best used with components. If you're repeating yourself, it should probably be a component.
jarek83 5y ago
The only thing I appreciate Tailwind for is that I started to dig deeper just to have even stronger hesitation against it, so I believe I've saved a lot of hours in my projects just by not using it. But it also got me stumbling upon solutions based on the CSS global variables and that's what I think is the CSS next big thing. They allow to stay with CSS within CSS layer so no leakage to HTML or JS.

proxyon 5y ago

we use tailwind along with a component system. works great.

kumarvvr 5y ago

Tailwind works wonders in a component based system, but component styling ought to be very fine grained to ensure maintainability. I have created React components with TW, where the components are complex and large. However, breaking them down into tiny functional blocks, maintenance is easier.

docmars 5y ago

Why not use both? twin.macro is an excellent library that compiles Tailwind (and adds additional, useful variants) in systems like Styled Components and Emotion, so you gain the benefits of quick component creation, but the same pleasant maintenance of colocating utilities and styles/classes/objects composed of these utilities with your components. It's been an absolute dream in a decent-sized project so far, and even with some refactors. Regardless, it's not everyone's cup of tea, but depending on the UI framework of choice and the flavor of CSS you use, YMMV when it comes to dev experience. In Vue or Svelte, I wouldn't even use a CSS-in-JS solution because vanilla Tailwind to compose utilities into localized classes is a straightforward approach.

slantyyz 5y ago
If you're using Svelte, you don't really need Tailwind (but are obviously free to use it), especially if you're using your own components. Svelte's styling is already pretty atomic as it is. With Svelte, I use a small global reset, and a global file containing native CSS variables (which I reuse across multiple projects). Most of my Svelte CSS is component specific (and in most cases, no classes are even necessary) and they can be themed by simply referring to the CSS variables in my global variable file.
- docmars 5y ago
  Nice! This reminds me of Pollen: https://www.pollen.style/ https://www.pollen.style/
  - slantyyz 5y ago
    Yes, it's very similar to that. I looked at Pollen a while back to see if there were any ideas I missed, but while Pollen has a different approach to variable naming, it was very similar to what I do.

tomduncalf 5y ago

I found exactly the same with my brief experience with Tailwind. Great fun to write, couldn't make head nor tail of it when I came back a few weeks later. Perhaps this changes if you use Tailwind day in day out though! I've stuck with styled-components for now, though I confess that I've started to wonder if the the verbosity of creating a (styled) component for everything, passing props, etc. is a bit excessive since trying Tailwind.

hbn 5y ago

We use Tailwind at my work and I personally find hopping into the template of a file I've never been in before super easy with it. With normal CSS I've usually got an HTML file and a CSS file side-by-side in my IDE, and I'm cross-referencing awkwardly-named classes in the template with a stylesheet. Sometimes these styles might be coming from a local, dedicated stylesheet, sometimes they might be coming from a global stylesheet that I might end up needing to grep through the project for in order to find where these styles are coming from. With Tailwind, I see a <div>, and I see all the styles on it, right within the template. I don't need to follow class names, or cross-reference between files, it's just there, where I'm already looking.

hajile 5y ago

I'm very surprised that people actually like tailwinds. I wrote HTML in a time when you used inline HTML attributes for styling. Changing one bit of the style meant visiting every single page to update everything (then making sure to test because you definitely forgot at least one place). CSS was an amazing idea for making just one place to put all your styling. You could now change one style and everything else would automatically update. Tailwinds feels like it's just a trip right back to the old inline styling right down to searching bunches of pages if you're making a styling update.

kfajdsl 5y ago
Tailwind is best used with components. If you're repeating yourself, it should probably be a component.

jarek83 5y ago

The only thing I appreciate Tailwind for is that I started to dig deeper just to have even stronger hesitation against it, so I believe I've saved a lot of hours in my projects just by not using it. But it also got me stumbling upon solutions based on the CSS global variables and that's what I think is the CSS next big thing. They allow to stay with CSS within CSS layer so no leakage to HTML or JS.