Custom pallette with tailwind css v4

[abdulazizkhatamov]

How do I use my own custom color palette with tailwind css v4 ?

When I copied accent color in custom pallette generator, I got this, but i am confused how can I use it properly in my react app with tailwind css v4 ?

.dark,
.dark-theme {
  --orange-1: #000;
  --orange-2: #170f0a;
  --orange-3: #2f1a0d;
  --orange-4: #451d02;
  --orange-5: #542708;
  --orange-6: #643518;
  --orange-7: #7b4626;
  --orange-8: #9f5a31;
  --orange-9: #e56e0c;
  --orange-10: #d76200;
  --orange-11: #ff9f60;
  --orange-12: #ffddca;

  --orange-a1: #00000000;
  --orange-a2: #ffa76f17;
  --orange-a3: #ff8e472f;
  --orange-a4: #ff6c0845;
  --orange-a5: #ff771954;
  --orange-a6: #ff883e64;
  --orange-a7: #ff924f7b;
  --orange-a8: #ff914f9f;
  --orange-a9: #ff7b0de5;
  --orange-a10: #ff7400d7;
  --orange-a11: #ff9f60;
  --orange-a12: #ffddca;

  --orange-contrast: #fff;
  --orange-surface: #2e1e1480;
  --orange-indicator: #e56e0c;
  --orange-track: #e56e0c;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark,
    .dark-theme {
      --orange-1: oklch(0% 0.0106 50.3);
      --orange-2: oklch(17.8% 0.017 50.3);
      --orange-3: oklch(24.2% 0.041 50.3);
      --orange-4: oklch(28.5% 0.0717 50.3);
      --orange-5: oklch(33% 0.0783 50.3);
      --orange-6: oklch(38.4% 0.0789 50.3);
      --orange-7: oklch(45.2% 0.0861 50.3);
      --orange-8: oklch(54% 0.1057 50.3);
      --orange-9: oklch(66.9% 0.1728 50.3);
      --orange-10: oklch(62.9% 0.1728 50.3);
      --orange-11: oklch(79.8% 0.1473 50.3);
      --orange-12: oklch(92.3% 0.0466 50.3);

      --orange-a1: color(display-p3 0 0 0 / 0);
      --orange-a2: color(display-p3 0.9922 0.6784 0.498 / 0.087);
      --orange-a3: color(display-p3 1 0.6157 0.3412 / 0.173);
      --orange-a4: color(display-p3 1 0.4863 0.1255 / 0.251);
      --orange-a5: color(display-p3 1 0.5255 0.2078 / 0.306);
      --orange-a6: color(display-p3 1 0.5882 0.3216 / 0.369);
      --orange-a7: color(display-p3 1 0.6314 0.3804 / 0.455);
      --orange-a8: color(display-p3 1 0.6196 0.3804 / 0.589);
      --orange-a9: color(display-p3 1 0.5451 0.2196 / 0.84);
      --orange-a10: color(display-p3 1 0.5255 0.1961 / 0.785);
      --orange-a11: color(display-p3 1 0.6745 0.4471 / 0.95);
      --orange-a12: color(display-p3 1 0.8902 0.8235 / 0.977);

      --orange-contrast: #fff;
      --orange-surface: color(display-p3 0.1725 0.1176 0.0863 / 0.5);
      --orange-indicator: oklch(66.9% 0.1728 50.3);
      --orange-track: oklch(66.9% 0.1728 50.3);
    }
  }
}

[seonghyeonkimm]

@abdulazizkhatamov If you want to override default radix theme css variables. you can just copy custom color palette into your css file. You can refer to the documentation for more detail information.

In terms of tailwindcss v4, I think you should paste the same css variables into @theme block inside. You can also refer to the documentation.