Tailwind4 plugin - usage question

[reisi007]

Hi,

I will start with having the plugin configured as following:

@plugin "@iconify/tailwind4" {
    prefixes: mdi, material-symbols;
}

I am successfully able to use

• icon-[material-symbols--open-in-full-rounded]
• iconify material-symbols--open-in-full-rounded

However I do not understand why the following is not supported (The additional iconify class seems redundant in clean naming mode and it feels counterintuitive in tailwind to use both files):

• material-symbols--open-in-full-rounded (without iconify)
• material-symbols--[open-in-full-rounded] / material-symbols-[open-in-full-rounded]

I would have expected instead of iconify-color to have something like material-symbols--colored--open-in-full-rounded

Using

"@iconify/tailwind4": "^1.0.3",
"tailwindcss": "^4.0.4"

Thank you!

[cyberalien]

Each icon has multiple CSS rules. For example, for material-symbols:open-in-full-rounded actual CSS is:

.material-symbols--open-in-full-rounded {
  display: inline-block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 21q-.425 0-.712-.288T3 20v-6q0-.425.288-.712T4 13t.713.288T5 14v3.6L17.6 5H14q-.425 0-.712-.288T13 4t.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11t-.712-.288T19 10V6.4L6.4 19H10q.425 0 .713.288T11 20t-.288.713T10 21z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

For other icons code is almost identical, the only difference is in value of --svg variable.

When you use icon-[material-symbols--open-in-full-rounded], plugin renders all CSS above for each icon.

That causes a lot of duplication. Tailwind CSS cannot reduce it.

For that reason, there is a cleaner syntax with common selectors moved to iconify and iconify-color classes. In Tailwind CSS this cannot be done without extra class name.

[cyberalien]

Moved issue to Tailwind 4 plugin repository.

[reisi007]

Hi,

Thanks for commenting.

I was able to use the following additional CSS:

    [class*="mdi--"]:not([class*="iconify"]), [class*="material-symbols--"]:not([class*="iconify"]) {
        @apply iconify;
    }

I am not sure if programatically adding this is possible, but it certainly seems to be a nice workaround. Do you have any input on that. I expext when using icon-[] there is a similar logic under the hood....

If twice the classes are added I am sure also color mode could easily be supported (not needed in my project, but needs consideration on the library level)

I purposely excluded all elements containing iconify classes so that this solution is backward compatible....

edit: Updated selector from starts with to contains

[cyberalien]

Yes, that works too. Unfortunately, that cannot be done via plugin.