#Stumped on why this isn't working—Tailwind classes from component to getting styles, maybe?

9 messages · Page 1 of 1 (latest)

bright dust
#

So, I made this dumb little component to add a badge for the current Tailwind screen size:

---
const screens = ['sm', 'md', 'lg', 'xl']
---

{screens.map((screen, index) => (
  <span class={`${index > 0 ? 'hidden' : ''} ${screen}:inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 ${index < screens.length - 1 ? screens[index + 1] + ':hidden' : ''}`}>{screen}</span>
))}

When I import the component into my layout it "doesn't work": Specifically, while the span for size 'md' has an 'md:inline-flex' class added to it when the browser hits that viewport it's display property doesn't change, and there seems to be no styles attached to it for that class. The same is true for the other sizes.

But, if I just copy the generated html from the component into my layout—it works exactly as I intended. So I must have some misunderstanding about how the Tailwind styles are applied to components? Or I'm missing some other essential point? Any idea?

sleek talon
#

Dynamic classes are not supported by Tailwind

#

All classes need to appear in full form in the code

bright dust
#

Well that would explain it

#

thats a shame

#

Oh, I can still use logic in the class attribute, but have to output the full class name? <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

small vessel
#

(Sorry for the steal, but was reading, Erika 🙂)