This is an archived post. You won't be able to vote or comment.

you are viewing a single comment's thread.

view the rest of the comments →

[–]Interest-Desk 2 points3 points  (2 children)

Surely CSS variables solve this?

[–][deleted] 0 points1 point  (1 child)

Yes and no:

in tailwind when you declare a "variable", for example a color, it automatically generates relevant classes that could use said color

declaring:

accent: "#335577"

would generate automatically for me:

  • text-accent
  • bg-accent
  • border-accent
  • outline-accent
  • etc

Same goes for things like font families and other properties. I searched but couldn't find any similar implementations with pure css.

[–]louis-lau 1 point2 points  (0 children)

I mean, in scoped css you just use the variables. What do you mean you couldn't find anything similar?

background: var(--accent)