Custom button component not picking up correct styling

I have a custom button component that receives a sub-type prop which should determine the background color, i.e.,

<script setup>
const props = defineProps({
  subType: {
    type: String,
    default: "accent",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "button",
  },
});
const style= computed(() => [
  "py-2 px-4 m-2 rounded transition-all text-light-base capitalize duration-200",
  props.disabled
    ? "bg-dark-weak dark:bg-light-weak/50 cursor-progress"
    //setting the background based on subType prop
    : `cursor-pointer bg-${props.subType}-base hover:bg-${props.subType}-strong dark:hover:bg-${props.subType}-weak`,
]);
</script>
<template>
  <button :class="style" :type="type" disabled>
    <slot />
  </button>
</template>

My issue is that the background is not set. How can I achieve this?

NB: I am using tailwind for the styles where I have extended some colors, i.e.,

theme: {
    extend: {
      colors: {
        accent: {
          strong: "#222119",
          base: "#343227",
          weak: "#54503f",
          highlight: "#696550",
        },
        // other color options, e.g., light, dark, info, danger, alert.
        // usage example "<div class="bg-accent-base text-info-strong dark:text-info-weak"/>"
      },
   },
}

vincent15000

2 years ago

Best Answer

Level 63

Your VueJS code is correct, the problem is that TailwindCSS doesn't know the classes. That's because TailwindCSS analyses the HTML / CSS in order to keep only the existing classes.

You have some dynamic classes and TailwindCSS doesn't add automatically dynamic classes (the variable isn't converted to its value). You need to declare each dynamic class in the safelist and also the corresponding colors to each class.

https://tailwindcss.com/docs/content-configuration#safelisting-classes

For example you have the bg-accent-base and the corresponding color is accent with its variations base, strong, weak, ...

https://tailwindcss.com/docs/customizing-colors#color-object-syntax

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  safelist: [
    // background images
    'bg-accent-base',
    'bg-accent-strong',
    'bg-accent-weak',
  ],
  theme: {
    colors: {
     'accent': {
       base: '#317917',
       strong: '#317917',
       weak: '#317917',
     },
    },
    extend: {
      backgroundImage: {
      },
    },
    fontFamily: {
    },
  },
  plugins: [],
}

1 like

Udev

2 years ago

Level 2

@vincent15000 I have a few colors and I need to use them with text, backgrounds shadows etc. is there a better way than safelisting all possible combinations

1 like

Udev

2 years ago

Level 2

this seems to work

safelist: [
    {
      pattern:
        /(bg|text|border|shadow)-(dark|light|accent|compliment|success|info|warning|danger)-(strong|base|weak)/,
      variants: ["hover", "focus"],
    },
  ],

1 like

vincent15000

2 years ago

Level 63

@Udev Yes, you can also use patterns to declare classes in the safelist. Note that if you are using custom colors, you anyway have to declare them too.

1 like

Please or to participate in this conversation.