Nuxt•6mo ago

Tailwind color issue

I used npm install tailwindcss @tailwindcss/vite which is what tailwind said, installed npm install --save-dev @nuxtjs/tailwindcss according to Nuxt's site, and most styling works, but some button styles and all coloring doesn't work My files:

nuxt.config.js
import tailwindcss from "@tailwindcss/vite";
export default {
  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
  test: {
    environment: 'jsdom',
    globals: true
  },
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./composables/**/*.{js,ts}",
    "./utils/**/*.{js,ts}",
    "./app.vue",
    "./error.vue"
  ],
  theme: {
    extend: {
      colors: {
        customBlue: '#3A5FCD',
        customGreen: '#6EE7B7',
        customPurple: '#8B5A8C',
        bronze: '#df842a',
        gold: "#facc15",
        silver: "#c0c0c0",
        lightText: "#f8fafc",
        darkText: "#1A1A1A",
        pageGray: "#F8F9FA",
        lightGray: "#94a3b8",
        cardGray: "#F5F7FA",
        lightBeige: "#fbf0ed",
        currency: "#f5b942",
      },
      fontFamily: {
        agrandir: ['Agrandir', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
        satoshi: ['Satoshi', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
  plugins: [],
}
assets/css/main.css
@import 'tailwindcss';

nuxt.config.js
import tailwindcss from "@tailwindcss/vite";
export default {
  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
  test: {
    environment: 'jsdom',
    globals: true
  },
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./composables/**/*.{js,ts}",
    "./utils/**/*.{js,ts}",
    "./app.vue",
    "./error.vue"
  ],
  theme: {
    extend: {
      colors: {
        customBlue: '#3A5FCD',
        customGreen: '#6EE7B7',
        customPurple: '#8B5A8C',
        bronze: '#df842a',
        gold: "#facc15",
        silver: "#c0c0c0",
        lightText: "#f8fafc",
        darkText: "#1A1A1A",
        pageGray: "#F8F9FA",
        lightGray: "#94a3b8",
        cardGray: "#F5F7FA",
        lightBeige: "#fbf0ed",
        currency: "#f5b942",
      },
      fontFamily: {
        agrandir: ['Agrandir', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
        satoshi: ['Satoshi', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
  plugins: [],
}
assets/css/main.css
@import 'tailwindcss';

11 Replies

kapa.ai•6mo ago

Hi @Andiesgames. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like your Tailwind setup in Nuxt is mostly correct, but there are a few things to check and clarify based on the knowledge sources: 1. Module Installation:
You only need to use one method to add Tailwind to your Nuxt project. The recommended way for Nuxt is to use the @nuxtjs/tailwindcss module. You do not need to manually install and configure @tailwindcss/vite in your vite.plugins array when using the Nuxt module. The Nuxt module handles the integration for you, and adding both can cause conflicts or unexpected behavior.
See: Nuxt external configuration files 2. Configuration File:
Your nuxt.config.js should look like this (no need to import or use @tailwindcss/vite):

export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
  test: {
    environment: 'jsdom',
    globals: true
  },
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
})

export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
  test: {
    environment: 'jsdom',
    globals: true
  },
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
})

You can remove the vite: { plugins: [tailwindcss()] } section. 3. Tailwind Content Paths:
Your tailwind.config.js content array looks good and should pick up all your Vue and JS/TS files. 4. Custom Colors and Fonts:
Your custom colors and fonts are correctly added under theme.extend. This is the right way to add them in Tailwind v3 and v4. 5. CSS Import:
Your assets/css/main.css should only need:

@import 'tailwindcss';

@import 'tailwindcss';

If you use Nuxt UI or other libraries, you might also need to import them here, but for plain Tailwind, this is correct. 6. Button Styles and Coloring Not Working:
If some button styles and coloring are not working: - Make sure you are using the correct Tailwind classes in your components (e.g., bg-customBlue, text-lightText, etc.). - If you are using a UI library (like Nuxt UI or PrimeVue), check if their styles are conflicting with Tailwind or if you need to adjust the CSS layer order (see PrimeVue + Tailwind issue). - If you are using Nuxt UI, ensure you import it in your CSS and add the module as shown in the docs. 7. Rebuild and Clear Cache:
Sometimes, changes to Tailwind config require a full restart of the dev server. Stop the server, clear .nuxt and node_modules/.cache, and restart. Summary:
- Remove the manual @tailwindcss/vite plugin from your Nuxt config. - Use only the @nuxtjs/tailwindcss module. - Ensure your Tailwind classes match your custom color and font names. - Restart your dev server after changes. If you follow these steps and still have issues, check for conflicting CSS from other libraries or incorrect class names. The knowledge sources do not mention any additional required steps for your described setup beyond these best practices. Nuxt external configuration files
PrimeVue + Tailwind issue ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@548834388100775946> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AndiesgamesOP•6mo ago

It didnt' work. it just keeps breaking. As far as I'm aware, my tailwind is fine. It works in a plain vue project, but not in the nuxt version Also I installed nuxt tailwind using the official guide, via npm as package manager. My tailwind config looks fine, same for my nuxt config but yeah Steps to reproduce: create a plain nuxt project, add nuxt tailwind, copy my tailwind config and nuxt config and test it on any component with a custom tailwind color in it

nathanr•6mo ago

@Andiesgames are you using Nuxt UI 3?

AndiesgamesOP•6mo ago

No, is that mandatory?

nathanr•6mo ago

No it's not, was just check as there were some large breaking changes @Andiesgames Are you able to share the tailwind code you're using for buttons/ where it's not working?

AndiesgamesOP•6mo ago

This is the full vue template from the working version

message.txt

nathanr•6mo ago

So what isn't working for you?

AndiesgamesOP•6mo ago

all text is just black, no custom colors on it

Cake•6mo ago

@Andiesgames don't use the tailwind module check in the tailwind docs how to install with nuxt, u shouldn't need the module. tailwind.config.ts is for tailwind v3 in v4 u don't need it u're mixing both v3 and v4, and both tailwind and the tailwind nuxt module remove tailwind.config.js and the nuxt module, and check tailwind docs how to do your theme, it should be in the css file where u have

assets/css/main.css
@import 'tailwindcss';

assets/css/main.css
@import 'tailwindcss';

AndiesgamesOP•6mo ago

Okay, thank you!

Gaming

Programming

Tailwind color issue

Did you find this page helpful?