How can I add custom colors to my Tailwind project in the latest Next.js version using postcss.config.mjs?
typescript
Ethan JacksonI'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 theme variables documentation for more details.
