where to customize theme colors in the latest version?

[yang-zhang-work]

I followed the doc (https://nextjstemplates.com/docs/customization#customizing-colors) and tried to customize theme color, but after updating tailwind.config.ts and rerunning npm run dev, nothing changes. I wonder if the doc was bit of outdated and there is a new way of customizing colors, or maybe I just did it wrong.

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
      colors: {
        current: "currentColor",
        transparent: "transparent",
        white: "#ffffff",
        black: "#090e34",
        dark: "#1d2144",
        primary: "#0ACF83",
        yellow: "#FFD600",
        "body-color": "#959cb1",
    },
  },
  plugins: [require("tailgrids/plugin")],
};
export default config;

[VochanecA]

I followed the doc (https://nextjstemplates.com/docs/customization#customizing-colors) and tried to customize theme color, but after updating tailwind.config.ts and rerunning npm run dev, nothing changes. I wonder if the doc was bit of outdated and there is a new way of customizing colors, or maybe I just did it wrong.

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
      colors: {
        current: "currentColor",
        transparent: "transparent",
        white: "#ffffff",
        black: "#090e34",
        dark: "#1d2144",
        primary: "#0ACF83",
        yellow: "#FFD600",
        "body-color": "#959cb1",
    },
  },
  plugins: [require("tailgrids/plugin")],
};
export default config;

If you want to add custom colors while keeping the default colors intact, you can use the extend property within the theme section of your configuration. Here's how to do it:

import type { Config } from "tailwindcss";
const colors = require('tailwindcss/colors');

const config: Config = {
darkMode: "class",
content: [
"./src/pages//*.{js,ts,jsx,tsx,mdx}",
"./src/components//.{js,ts,jsx,tsx,mdx}",
"./src/app/**/.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
...colors,
primary: "#1A202C", // Add your custom primary color
'custom-blue': '#1E90FF', // Example of adding a new color
'custom-green': '#32CD32', // Another custom color
},
},
},
plugins: [require("tailgrids/plugin")],
};

export default config;