Tailwind classes cannot be dynamic
#Vue Computed Property with Tailwind does not apply CSS
crystal swallow
Tailwind classes cannot be dynamic
omg! What should I do then?
do you have any solution? I can't put the width in inline styles because in mobile I need 100% width :/
night frost
Is there any way you could make the full class name appear anywhere in your code?
crystal swallow
passing for example w-510 as a prop directly?
and then just print the prop in the css classes?
night frost
Yeah, that would work!
The TL;DR is really, as long as the full class appears somewhere in your code, Tailwind will pick it up
crystal swallow
TL;DR?
night frost
too long didn't read, the summary of the page I linked 😄
crystal swallow
Many thanks Erika! Always helping everyone 🙂
night frost
Sorry, we might have misunderstood each others
Tailwind looks precisely for the string w-510 in your code, so it needs to appear completely somewhere in your code
With the code you posted, you're still building w-510 dynamically
crystal swallow
but i have logged the prop.width and props.rWidth and it prints "w-510"
sorry for not understanding 😦
do you mean I have to hard code "w-510" in the "twoHalfBlocks" component, for example?
this variable comes from a CMS, i need to work with it 😦
night frost
Yeah, it needs to show in full in the actual code, not in its result
Tailwind is reading your .vue directly, not its result 😄
crystal swallow
So there's no way to do it
just maybe style inline and make a tailwind mediaquery for mobile with an important in w-full class
:/
night frost
If you really can't, you could just do a comment with all the classes you need or maybe a safelist.txt file that you add to your Tailwind's config content array
night frost
Anywhere in your file should work really!
crystal swallow
Yeah but I'll never know what is coming from this width, it comes from a CMS
night frost
If it's fully dynamic, I'd use an inline style then, yeah
Tailwind isn't really made for fully dynamic styles
If you still want to apply the actual width with Tailwind, you might be able to use a CSS variable
crystal swallow
could you show me how to do it with a css var pls?
night frost
I'm not super familiar with Vue syntax, but basically you set the width in a CSS var using a style attribute like so: style="--somethingWidth: ${yourWidth}" and then in Tailwind you do class="w-[var(somethingWidth)]"
Here's an example using an image ^ of the same technique
crystal swallow
I see
I'll try 🙂
thanks Erika
That worked!
and it helps because i can add mediaqueries in front of the tailwind class 🙂
Sorry for being such a noob, it is really my second project using tailwind
and second one also using astro/vue
haha
many many thanks for your patience @night frost