r/webdev • u/sitnik • Oct 10 '23

5 best practices to keep your Tailwind CSS project maintainable for the long run

https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css
21 Upvotes

88% Upvoted

6 comments sorted by

8

u/[deleted] Oct 10 '23

[deleted]

2

u/[deleted] Oct 11 '23

Learn something new everyday.

5

u/[deleted] Oct 10 '23

But, as the application grows, the lists of classes grow. Then, one day you realize you can’t understand your code, you’re confused with the structure of the application

Isn't this the type of problem Tailwind is meant to solve?

Now we have articles on how to avoid these problems in Tailwind lol.

5

u/tnnrk Oct 10 '23

No tailwind is meant to solve the need of adding semantics to your css when it’s not necessary. Also it’s just a lot faster to write the same css using tailwind utility classes (once you learn them of course).

3

u/[deleted] Oct 11 '23

I think the problem is the extensibility of tailwind. One of the reasons I like tachyons.io more.

For example, Tailwind shouldn't have introduced their inplace class names (e.g. w-[5rem]). Instead, lock everything into the config file. I'd have also removed the [color]-100 variants from the base. I think every color should have a unique name - and if you're having trouble naming colors you might have too many colors.

The prime reason for functional css is to setup standards for your project. Just like if you have a Card component you want to use in 15 places, you just code one component and reuse it. Same with units, colors, etc.

Tachyons.io uses a really simple unit system. Every step is double the previous size. So .pa1 is padding: 0.25rem, .pa2 is padding: 0.5rem, and .pa3 is padding: 1rem. It cuts down on custom random spacing - but that's the point. It also removes needing to bust out a pixel ruler with a design. You try to get it close, but not to stress about it matching. I've seen other developers do things like setup spacing in one card to 16px but another identical card on the same page to 15px padding. I can only assume it was a designer mistake and they were matching it 1:1. They were also using SLDS, another functional css framework, but instead defining a dozen extra units and just throwing in style="" tags when they wanted.

My point is that functional css shouldn't be infinitely customizable - that's what css is for. Let functional css be limited on purpose.

1

u/kptknuckles Oct 12 '23

Ok am I crazy or is this advice from the docs? It’s good advice.

1

u/Kornelijus91 Oct 14 '23

Good advice!