Custom Colors with Nuxt & Tailwind CSS: A Quick Start Guide

🚀 Step-by-Step Guide: Setting Up Custom Colors in Nuxt with Tailwind

1️⃣ Install Tailwind CSS with the Nuxt Module

Nuxt makes it super easy to integrate Tailwind CSS via its official module. Just run:

# Install Tailwind CSS
npx nuxi@latest module add tailwindcss

✅ This will:

• Add @nuxtjs/tailwindcss to your modules

• Save you from manual setup hassles!

---

2️⃣ Configure nuxt.config.ts and Set Up Your Main CSS

Open your nuxt.config.ts and ensure the Tailwind module and global CSS file are included:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  css: ['~/assets/css/main.css'],
});

Now, create the main CSS file, inside main.css, add the following:

/* assets/css/main.css */
@import "tailwindcss";

/* Custom theme colors via CSS variables */
@theme {
  --color-primary: #d9ff00;
}

💡 These variables will later be referenced in your Tailwind setup.

---

3️⃣ Use Your Custom Colors in Components

Now you can directly use the custom colors in your templates:

<template>
  <div class="p-8 space-y-4 bg-blackb text-whiteb">
    <h1 class="text-3xl font-bold text-primary">
      Welcome to My Nuxt App
    </h1>
    <p class="text-primary">This is styled with custom colors!</p>
  </div>
</template>

4️⃣ Run and Enjoy

Start your Nuxt app:

npm run dev

🎉 You should now see your custom colors in action!