I am currently following the path on Laracasts, and I am stuck trying to override the default Tailwind colors.

Here is my package.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"
  }
}

And here is my tailwind.config.js:

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: [],
};

Here is my app.css file:

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

And my PostCSS config file (postcss.config.js):

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

If anyone has an idea why it is not working as intended, I would really appreciate your help.

I am currently following the path on Laracasts, and I am stuck trying to override the default Tailwind colors.

Here is my package.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"
  }
}

And here is my tailwind.config.js:

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: [],
};

Here is my app.css file:

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

And my PostCSS config file (postcss.config.js):

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

If anyone has an idea why it is not working as intended, I would really appreciate your help.

• laravel
• tailwind-css
• vite
• tailwind-css-4

• Check other related v3-to-v4 migration questions: Problem installing TailwindCSS with Vite; How to upgrade TailwindCSS?; Cannot build frontend using Vite – rozsazoltan Commented Feb 2 at 20:56

1 Answer 1

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 trhee packages mentioned previously.
• Migrate the tailwind.config.js customizations to your input CSS file:

  @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;
  }
  

• Delete the tailwind.config.js file.