[mike1o1]

This comes up almost every time, but it's not "basically inline CSS". The best thing about Tailwind (and utility classes in general) is that it forces you to use consistent measurements across your app.

"Shoot, was this 13px padding or 14px padding on the other page?" Don't worry about it, just use "p-4, p-6, etc.". Thinking in these terms becomes really powerful.

Another great thing as that you just simply don't have to think about what to name things! I find that so liberating, to be honest, and I don't have to keep switching back and forth between my markup and my css. I don't have to worry about coming up with semantically descriptive names. I just use "text-gray-500". Was this .authorrole? Or was it .authoremail? Hmm, now I want to display an author nickname. Do I just repeat "authorname" class? I find it so freeing to basically not have to worry about this stuff at all.

[BigJono]

Who uses 13px for anything? I literally don't get this. Just remember to use a multiple of 4px? Or 0.25rem? Or whatever your designer is desinging to? This is solved with a 5 second conversation at the start of a project. Why the fuck do you need a library?

Legitimate question. How do you remember not to use "p-4.25" without npm installing tailwind-default-constraints or whatever the fuck?

[deergomoo]

> How do you remember not to use "p-4.25" without npm installing tailwind-default-constraints or whatever the fuck

Because "p-4.25" isn't an available class.

The whole point is that you have a fixed list of sensible options. You can extend it and customise it, but out of the box your design system is sensible and predictable. "p-8" is double "p-4"; "p-6" is half way between. It's like an enum case vs just using a raw integer.

Sure you can replicate it by creating some Sass variables and sticking to them but then you're on your way to re-implementing a utility-first framework.

[dmt0]

"Shoot, was this p-4 or p-6 on the other page?"

[idkwhoiam]

Checkmate!

[nailer]

so thinking of names like ‘author-nickname’ is difficult but learning an entire new syntax for css is easy?

[monkey_monkey]

Yes, "learning" the tailwind syntax was really quite easy.

In addition, most editors and IDE's now have plugins for autocompletion

And as an incentive to learning – once you're familiar with Tailwind's syntax, you get to use that learning on all your future Tailwind projects.

[nailer]

As a tailwind user I find it a hassle. There's quote of lot of CSS values, and having to remember small things like...

- 'grid-auto-flow: row' is 'grid-flow-row'

- 'grid-auto-flow: column' is not 'grid-flow-column' but rather 'grid-flow-col'

...is annoying.

[welder]

There's a better way to get consistent measurements without having to remember class names:

Use withStyles[1] and have a spacings namespace in your theme. Use the spacing in your component like spacing.button, which applies an Object containing the correct CSS padding, or spacing.padding.medium for the raw number.

[1] https://github.com/airbnb/react-with-styles