using dynamic CSS classes in a Vue app

Question

using dynamic CSS classes in a Vue app

I am currently in the process of developing a component with vuejs and tailwindcss. I have run into an issue where the colors for the background and text are not being applied properly.

<template>
  <div :class="[isDark ? `bg-${color}-900 text-white` : `bg-${color}-200 text-${color}-900`, 'p-4 rounded-md']">
    <slot />
  </div>
</template>

<script>
export default {
  name: "TCard",
  props: {
    color: {
      type: String,
      default: "gray",
      validator: function (value) {
        return ["gray", "red", "yellow", "green", "blue", "indigo", "purple", "pink"].includes(value);
      },
    },
    isDark: {
      type: Boolean,
      default: false
    }
  },
};
</script>

css vue.js tailwind-css

Answer 1

Answer №1

According to the specified documentation:

The key aspect of how Tailwind extracts class names is that it will exclusively identify classes that exist as complete unbroken strings in your source files.

If you try to interpolate strings or concatenate partial class names together, Tailwind won't be able to detect them and hence won't generate the corresponding CSS:

Avoid forming class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
In the given example, the strings text-red-600 and text-green-600 are not present, so Tailwind will skip generating those classes. Remember to always use complete class names:

Utilize full class names at all times
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You may want to employ a map of classes instead like:

const MAP = {
  gray: {
    light: 'bg-gray-200 text-gray-900',
    dark: 'bg-gray-900 text-white',
  },
  red: {
    light: 'bg-red-200 text-red-900',
    dark: 'bg-red-900 text-white',
  },
  // …
};

const TCard = {
  props: {
    color: {
      type: String,
      default: "gray",
      validator: function (value) {
        return value in MAP;
      },
    },
    isDark: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    colors() {
      return MAP[this.color][this.isDark ? 'dark' : 'light'];
    },
  },
  template: `
<div :class="[colors, 'p-4 rounded-md']">
  <slot />
</div>`
};

Vue.createApp({ components: { TCard }}).mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.min.js" integrity="sha512-Wbf9QOX8TxnLykSrNGmAc5mDntbpyXjOw9zgnKql3DgQ7Iyr5TCSPWpvpwDuo+jikYoSNMD9tRRH854VfPpL9A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="app">
  <t-card color="red">Foo</t-card>
  <t-card color="gray" is-dark>Bar</t-card>
</div>

This approach maintains the coherence between the classes used and the template markup. The validator can also cross-check with the MAP to confirm the availability of a desired color.

Alternatively, you could opt for using safelist within your Tailwind configuration such as:


module.exports = {
  …
  safelist: [
    { pattern: /^(bg|text)-(gray|red|yellow|green|blue|indigo|purple|pink)-900$/ },
    { pattern: /^bg-(gray|red|yellow|green|blue|indigo|purple|pink)-200$/ },
  ],
  …
};

The drawback here is that this would remain detached from your templates, potentially leading to a disconnect. This divergence might make it challenging to synchronize updates and switching the context for any edits.

Answer 2

According to the specified documentation:

The key aspect of how Tailwind extracts class names is that it will exclusively identify classes that exist as complete unbroken strings in your source files.

If you try to interpolate strings or concatenate partial class names together, Tailwind won't be able to detect them and hence won't generate the corresponding CSS:

Avoid forming class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
In the given example, the strings text-red-600 and text-green-600 are not present, so Tailwind will skip generating those classes. Remember to always use complete class names:

Utilize full class names at all times
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You may want to employ a map of classes instead like:

const MAP = {
  gray: {
    light: 'bg-gray-200 text-gray-900',
    dark: 'bg-gray-900 text-white',
  },
  red: {
    light: 'bg-red-200 text-red-900',
    dark: 'bg-red-900 text-white',
  },
  // …
};

const TCard = {
  props: {
    color: {
      type: String,
      default: "gray",
      validator: function (value) {
        return value in MAP;
      },
    },
    isDark: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    colors() {
      return MAP[this.color][this.isDark ? 'dark' : 'light'];
    },
  },
  template: `
<div :class="[colors, 'p-4 rounded-md']">
  <slot />
</div>`
};

Vue.createApp({ components: { TCard }}).mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.min.js" integrity="sha512-Wbf9QOX8TxnLykSrNGmAc5mDntbpyXjOw9zgnKql3DgQ7Iyr5TCSPWpvpwDuo+jikYoSNMD9tRRH854VfPpL9A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="app">
  <t-card color="red">Foo</t-card>
  <t-card color="gray" is-dark>Bar</t-card>
</div>

This approach maintains the coherence between the classes used and the template markup. The validator can also cross-check with the MAP to confirm the availability of a desired color.

Alternatively, you could opt for using safelist within your Tailwind configuration such as:


module.exports = {
  …
  safelist: [
    { pattern: /^(bg|text)-(gray|red|yellow|green|blue|indigo|purple|pink)-900$/ },
    { pattern: /^bg-(gray|red|yellow|green|blue|indigo|purple|pink)-200$/ },
  ],
  …
};

The drawback here is that this would remain detached from your templates, potentially leading to a disconnect. This divergence might make it challenging to synchronize updates and switching the context for any edits.

using dynamic CSS classes in a Vue app

Answer №1

Similar questions

Using Custom .woff Format Fonts in Sendgrid: A Guide

The arrangement of CSS code is crucial for it to work properly; any deviation from the correct order

Generate a unique border using jQuery randomization techniques

Having difficulties with hovering over a td that has a rowspan

Is it possible to generate a table without any grid lines present?

Tips for personalizing error messages for the "required" field by utilizing a dictionary feature on VeeValidate in Vue.Js

Making a Dialog resizable with jQuery's Resizable Helper

Header with absolute positioning doesn't play nice when nudged in Chrome

Calculating values within dynamically generated elements requires utilizing JavaScript to target and extract the

What is the best way to limit the top margin for a fixed element?

Height of list items in image gallery does not automatically readjust

iOS devices experiencing issues with fixed positioning

The navigation bar struggles to display list elements without proper line breaks

Using the scroll feature within the tooltip component in React with @material-ui/core/Tooltip can cause the entire page to

Utilize Element-UI to effectively close dropdown menus

Positioning a div element within a list item using CSS

Troubleshooting a Vue 2 component's prop receiving an incorrect value

What is the reason for `this` becoming undefined within the filter() function in VueJS?

Improving code quality and consistency in Javascript: Tips for writing better code

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element