Color Swatch

You can easily customize the color palette of your TailAdmin project by modifying the css file @theme. TailAdmin comes with pre-defined brand colors, extending default Tailwind Colors that you can directly use or customize according to your needs.

Default Brand Color Preview:

Brand

50rgba(236, 243, 255, 1)

100rgba(221, 233, 255, 1)

200rgba(194, 214, 255, 1)

300rgba(156, 185, 255, 1)

400rgba(117, 146, 255, 1)

500rgba(70, 95, 255, 1)

600rgba(54, 65, 245, 1)

700rgba(42, 49, 216, 1)

800rgba(37, 45, 174, 1)

900rgba(38, 46, 137, 1)

950rgba(22, 25, 80, 1)

Customizing Colors

You can easily customize your TailAdmin color palette by editing the css file following Tailwind Color Customization guide.

Example

Add Custom Colors: Inside the theme object, use --color-your-color-name format to add a new color.


@theme {
  --color-blue-light-500: #0ba5ec;
}

Use the new color in your components:


<div class="bg-blue-light-500 text-white">
  Custom color background with text
</div>

Feel free to adjust the color palette to suit your brand or design preferences.