In Tailwind CSS v4, you can add custom colours while keeping the default ones by using the @theme directive. Note that Tailwind exposes colours as CSS variables, so you must use the --color- prefix .

In css file

@import "tailwindcss";
@theme {
  --color-custom-yellow-500: #EDAE0A;
}

Using the Custom Colour in a React

function MyComponent() {
  return (
    <div className="bg-custom-yellow-500">
      Custom Yellow Background
    </div>
  );
}

For more details, visit the Official Docs