I've tried using a reusable ponent on vue js like pass props class name. In my case, I'm using tailwind css. How can I pass class name using props?

this is my code

<template lang="pug">
  router-link.button-filled(
      :to="routeName"
      :title="title"
      :class="customClass"
    )
    | {{ title }}
</template>

<script>
export default {
  props: {
    routeName: { default: "/", type: String },
    title: { default: "Button", type: String },
    size: { default: "md", type: String },
    backgroundColor: { default: "red-500", type: String },
    borderColor: { default: "red-500", type: String }
  },
  puted: {
    customClass() {
      return [
        "bg-" + this.backgroundColor,
        "border-" + this.borderColor
      ];
    }
  }
};
</script>

This is my tailwind.config.js

module.exports = {
  prefix: 'fst-',
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

And this is my master.sass

@tailwindcss base

@tailwindcss ponents
@import "./ponents/button-filled"
@import "./ponents/button-outlined"

@tailwindcss utilities

This is my result after I pass class using props. Nothing changed but class success loaded on html attribute.

I've tried using a reusable ponent on vue js like pass props class name. In my case, I'm using tailwind css. How can I pass class name using props?

this is my code

<template lang="pug">
  router-link.button-filled(
      :to="routeName"
      :title="title"
      :class="customClass"
    )
    | {{ title }}
</template>

<script>
export default {
  props: {
    routeName: { default: "/", type: String },
    title: { default: "Button", type: String },
    size: { default: "md", type: String },
    backgroundColor: { default: "red-500", type: String },
    borderColor: { default: "red-500", type: String }
  },
  puted: {
    customClass() {
      return [
        "bg-" + this.backgroundColor,
        "border-" + this.borderColor
      ];
    }
  }
};
</script>

This is my tailwind.config.js

module.exports = {
  prefix: 'fst-',
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

And this is my master.sass

@tailwindcss base

@tailwindcss ponents
@import "./ponents/button-filled"
@import "./ponents/button-outlined"

@tailwindcss utilities

This is my result after I pass class using props. Nothing changed but class success loaded on html attribute.

• javascript
• vue.js
• tailwind-css

• please share your tailwind.config and main css file – Boussadjra Brahim Commented Dec 20, 2020 at 10:30
• Hi @BoussadjraBrahim Wele back, how are you :), I've updated my question with tailwind.config.js and master.sass Thanks :) – kurakura Commented Dec 20, 2020 at 10:35
• place @tailwindcss utilities after @tailwindcss ponents – Boussadjra Brahim Commented Dec 20, 2020 at 10:52
• Hi @BoussadjraBrahim, still wont work, i've tried to use prefix on return but still same – kurakura Commented Dec 20, 2020 at 10:56

1 Answer 1

Few things I noticed:

1. You specified a custom prefix in your tailwind.config.js. That means all your tailwind classes should be prefixed with fst-. For example, text-green-500 will be fst--text-green-500 in your case.

2. You're concatenating class names in a way that will be ignored by PurgeCSS. When building your CSS for production, PostCSS goes through all your files and look for Tailwind class names according to your Tailwind config and remove all unused class names. Therefore, you should write your class names in full instead of concatenating them when using Tailwind.

Excerpt from the Tailwind documentation under Optimizing for Production.