3 ms·

In my experience, the real convenience of Tailwind over inline CSS is using all the variant classes (https://tailwindcss.com/docs/configuring-variants https://t

In my experience, the real convenience of Tailwind over inline CSS is using all the variant classes (https://tailwindcss.com/docs/configuring-variants https://tailwindcss.com/docs/configuring-variants) like hover:font-bold, md:w-full, group-hover:text-gray-500 etc to compose your styles. It's not possible to use pseudo classes like :hover in inline CSS. I've also found the tailwind.config.js very useful - you can load it up with all your custom colours and fonts. It's much easier to refer to text-primary (for your primary brand colour) than remembering a hex code and pasting it all over your markup :)

robin_reala 6y ago
CSS custom properties do that natively though.
- splatzone 6y ago
 That's true, but not for media queries or pseudo selectors. I suppose with CSS custom properties it would work something like this (please correct me if you know a terser way to use defined colours and weights): my text in primary color and extrabold I believe Tailwind's syntax is still far terser and more manageable: my text in primary color and extrabold When you have lots and lots of styling this quickly becomes important
 - robin_reala 6y ago
 OK, but my assumption was that this syntax was proposed as an incentive to use Tailwind, rather than trying to cram custom properties into style attributes. If I’m going to use custom properties it would be in a way that plays to CSS’s strengths.
andrei_says_ 6y ago
In my latest project I imported tailwind’s colors into a map and added a function to retrieve them. My scss looks like this: .card { color: c(gray-700); } Same for font sizes, font family definitions, screen sizes. I like having to remember less stuff, within my scss definitions.

robin_reala 6y ago

CSS custom properties do that natively though.

splatzone 6y ago
That's true, but not for media queries or pseudo selectors. I suppose with CSS custom properties it would work something like this (please correct me if you know a terser way to use defined colours and weights): my text in primary color and extrabold I believe Tailwind's syntax is still far terser and more manageable: my text in primary color and extrabold When you have lots and lots of styling this quickly becomes important
- robin_reala 6y ago
 OK, but my assumption was that this syntax was proposed as an incentive to use Tailwind, rather than trying to cram custom properties into style attributes. If I’m going to use custom properties it would be in a way that plays to CSS’s strengths.

andrei_says_ 6y ago

In my latest project I imported tailwind’s colors into a map and added a function to retrieve them. My scss looks like this: .card { color: c(gray-700); } Same for font sizes, font family definitions, screen sizes. I like having to remember less stuff, within my scss definitions.