Oruga UI is a component-based framework for Vue 3 with which you can make applications with a good presence using the large number of components that it brings us; but, the fundamental difference with other component-based frameworks is that we can easily change their design to use the custom one, together with other frameworks such as Bootstrap or Tailwind CSS easily and cleanly; for this, we must expose the Oruga CSS, specifically, the variables that do not allow changing aspects of them such as text format, colors, borders, spaces, etc.

We can easily customize Caterpillar UI at the graphical interface level, change aspects such as the border, background color... in short, any aspect that you can customize with CSS can be easily done by exposing the Caterpillar UI variables used by the caterpillar components UI

We expose the Oruga UI variables to vary the style

We import the package of variables with which we can easily vary the theme:

resources\js\vue\main.js

//***
import '@oruga-ui/oruga-next/dist/oruga-full.css'
import '@oruga-ui/oruga-next/dist/oruga-full-vars.css'

We modify the variables

And with this, now the CSS of the Oruga UI component is based on variables, and with this, we can customize them; in this example, using Tailwind:

resources\css\vue.css

h1{
    @apply text-3xl text-center my-5
}
:root{
    --oruga-modal-content-padding:0
}