Customize Themes in Nuxt UI with Tailwind CSS

In this lesson, you'll configure a custom theme in Nuxt UI by defining CSS variables in your main.css file, allowing you to tailor the appearance of your application to match your brand identity. You'll also learn how to override Nuxt UI-specific CSS variables to implement a consistent dark mode with customized colour schemes. Additionally, you'll define a unique colour scale in Tailwind CSS to create a custom colour gradient, adding to the visual appeal of your app. Finally, you'll explore how to customize specific components by modifying styles in the app config file, providing precise control over your application's design.

Note: if you have upgraded Nuxt UI beyond 3.0.0 you will need to use --ui-radius: 0.25rem; in main.css.

Nuxt UI Theme: https://ui.nuxt.com/getting-started/theme

Tailwind CSS Theme Configuration: https://tailwindcss.com/docs/theme

Nuxt App Configuration: https://nuxt.com/docs/api/configuration/nuxt-config