7 ms·

Tailwind has made building components in React an absolute joy for me. I don't need to scroll up to find my css-in-js definitions, I don't need to change windo

Tailwind has made building components in React an absolute joy for me. I don't need to scroll up to find my css-in-js definitions, I don't need to change windows to find the CSS modules, it's all there, in one place.

deleted 4y ago
[deleted]
dstroot 4y ago
This. Tailwind and react work very well together. Components then become portable to other tailwind projects. The best part is tailwind then only ships the CSS you actually use to the browser. Much cleaner than older CSS approaches like bootstrap. Has made me much more productive overall.
serpix 4y ago
After trying out Tailwind in one pet project I have to say that for larger teams it should not be used. Looking at the code now I get the feeling that maintenance would be a big problem. A bigger project with multiple pages having full on Tailwind css classes peppered everywhere looks to be a nightmare. Does anyone have experience jumping into an existing larger project with legacy tailwind all over the place? Would you do it again?
- ryanbrunner 4y ago
  I think the key with Tailwind is that you need to aggressively componentize for it to be useful. If your pages are 90% made up of small components than it can be very reasonable and pleasant to work with. If you have a lot of pages that define their own HTML it can turn into a mess very quickly.
- 12tvende 4y ago
  I dont see a problem with big teams at all. You opne up the components HTML and see the styling right there, no doubts in your mind where to edit the styling (no stylesheets to find etc.). Of course, this requires the team to have disciplin and make proper components so their not copy pasting tailwind classes 100 times
- Vinnl 4y ago
  I have only used Tailwind on personal projects, but I can't imagine it'd be harder than "regular" CSS, which is generally somewhat append-only anyway (you need a lot of team discipline to tame that somewhat). In fact, I'd expect it to be more maintainable, exactly because it removes the indirection of CSS classes. They're an abstraction that don't make much sense if you're already using components, and the very point of that abstraction -being able to reuse styles- is the very reason it quickly becomes append-only. With Tailwind, you can safely delete styles, knowing it won't affect styles elsewhere in your project.
  - robby_w_g 4y ago
    This succinctly nails what I love about Tailwind. It gets rid of the cognitive load of reviewing a css change and having to think through how the change will ripple throughout the site.
  - eurasiantiger 4y ago
    If only there was a DOM-aware CSS linter.
- alayek 4y ago
  I've had some experience migrating large UI projects at work to use a design system based on Tailwind. Haven't faced any issue with Tailwind at all, even while integrating in existing projects. Tailwind is a different way of writing CSS, with some guard-rails coming in from the design system consistency. Tailwind also provides sane defaults (rem over px, for instance). If someone's bad at writing or thinking in CSS, chances are, they'd be bad at Tailwind too. I've found Tailwind helps me focus on writing the CSS that matters. But just having Tailwind CSS in a project won't automagically fill one's gap in CSS knowledge. This isn't bootstrap, where one can use some col-* utilities and magically get a grid layout that just works across browsers. Tailwind is a bit lower level, and to achieve similar responsive layout, you still have to know how to do that with CSS grid, what the breakpoints are etc. Where Tailwind aids here, is by providing utility classes that help with original CSS grid intuition. For instance, `grid-cols-2 sm:grid-cols-4 md:grid-cols-6` would be hard to achieve by hand, writing vanilla CSS or styled-components. > A bigger project with multiple pages having full on Tailwind css classes peppered everywhere looks to be a nightmare. Ideally, you would be using a framework to help organize code better. Most likely React or Vue or something similar. In which case, you'd already have components. There are more than one way to achieve same look and feel, with CSS. Similarly, one can apply some discipline with using Tailwind's utility classes, when building anything. Two heuristics that have worked for me, are: - Never use margin if you can, use flex-box and grid with gaps instead. Placing a children node is parent's responsibility. - Write symmetric CSS. Prefer px over pl or pr, mx over ml or mr etc. Using margins make it hard to extract some React markup as a reusable component. Using symmetric CSS gives you automatic RTL compliance without using any of the CSS logical properties. Sure, there'd be times when a UI design cannot be implemented without breaking some of these. But in most cases I've encountered at work, building consistent UIs, have been easy for me and my team following these. Happy to go into details with code examples, if anyone's interested.
  - yurishimo 4y ago
    The symmetric bit is a good idea. I recently joined a team that maintains a multilingual LTR/RTL site so I'm learning some of these lessons the hard way. Padding > Margin can also be a good idea, even if working vertically. Padding cannot collapse which is usually what you want. Obv, ymmv.
lvl102 4y ago
Tailwind-Remix is my jam.
stack_framer 4y ago
I hope what you describe will eventually be true for me, but so far the purported benefit of not jumping around isn't being realized. After 5 weeks of using Tailwind every day, I still have to switch between my file and the Tailwind docs fairly often to look up whatever shortcut classes I need. So far I just miss CSS modules. Having my .tsx and .scss files both visible in split screen wasn't so bad.
- metadaemon 4y ago
  You’ll start realizing the benefit more when you use it on multiple projects. Tailwind will be consistent across your projects where you can’t always say the same for custom CSS.
- arecurrence 4y ago
  Do you use VSCode? Add the tailwind autocomplete plugin. It's intellisence for your tailwind config. Huge productivity boon when learning tailwind.
- antihero 4y ago
  Highly recommend the VSCode plugin where you get autocomplete and also mouse-over popups that tell you what classes translate to.
tobr 4y ago
But you still have to have a config file, right? And the Tailwind docs. And then keeping track of when you changed something in your config that means the docs don’t apply 100%.
- christophilus 4y ago
  I’ve touched my tailwind config file a handful of times in two years. It’s not a problem. Tailwind just gets out of my way and let’s me iterate quickly without worrying about global side effects that always happened in other projects. I love it.
toastal 4y ago
But CSS-in-JS was a mistake. Unless you want to start coupling your build tools even harder to get nonces on every compile, your CSP will require `unsafe-inline` which is bad for security. The simpler solution was to do CSS in CSS and keep your tools simple and minimal.
- JoeyJoJoJr 4y ago
  I had very few issues with just creating one scss file for every component module, ie ProfileCard.tsx and ProfileCard.scss, with sub components like ProfileCardimage being a nested selector in the scss tile. I don’t think you really need complicated design systems or atomic utilities anymore, just a bunch of variables for spacing, fonts, colors, etc. For any given component I knew exactly where to look for its styles, and it is all there. If the scss files becomes unwieldy as requirements change, it’s easy to just re-write it.
progx 4y ago
So you wrote super simple components, without any complexity? As soon as you need some customizable componentes, e.g. a Button, you have to write much code with Tailwind. Or what about a consistent usability and UI over your App, you must edit hundreds of files, if you change some basic output.
baxuz 4y ago
Or you can use inline css props with a runtime-free CSS-in-JS solutions like https://astroturfcss.github.io/astroturf/introduction/ https://astroturfcss.github.io/astroturf/introduction/ and write real CSS.
Aeolun 4y ago
You could get the same benefits by using the `style` property though. The good part of tailwind is the part where it's all compiled down so it's not unnecessarily verbose in the HTML served to the client.
- christophilus 4y ago
  Hover effects and breakpoints aren’t possible (as far as I know) with style attributes, though.

deleted 4y ago

[deleted]

dstroot 4y ago

This. Tailwind and react work very well together. Components then become portable to other tailwind projects. The best part is tailwind then only ships the CSS you actually use to the browser. Much cleaner than older CSS approaches like bootstrap. Has made me much more productive overall.

serpix 4y ago

After trying out Tailwind in one pet project I have to say that for larger teams it should not be used. Looking at the code now I get the feeling that maintenance would be a big problem. A bigger project with multiple pages having full on Tailwind css classes peppered everywhere looks to be a nightmare. Does anyone have experience jumping into an existing larger project with legacy tailwind all over the place? Would you do it again?

ryanbrunner 4y ago
I think the key with Tailwind is that you need to aggressively componentize for it to be useful. If your pages are 90% made up of small components than it can be very reasonable and pleasant to work with. If you have a lot of pages that define their own HTML it can turn into a mess very quickly.
12tvende 4y ago
I dont see a problem with big teams at all. You opne up the components HTML and see the styling right there, no doubts in your mind where to edit the styling (no stylesheets to find etc.). Of course, this requires the team to have disciplin and make proper components so their not copy pasting tailwind classes 100 times
Vinnl 4y ago
I have only used Tailwind on personal projects, but I can't imagine it'd be harder than "regular" CSS, which is generally somewhat append-only anyway (you need a lot of team discipline to tame that somewhat). In fact, I'd expect it to be more maintainable, exactly because it removes the indirection of CSS classes. They're an abstraction that don't make much sense if you're already using components, and the very point of that abstraction -being able to reuse styles- is the very reason it quickly becomes append-only. With Tailwind, you can safely delete styles, knowing it won't affect styles elsewhere in your project.
- robby_w_g 4y ago
  This succinctly nails what I love about Tailwind. It gets rid of the cognitive load of reviewing a css change and having to think through how the change will ripple throughout the site.
- eurasiantiger 4y ago
  If only there was a DOM-aware CSS linter.
alayek 4y ago
I've had some experience migrating large UI projects at work to use a design system based on Tailwind. Haven't faced any issue with Tailwind at all, even while integrating in existing projects. Tailwind is a different way of writing CSS, with some guard-rails coming in from the design system consistency. Tailwind also provides sane defaults (rem over px, for instance). If someone's bad at writing or thinking in CSS, chances are, they'd be bad at Tailwind too. I've found Tailwind helps me focus on writing the CSS that matters. But just having Tailwind CSS in a project won't automagically fill one's gap in CSS knowledge. This isn't bootstrap, where one can use some col-* utilities and magically get a grid layout that just works across browsers. Tailwind is a bit lower level, and to achieve similar responsive layout, you still have to know how to do that with CSS grid, what the breakpoints are etc. Where Tailwind aids here, is by providing utility classes that help with original CSS grid intuition. For instance, `grid-cols-2 sm:grid-cols-4 md:grid-cols-6` would be hard to achieve by hand, writing vanilla CSS or styled-components. > A bigger project with multiple pages having full on Tailwind css classes peppered everywhere looks to be a nightmare. Ideally, you would be using a framework to help organize code better. Most likely React or Vue or something similar. In which case, you'd already have components. There are more than one way to achieve same look and feel, with CSS. Similarly, one can apply some discipline with using Tailwind's utility classes, when building anything. Two heuristics that have worked for me, are: - Never use margin if you can, use flex-box and grid with gaps instead. Placing a children node is parent's responsibility. - Write symmetric CSS. Prefer px over pl or pr, mx over ml or mr etc. Using margins make it hard to extract some React markup as a reusable component. Using symmetric CSS gives you automatic RTL compliance without using any of the CSS logical properties. Sure, there'd be times when a UI design cannot be implemented without breaking some of these. But in most cases I've encountered at work, building consistent UIs, have been easy for me and my team following these. Happy to go into details with code examples, if anyone's interested.
- yurishimo 4y ago
  The symmetric bit is a good idea. I recently joined a team that maintains a multilingual LTR/RTL site so I'm learning some of these lessons the hard way. Padding > Margin can also be a good idea, even if working vertically. Padding cannot collapse which is usually what you want. Obv, ymmv.

lvl102 4y ago

Tailwind-Remix is my jam.

stack_framer 4y ago

I hope what you describe will eventually be true for me, but so far the purported benefit of not jumping around isn't being realized. After 5 weeks of using Tailwind every day, I still have to switch between my file and the Tailwind docs fairly often to look up whatever shortcut classes I need. So far I just miss CSS modules. Having my .tsx and .scss files both visible in split screen wasn't so bad.

metadaemon 4y ago
You’ll start realizing the benefit more when you use it on multiple projects. Tailwind will be consistent across your projects where you can’t always say the same for custom CSS.
arecurrence 4y ago
Do you use VSCode? Add the tailwind autocomplete plugin. It's intellisence for your tailwind config. Huge productivity boon when learning tailwind.
antihero 4y ago
Highly recommend the VSCode plugin where you get autocomplete and also mouse-over popups that tell you what classes translate to.

tobr 4y ago

But you still have to have a config file, right? And the Tailwind docs. And then keeping track of when you changed something in your config that means the docs don’t apply 100%.

christophilus 4y ago
I’ve touched my tailwind config file a handful of times in two years. It’s not a problem. Tailwind just gets out of my way and let’s me iterate quickly without worrying about global side effects that always happened in other projects. I love it.

toastal 4y ago

But CSS-in-JS was a mistake. Unless you want to start coupling your build tools even harder to get nonces on every compile, your CSP will require `unsafe-inline` which is bad for security. The simpler solution was to do CSS in CSS and keep your tools simple and minimal.

JoeyJoJoJr 4y ago
I had very few issues with just creating one scss file for every component module, ie ProfileCard.tsx and ProfileCard.scss, with sub components like ProfileCardimage being a nested selector in the scss tile. I don’t think you really need complicated design systems or atomic utilities anymore, just a bunch of variables for spacing, fonts, colors, etc. For any given component I knew exactly where to look for its styles, and it is all there. If the scss files becomes unwieldy as requirements change, it’s easy to just re-write it.

progx 4y ago

So you wrote super simple components, without any complexity? As soon as you need some customizable componentes, e.g. a Button, you have to write much code with Tailwind. Or what about a consistent usability and UI over your App, you must edit hundreds of files, if you change some basic output.

baxuz 4y ago

Or you can use inline css props with a runtime-free CSS-in-JS solutions like https://astroturfcss.github.io/astroturf/introduction/ https://astroturfcss.github.io/astroturf/introduction/ and write real CSS.

Aeolun 4y ago

You could get the same benefits by using the `style` property though. The good part of tailwind is the part where it's all compiled down so it's not unnecessarily verbose in the HTML served to the client.

christophilus 4y ago
Hover effects and breakpoints aren’t possible (as far as I know) with style attributes, though.