Skip to main content

Styling

We bring and utilize the flexibility and power of Tailwind CSS to Vivid. You can customize the look and feel of Vivid by changing the Tailwind configuration file.

tip

Read more about Theming.

Tailwind CSS​

With Tailwind, you can change the colors, fonts, and other styles of Vivid to match your brand quickly. You can also use the Tailwind CSS utility classes to customize the styles of individual components.

This way, you can speed up your development process and focus on the important parts of your application.

Mantine​

We use Mantine as a UI framework for Vivid. Mantine is a React component library with a focus on usability and accessibility. Mantine brings a lot of functionality to Vivid, and it also provides a lot of customization options.

By default, we've made that custom Tailwind color theme you've defined in the tailwind.config.js file available in Mantine. You can use it in any Mantine component that accepts a color prop.