Tailwind - Styles with same name but different value depending on the route
I am working on a monorepo. Each package in the monorepo counts has a route (e.g. the folder /page is the actual route that the users end up visiting with their browser)
The thing is that a lot of components are shared and just change small things about the style, for example all components in
/page
with the style rounded
should have a border-radius of 2px.
But I would like all rounded
classes in /page2
to have, for example, a border-radius of 4px.
Would that be possible?1 Reply
use css variables
set in the tailwind config rounded to be something like
border-radius: var(--rounded-border-radius)
and set --rounded-border-radius
for each page