Skip to content

Tailwind CSS ​

The module provides friendly TailwindCSS integration by resolving potential style conflicts. Please make sure to install the Nuxt Tailwind module.

Theme ​

ts
import colors from "tailwindcss/colors";

export default defineNuxtConfig({
  naiveui: {
    themeConfig: {
      light: {
        common: {
          primaryColor: colors.blue[600],
          primaryColorHover: colors.blue[500],
          primaryColorPressed: colors.blue[700],
        },
      },
      dark: {
        common: {
          primaryColor: colors.blue[500],
          primaryColorHover: colors.blue[400],
          primaryColorPressed: colors.blue[600],
        },
      },
    },
  },
});

ColorMode ​

ts
// tailwind.config.ts
import type { Config } from "tailwindcss";

export default <Config>{
  darkMode: "class",
};