Reactive Tailwind class with props on Vue js

Question

I've tried using a reusable component 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 }
  },
  computed: {
    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 components
@import "./components/button-filled"
@import "./components/button-outlined"

@tailwindcss utilities

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

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 .