Class prefix breaks TailwindCSS utility classes

[MoodyBones]

Hi Alex and Nuxt/Tailwind folks

Cheers for the awesome module! I'm super stoked to use it, but I can't get it working with TailwindCSS.

Usually, I put my SVG in a Vue component. I give the SVG class="w-full h-auto" and fill="currentColor", then I control the size and color with the parent element.

I hoped to do the same with this module, but I can't get the responsive/flexible sizing configured. Inspecting the dev tools, I can see that the class names are being prefixed with BaseLogo_svg__w-full BaseLogo_svg__h-auto ..I guess this is the problem. Is there a way to turn these prefixes off?

If not, could you give any tips on how to style them responsively using TailwindCSS?

Chrome dev tools

BaseLogo.svg

TheFooter.vue

nuxt.config.js

   [
      'nuxt-svg-loader',
      {
        svgoConfig: {
          plugins: [
            { prefixIds: false }, // I thought this might disable it, but I can't see a change true or false
          ],
        },
      },
    ],

Many thanks,
Mel

[Kapcash]

Having the same problem right now. Not sure why the library prefixes the css classes inside the loaded svg?

[Kapcash]

Ok I found out how to disable this!

nuxt-svg-loader uses svg-to-vue loader under the hood.
svg-to-vue uses svgo library by default to optimize the svgs before loading them.
svgo has a rule called prefixIds that adds the svg id as a prefix to classes (still not sure why thought).

This rule has been enabled by default on the svg-to-vue loader. (See this issue#2)

It's actually already mentionned on this module's Readme :)
Adding this configuration fixes the problem.