1

I just launched a new Nuxt.js project (not using Nuxt UI) and added TailwindCSS to it following this guide:

That said tailwind works great, however I'm running into a issue adding custom colors.

I've tried adding them both in the tailwind config file and in the CSS and neither work.

Also ive tried:

  • clearing the browser cache
  • deleting the nuxt cache
  • restarting the dev server

Here's my config files:

tailwind.config.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // Very important: ensure all files containing Tailwind classes are listed here
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.{vue,js,ts}',
    './pages/**/*.{vue,js,ts}',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}', // Also necessary for some dynamic classes
    './app.vue',             // Important for Nuxt 3's root app file
  ],
  theme: {
    extend: {
      colors: {
        primary: '#10243f',   // Your primary blue
        secondary: '#1867a0', // Your secondary blue
      },
    },
  },
  plugins: [],
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  css: [
    '~/assets/css/tailwind.css' // Add this line
  ],
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  modules: ['@nuxt/image', '@nuxt/fonts', '@nuxt/icon'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

./assets/css/tailwind.css

@import "tailwindcss";

@theme static {
    --color-primary: #10243f;
    --color-secondary: #1867a0;
}

Sample usage:

<button type="submit" class="bg-primary hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300">
  Send Message
</button>

If anyone could solve this issue you'd be a life saver!

Improve this question
3
  • Is no formatting working at all, or is it just the custom colors? Commented Jul 9 at 7:17
  • @rozsazoltan tailwind itself is working and rendering fine, its just the custom colors Commented Jul 9 at 7:23
  • Because, its okay in playground: play.tailwindcss.com/cAJrWzlj7q Commented Jul 9 at 7:24

2 Answers 2

Reset to default
1

Ahh I figured it out... my tailwindcss dependency itself got screwed up, depsite it having been working, once I removed the line from package.json, deleted the lockfile, removed node_modules and ran npm install tailwindcss again, its now working just fine. I do appreciate you trying to help and the very detailed responses!

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

Comments

1

Draft: I'm sharing the answer, but it's not comprehensive - it only relates to the code of question!

Since January 2025, TailwindCSS v4 has been released, and the JS-based legacy configuration has become deprecated. It's now replaced by the new CSS-first configuration. Because of this, your tailwind.config.js file can even be removed entirely.

The content property, which is marked as very important in your file, has become irrelevant starting from v4. TailwindCSS v4 introduced automatic source detection, meaning it can automatically locate your files without needing manual configuration.

When using the Vite plugin, it's important to ensure that a .gitignore file is present in the root folder, and that there are no other .gitignore files above the root directory. You can ensure this by running the git init command in the root folder. Although in this case, formatting would typically not 'work at all' by default, as it would take too long to load in the background. See more:

Define custom colors

The colors you listed in the file have been nicely translated into the CSS-first approach.

What's difference between @theme {...} and @theme static {...}?

The @theme only adds the declared values to :root as CSS variables if they are used at least once.

In contrast, values declared in @theme static are always emitted regardless of usage, making them available later as var(--color-primary) even if you haven't used classes like bg-primary, text-primary, border-primary, etc. in your code.

@theme @theme static
I declared two colors, but only used one - primary. As you can see, only the variable for primary was added. In the second case, I again declared two colors and only used primary, yet variables for both colors were generated.
@theme example generated css @theme static example generated css
Improve this answer

3 Comments

I have now removed the content property with no change, and I can confirm there is only one .gitignore in the root of the project. Thanks for the very detailed answer but it almost seems like this fault is within nuxt itself somewhere...
If you open a GitHub repo reproduction, I'll be happy to take a look.
Ahh I figured it out... my tailwindcss dependency itself got screwed up, depsite it having been working, once I removed the line from package.json, deleted the lockfile, removed node_modules and ran npm install tailwindcss again, its now working just fine. I do appreciate you trying to help and the very detailed responses!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.