Icon size cannot be change with TailwindCSS v4 class

[misbahansori]

When using the Icon component from @nuxt/icon, the icon size cannot be changed using TailwindCSS v4 classes.

Example :

<Icon name="mdi:home" class="size-10" />
<Icon name="mdi:home" class="w-10 h-10" />

These icons should be 40x40px, but instead, they are using the default size of the icon.

Expected behavior :
The icon should be 40x40px.

Package version :

• "@nuxt/icon": "1.10.3",
• "@tailwindcss/vite": "^4.0.0",
• "tailwindcss": "^4.0.0",

Minimal Reproduction:
https://github.com/misbahansori/nuxt-icons-issue

[cyberalien]

That works as intended. That icon is rendered as background image, which is impossible to do without setting width/height, so default width/height are set to 1em.

To change that, you can do one of the following:

• Change rendering mode to svg by adding mode="svg"
• Increase specificity of your width/height properties by adding ! before class name: class="!size-10"
• Resize icon using font-size: class="text-[40px]"

[misbahansori]

This used to work in TailwindCSS v3. I think there is something to do with the @layer directive in Tailwind V4.

https://tailwindcss.com/docs/upgrade-guide

Tailwind V4 uses native CSS layers and styles that are not inside the @layer directive will override the styles defined in the @layer directive based on the MDN specification.

I'm not sure if this issue should be fixed on the Tailwind CSS or Nuxt Icon side

[untlsn]

Because tailwind now use layers we don't need to fight it, we can embrace it
Try adding cssLayer to config so icons are in the same layer:

defineNuxtConfig({
  icon: {
    cssLayer: 'icon', // <- this. Try to give unique name to prevent breaking tailwind layer order
  },
})

Then size-10 and w-10 h-10 will work
But still I suggest to use font-size for changing size of icon

Thanks to @riicodespretty for showing problem with naming collision of layers

[antfu]

Yeah I believe that @untlsn's comment above should solve that issue (Thanks!)

And yes I would also suggest to use font-size, like text-xl.

[frank-laemmer]

Well written ticket and the proposed solution to send icon to the correct css layer appears to be working.

I want to use size-2/3 for an icon - roughly translated into CSS: width: 66%; height: 66%. If I understand correctly, the size property of the icon will not compute 66%. So the CSS overwrite is required for me.

[riicodespretty]

In case someone looks it up, I do not recommend @untlsn's solution as it breaks tailwind layer orders, for example making the preflights override utility classes as explained here: tailwindlabs/tailwindcss#15864 (comment).

Do not use tailwind layer names, instead here's a safer solution:

export default defineNuxtConfig({
  // ...
  icon: {
    cssLayer: 'icon'
  },
})