How can I add custom colors to my Tailwind project in the latest Next.js version using postcss.config.mjs?

I'm using the latest version of Next.js (with the App Router and TypeScript), and I noticed that my project uses a postcss.config.mjs file instead of the usual postcss.config.js.

I want to add custom colors to my Tailwind CSS setup, but I’m not sure how to properly configure it in this setup. Do I need to modify postcss.config.mjs to add custom colors? Or is there a different file I should be using?

Answer

There is a different file you should be using. In the same CSS file you have @import "tailwindcss";, should add a @theme block with theme variables the sets your color. For example, to define a color named mint-50, you'd have in your CSS file:

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

See the Read more for more details.