Styling

The library uses Tailwind CSS as its CSS framework for component styling. To conditionally apply styles based on prop values, Vueless leverages CVA (Class Variance Authority).

Each HTML tag in a component has its own config key with corresponding Tailwind classes inside.

The component styles can be customized in three ways:

• Globally for particular component in vueless.config.{js,ts}

• Locally using the component’s config prop.

• Locally using the component’s class attribute.

Merging priority

Thanks to tailwind-merge, all those configs are smartly merged with the component's default config, following this priority order:

• Component class attribute (highest priority)

• Component config prop

• Global vueless.config.{js,ts}

• Component default config (lowest priority)

Component global styling

To apply your project’s design system styles to Vueless components, define them under the component key in the vueless.config.{js,ts} file. Use the component name (e.g., UButton, UCard, etc.) as a nested key, and assign class names to relevant parts of the component within its config.

This is the recommended way for styling Vueless components.

Example of component customization:

vueless.config.{js,ts}

export default {
  component: {
    UButton: {
      button: "bg-red-500",
      text: "px-4 text-2xl font-bold",
    },
    UCard: {
      wrapper: "border-gray-300",
    }
  }
};

Component config prop

Each component includes a config prop that allows for specific customization. Use this approach to fine-tune components for particular cases.

Use this approach with caution to ensure the project's design system remains consistent.

For example, to change the font weight of the title, you only need to specify:

<UEmpty
  title="The list is empty"
  :config="{ title: 'font-bold' }" 
/>

This will smartly replace font-medium with font-bold, avoiding class duplication and preventing any class priority issues.

Component class attribute

You can also use the default class attribute to add classes to the component.

<UButton label="Button" class="mt-4" />

In this case, the classes will be applied to the top-level component’s HTML tag and will override any other classes applied at lower levels (config prop, vueless config and component default config).

This approach is best suited for component positioning.