Class prefix breaks TailwindCSS utility classes

MoodyBones commented 3 years ago

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 Screen Shot 2021-04-30 at 13 39 19

BaseLogo.svg Screen Shot 2021-04-30 at 13 42 00

TheFooter.vue Screen Shot 2021-04-30 at 13 38 27

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 commented 3 years ago

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

Kapcash commented 3 years ago

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.

Developmint / nuxt-svg-loader

Class prefix breaks TailwindCSS utility classes #84