How to pass additional css classes (tailwind) to vue-mdi component

[fgeck]

Hi,

I am using Vue + TailwindCSS and I want to style a mdi component. How can I pass additional values to the components class to use TailwindCSS to style the mdi component?

Example:

<script lang="ts">
  import { defineComponent } from "vue";
  import ChevronLeft from "vue-material-design-icons/ChevronLeft.vue";

  export default defineComponent({
    name: "test",
    components: { ChevronLeft, ChevronRight },
  });
</script>

<template>
  <ChevronLeft class="bg-white border-none" title="left" />
</template>

Rendered in the browser:

<span
  aria-hidden="false"
  aria-label="left"
  class="bg-white border-none material-design-icon chevron-left-icon bg-white border-none"
  role="img"
  ><svg
    fill="currentColor"
    class="material-design-icon__svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z">
      <title>left</title>
    </path>
  </svg></span
>

Am I doing something wrong or is that not possible at all?

[robcresswell]

I think you want things like this https://tailwindcss.com/docs/fill ? I'm not super familiar with tailwind though.

[fgeck]

(take that with a grain of salt as I am neither a vue nor a tailwind expert)

What you do with tailwindcss is to style your html components via classes. The whole css magic is done by tailwind. That means only if the html component that should be styled has the classes, it will be styled.

I guess what you pointed out in the doc won't work as the "inherited classes" (or classes that are passed into the vue component) are only passed to the <span> but not to the <svg> element as we can see in my initial issue.

[robcresswell]

Ah I see what you mean. I think in tailwind you'd want something like @apply on the material-design-icon__svg for global styles on the icons, or .chevron-left-icon > .material-design-icon__svg for specific ones. I haven't done CSS in a long while though, not sure if my specific example is correct.

[robcresswell]

Closing as there has been no further comments / discussion