Theme - NuxtWind

If you want to customize the color theme of all your NuxtWind components all at once, you can add a theme to your tailwind.config.js. NuxtWind will take the theme from your tailwind.config.js and apply it to all components.

Configuration

NuxtWind uses the theme-property-keys primary and secondary to determine the colors of the components. You can pass the theme values to NuxtWind in two ways:

tailwind.config.js: Extend your tailwind.config.js theme to hold colors for primary and secondary.
nuxt.config.ts: Pass an object with the theme values to the nuxtwind-Config-Key in your nuxt.config.ts.

tailwind.config.js

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#fefce8",
          100: "#fef9c3",
          200: "#fef08a",
          300: "#fde047",
          400: "#facc15",
          500: "#eab308",
          600: "#ca8a04",
          700: "#a16207",
          800: "#854d0e",
          900: "#713f12",
        },
        secondary: {
          50: "#f8fafc",
          100: "#f1f5f9",
          200: "#e2e8f0",
          300: "#cbd5e1",
          400: "#94a3b8",
          500: "#64748b",
          600: "#475569",
          700: "#334155",
          800: "#1e293b",
          900: "#0f172a",
        },
      },
    },
  },
};

Installation

Add NuxtWind to your Nuxt 3 Project.

Overview

A list of all available components in NuxtWind.