Color Swatch

You can easily customize the color palette of your TailAdmin project by modifying the tailwind.config.js file. TailAdmin comes with a variety of pre-defined color swatches that you can directly use or customize according to your needs.

Here are some default color categories:

brand

#F2F7FF

#ECF3FF

#DDE9FF

#C2D6FF

#9CB9FF

#7592FF

#465FFF

#3641F5

#2A31D8

#252DAE

#262E89

#161950

blue light

#F5FBFF

#F0F9FF

#E0F2FE

#B9E6FE

#7CD4FD

#36BFFA

#0BA5EC

#0086C9

#026AA2

#065986

#0B4A6F

#062C41

gray

#FCFCFD

#F9FAFB

#F2F4F7

#E4E7EC

#D0D5DD

#98A2B3

#667085

#475467

#344054

#1D2939

#101828

#0C111D

#1A2231

orange

#FFFAF5

#FFF6ED

#FFEAD5

#FDDCAB

#FEB273

#FD853A

#FB6514

#EC4A0A

#C4320A

#9C2A10

#7E2410

#511C10

success

#F6FEF9

#ECFDF3

#D1FADF

#A6F4C5

#6CE9A6

#32D583

#12B76A

#039855

#027A48

#05603A

#054F31

#053321

error

#FFFBFA

#FEF3F2

#FEE4E2

#FECDCA

#FDA29B

#F97066

#F04438

#D92D20

#B42318

#912018

#7A271A

#55160C

warning

#FFFCF5

#FFFAEB

#FEF0C7

#FEDF89

#FEC84B

#FDB022

#F79009

#DC6803

#B54708

#93370D

#7A2E0E

#4E1D09

theme pink

#EE46BC

theme purple

#7A5AF8

Customizing Colors

You can easily customize your TailAdmin color palette by editing the tailwind.config.js file. Here’s how to do it:

Add Custom Colors: Inside the theme object, use the colors key to define custom colors.
Example Configuration:

module.exports = {
  theme: {
    colors: {
      current: "currentColor",
      transparent: "transparent",
      white: "#FFFFFF",
      black: "#101828",
      brand: {
        25: "#F2F7FF",
        50: "#ECF3FF",
        100: "#DDE9FF",
        200: "#C2D6FF",
        300: "#9CB9FF",
        400: "#7592FF",
        500: "#465FFF",
        600: "#3641F5",
        700: "#2A31D8",
        800: "#252DAE",
        900: "#262E89",
        950: "#161950",
      },
      "blue-light": {
        25: "#F5FBFF",
        50: "#F0F9FF",
        100: "#E0F2FE",
        200: "#B9E6FE",
        300: "#7CD4FD",
        400: "#36BFFA",
        500: "#0BA5EC",
        600: "#0086C9",
        700: "#026AA2",
        800: "#065986",
        900: "#0B4A6F",
        950: "#062C41",
      },
      gray: {
        dark: "#1A2231",
        25: "#FCFCFD",
        50: "#F9FAFB",
        100: "#F2F4F7",
        200: "#E4E7EC",
        300: "#D0D5DD",
        400: "#98A2B3",
        500: "#667085",
        600: "#475467",
        700: "#344054",
        800: "#1D2939",
        900: "#101828",
        950: "#0C111D",
      },
      orange: {
        25: "#FFFAF5",
        50: "#FFF6ED",
        100: "#FFEAD5",
        200: "#FDDCAB",
        300: "#FEB273",
        400: "#FD853A",
        500: "#FB6514",
        600: "#EC4A0A",
        700: "#C4320A",
        800: "#9C2A10",
        900: "#7E2410",
        950: "#511C10",
      },
      success: {
        25: "#F6FEF9",
        50: "#ECFDF3",
        100: "#D1FADF",
        200: "#A6F4C5",
        300: "#6CE9A6",
        400: "#32D583",
        500: "#12B76A",
        600: "#039855",
        700: "#027A48",
        800: "#05603A",
        900: "#054F31",
        950: "#053321",
      },
      error: {
        25: "#FFFBFA",
        50: "#FEF3F2",
        100: "#FEE4E2",
        200: "#FECDCA",
        300: "#FDA29B",
        400: "#F97066",
        500: "#F04438",
        600: "#D92D20",
        700: "#B42318",
        800: "#912018",
        900: "#7A271A",
        950: "#55160C",
      },
      warning: {
        25: "#FFFCF5",
        50: "#FFFAEB",
        100: "#FEF0C7",
        200: "#FEDF89",
        300: "#FEC84B",
        400: "#FDB022",
        500: "#F79009",
        600: "#DC6803",
        700: "#B54708",
        800: "#93370D",
        900: "#7A2E0E",
        950: "#4E1D09",
      },
      "theme-pink": {
        500: "#EE46BC",
      },
      "theme-purple": {
        500: "#7A5AF8",
      },
    },
  },
};

This structure allows you to define your project’s colors and makes it easy to use them throughout your components. Simply use the color values in your classes like so:

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

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

Dark Mode Spacing