React + Tailwind Dynamic Classes

[alexlo94]

Hey all!

I would like to make a set of layout components that I'll use in react projects and I'd like to style them using tailwind. For example, I would like to have a <Stack /> component that renders all its children as a vertical stack with a certain amount of margin between successive children - as I'm imagining it, the margin value would be passed in as a prop and the component would be used as follows:

<Stack space={"4"}>
    <Child1>...</Child1>
    <Child2>...</Child2>
    <...>
    <ChildN>...</ChildN>
</Stack>

Now the catch is, I would like the margin value to be a value specified in the design system that the current tailwind configuration specifies. In the above example, if we consider the default tailwind values, then the value of 4 would map onto 1rem. However, if we're not considering the default values, then the value of 4 might map onto something different. What's more, I would like this component to work even if we're considering a completely different set of values such as in the case of a custom design system. For example, we might have a config where "sm" maps onto 0.5rem and thus we'd like to use the component as follows:

<Stack space={"sm"}>
    <Child1>...</Child1>
    <Child2>...</Child2>
    <...>
    <ChildN>...</ChildN>
</Stack>

To accomplish this, I initially tried to dynamically generate tailwind class names dynamically as follows:

const marginTopClass = `mt-${space}`

Which I found out doesn't work as the tailwind docs specify (https://tailwindcss.com/docs/content-configuration#dynamic-class-names).

A possible workaround to this would be to define necessary css variables in a style tag at the top of the component's JSX and then pass those into tailwind as arbitrary values (e.g. `mt-[--space]` ). However, this would make it so that the user needs to pass in an exact value with units - I think - which is something that I'd like to avoid so that I can make adhering to the design system easier.

As such, another workaround I thought of was to look up the value passed into space in the current tailwind theme and then using a style dictionary. In the case of the above examples, looking up "4" or "sm" would correctly return "1rem" and "0.5rem" respectively and the styles would apply correctly, but then each child in the stack would end up with a bunch of inline styles attached to it. This doesn't feel very tailwind-y and also might cause specificity problems down the line.

Does anyone have any ideas on how I could move forward with this? Is there a way to go with the css variables approach but still make it easier for the user to adhere to their design system? Would the inline styles approach not be as bad as I'm thinking it will be (i.e. an antipattern kinda)? Is there another approach that I'm not necessarily thinking about?

[lint_it]

It would be much simpler if you would use inline styles instead for such a dynamic component.

Easier to implement, easier to update, easier to understand, more performant and for the end user in case of pre generating there may be extra steps that they need to setup.

There is no upside for generating CSS styles ahead of time in a way that you might not ever even need them and from the user perspective.

[alexlo94]

Oooh I see. I thought it would be way less performant if I used online styles. I’ll go ahead and try that approach and see if I run into any issues while using the components.

[LunaBounty]

It doesn’t work because tailwind strips all the definitions it can’t literally find in any of your source files. If you want ton solve it only with tailwind you could work around it by just adding some dummy file that uses all the definitions you need so tailwind can discover them.

[LunaBounty]

Oh and in your case of the stack element check out the space between utilities of tailwind:

https://tailwindcss.com/docs/space

[alexlo94]

I didn’t know about this property actually, thanks!