Custom color (bg-primary) is not being applied

Question

I’m using Nuxt 4 (RC) with Tailwind CSS. Tailwind is working fine for default utilities (bg-red-500, text-xl, etc.), but my custom bg-primary color isn’t applied.

Here’s my setup:

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});

assets/css/main.css

@import "tailwindcss";

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './app/**/*.{js,ts,vue}',
    './components/**/*.{js,ts,vue}',
    './layouts/**/*.{js,ts,vue}',
    './pages/**/*.{js,ts,vue}',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './**/*.vue'
  ],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(29, 78, 216)',
      },
    },
  },
  plugins: [],
};


<h1 class="text-3xl font-bold bg-primary text-white">
    Hello World!
</h1>

But the background stays transparent. Default Tailwind colors work fine, only my custom color is ignored.

Is there something different with Nuxt 4’s Tailwind integration (vite plugin, config paths, etc.) that I’m missing?

Use CSS-first configuration instead of tailwind.config.js. Related: What's breaking changes from v4? and How to use custom color themes in TailwindCSS v4 — rozsazoltan
– rozsazoltan, Commented Aug 19 at 8:30

Wongjn · Accepted Answer · 2025-08-19 06:31:32Z

2

It seems like you're using Tailwind v4. In v4, the JavaScript configuration is obsolete, sueprceded by configuration in CSS. Thus, as per the documentation, you'd add your own color theme token like so:

@import "tailwindcss";

@theme {
  --color-primary: rgb(29, 78, 216);
}

answered Aug 19 at 6:31

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom color (bg-primary) is not being applied

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related