Why Aren't My Custom Tailwind Colors Overriding Defaults in Laravel with Vite?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I am following a Laracasts tutorial and I'm having trouble fully overriding Tailwind's default color palette in my Laravel project using Vite. I want to replace the default 'black' color with "#060606", but it isn't working as expected.

Below are my configuration files:

package.json:

JSON
{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "vite build",
    "dev": "vite"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.4",
    "concurrently": "^9.0.1",
    "laravel-vite-plugin": "^1.0",
    "postcss": "^8.5.1",
    "tailwindcss": "^4.0.1",
    "vite": "^6.0.11"
  },
  "dependencies": {
    "@tailwindcss/postcss": "^4.0.1",
    "@tailwindcss/vite": "^4.0.1"
  }
}

tailwind.config.js:

JAVASCRIPT
import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Figtree', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        black: "#060606",
      },
    },
  },
  plugins: [],
};

app.css:

CSS
@import "tailwindcss";
@source "../views";

postcss.config.js:

JAVASCRIPT
export default {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

Any ideas on why my custom color isn't overriding Tailwind's defaults? Thanks in advance!

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

When you use the extend section for your colors, Tailwind performs a deep merge with its default palette rather than replacing it entirely. That means if you set a key (like black) in extend, it will merge with Tailwind’s default value instead of fully overriding it.

How to Fully Override the Default Colors

If your goal is to replace the default colors with your custom palette, move the colors outside of extend. For example, update your tailwind.config.js like this:

JAVASCRIPT
import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
  ],
  theme: {
    // Define the colors directly to replace the defaults.
    colors: {
      black: "#060606",
      // Optionally add additional color definitions here.
      white: "#ffffff",
      // ...other colors that you plan to use.
    },
    extend: {
      fontFamily: {
        sans: ['Figtree', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
};

Alternate Approach: Overriding a Single Color

If you only wish to override one color and keep the rest of the default palette, you must be aware that putting it in the extend section might not replace what Tailwind already provides. Tailwind merges objects at a key level, so it won’t override an existing key unless configured outside extend. In this case, moving the color definition outside extend (as shown above) is the straightforward solution.

Additional Tip: CSS File Directives

In your app.css file you have:

CSS
@import "tailwindcss";
@source "../views";

The recommended directives for Tailwind are:

CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

Switching to those might avoid unexpected behavior if Tailwind isn’t processing your CSS as you’re expecting.

Summary

To completely override default Tailwind colors, define your custom colors directly in the theme.colors object.
Use the official Tailwind directives in your CSS file.
Ensure your build process (PostCSS with Vite) is set up correctly with the updated configurations.

Implement these changes, and your custom color (black set to "#060606") should be applied as intended.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by MartianPioneer303 • 1 month ago

You're using a mixture of Tailwind v3 configuration but you have v4 installed. To fix:

Uninstall the autoprefixer npm package. This is no longer needed with Tailwind v4 since Tailwind does the same job internally.
Uninstall the @tailwind/postcss and postcss npm packages. You seem to be using Vite, so you don't need the PostCSS integration path.
Delete the postcss.config.js. This is simply not needed with the removal of the three packages mentioned previously.

Migrate the tailwind.config.js customizations to your input CSS file:

CSS
@import "tailwindcss";
@source "../views";
/**
* You may need to modify these paths to the real path relative
* to this CSS file.
*/
@source "../resources/**/*.blade.php";
/**
* You may not need the following directive if the JS files are
* processed in Vite.
*/
@source "../resources/**/*.js";

@theme {
  --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /**
   * Not strictly needed as this is the default anyway.
   */
  --color-black: #000000;
}