On gists

Dynamic variants

Tailwind CSS

tailwind.config.js Raw #

// https://tailwindcss.com/docs/plugins#static-variants
// https://tallpad.com/series/tailwind/lessons/styling-vue-components-using-tailwindcss-custom-variants
// https://play.tailwindcss.com/8Pmxm8TomW


const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('error', ['&[data-error=true]', '[data-error=true] &'])
    }),

  ],
}

index.html Raw #

<div class="bg-green-200 hocus:bg-red-300">cusss</div>
<hr>
<div data-error=true class="error:bg-red-600 error:text-white">
  
  Chyba?
  
  <div class="error:bg-blue-300">Chyba 2 - child</div>  
</div>