tailwind will go through your files and find classes using a RE.
So you can’t interpolate tailwind classes.
<div class={"w-#{@foo}"}> <!-- DOES NOT WORK -->
You have to
<div class={[
@foo==1 && "w-1",
@foo==2 && "w-2",
...
@foo==96 && "w-96"]}>
(or use @style
)
How about a heex macro tailwind
(and an accompanying attr type which gives all possible values)
attr :foo, :tailwind, range: [1, 2, 3, 4, 10, 24, 96]
...
<div class={[tailwind("w-#{@foo}"), "other classes ..."]}>
or maybe sth like this using a sigil
<div class={[~t"w-#{@foo}", "other classes ..."]}>
all tailwind macros could compile to an extra file (which is listed in tailwind.config to get parsed by the tailwind preprocessor)
# tailwind.lst
w-1, w-2, w-3, w-4, w-10, w-24, w-96