Custom tailwind classes

To prevent class duplication, Vueless uses tailwind-merge under the hood.

If you plan to use custom Tailwind CSS classes to style Vueless components, add them to the Vueless config under the tailwindMerge key, following the tailwind-merge configuration.

See the full list of available properties here.

vueless.config.js

export default {
  tailwindMerge: {
    extend: {
      theme: {
        classGroups: {
          "ring-w": [{ ring: ["tiny"] }],
          "font-size": [{ text: ["2xs"] }],
        }
      }
    }
  }
};