Adding Dynamic Class Name in Svelte

adding dynamic class name in svelte

I think it was purgeCSS (built-in in tailwind 2.0) that did not recognize the dynamic classes.

It is difficult to solve this problem for every tailwind classes, but if you don't have a lot of these you can manually safe list those classnames:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      // Generate col-span-1 -> 12
      safelist: [...Array.from({ length: 12. }).fill('').map((_, i) => `col-span-${i + 1}`],
    },
  },
  // ...
}

Svelte: Dynamic Tailwind-Class from Variable

By wrapping the svgColor with the curly braces you are effectively making an object with the prop svgColor.

The correct syntax would be:

<p class={svgVisible ? svgColor : ''}>Test</p>

Setting a CSS class based on a variable in Svelte

Use

class={type}

instead of:

class:{type}

---

Related Topics