Tailwind `size` classes not being applied correctly.

[jcramb]

Hi,

Firstly awesome package - really appreciate your work on this!

I've been using this recently and ran into issues with a number of components not showing correctly in my solid-start app. I narrowed the issue down to components which use the tailwind size class. Not sure if it's something to do with my setup and hoping you might be able to shed some light on it for me - but it seems like the tailwind class isn't being applied despite being present.

<RadioGroupPrimitive.ItemControl class="aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
  <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center ">
    <TbCircle class="size-2.5 fill-current text-current" />
  </RadioGroupPrimitive.ItemIndicator>
</RadioGroupPrimitive.ItemControl>

If I use the original component code from above it looks like this,

But if I modify the classes with explicit width and height classes,

<RadioGroupPrimitive.ItemControl class="aspect-square size-4 w-4 h-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
  <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center ">
    <TbCircle class="size-2.5 w-2.5 h-2.5 fill-current text-current" />
  </RadioGroupPrimitive.ItemIndicator>
</RadioGroupPrimitive.ItemControl>

Then it renders correctly as intended,

Have you encountered this before or have any idea how to fix it?

Here's my packages.json dependencies if that's helpful.

  "dependencies": {
    "@kobalte/core": "^0.12.3",
    "@libsql/client": "^0.5.3",
    "@solid-primitives/scheduled": "^1.4.3",
    "@solidjs/router": "^0.13.0",
    "@solidjs/start": "^0.6.1",
    "@tanstack/solid-table": "^8.13.2",
    "autoprefixer": "^10.4.14",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "drizzle-orm": "^0.30.1",
    "postcss": "^8.4.26",
    "solid-icons": "^1.1.0",
    "solid-js": "^1.8.15",
    "tailwind-merge": "^2.2.1",
    "tailwindcss": "^3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "vinxi": "^0.3.10"
  },

[sek-consulting]

size-* was added in tailwind 3.4 so if you update it you're good to go :) https://tailwindcss.com/blog/tailwindcss-v3-4#new-size-utilities

[jcramb]

I figured it would be something simple like this! Thanks for your help mate :)