Color Swatch
You can easily customize the color palette of your TailAdmin project by modifying the css file @theme. 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
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
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
Customizing Colors
You can easily customize your TailAdmin color palette by editing the css file. Here’s how to do it:
- Add Custom Colors: Inside the theme object, use the colors key to define custom colors.
- Example Configuration:
@theme {
--color-current: currentColor;
--color-transparent: transparent;
--color-white: #ffffff;
--color-black: #101828;
--color-brand-25: #f2f7ff;
--color-brand-50: #ecf3ff;
--color-brand-100: #dde9ff;
--color-brand-200: #c2d6ff;
--color-brand-300: #9cb9ff;
--color-brand-400: #7592ff;
--color-brand-500: #465fff;
--color-brand-600: #3641f5;
--color-brand-700: #2a31d8;
--color-brand-800: #252dae;
--color-brand-900: #262e89;
--color-brand-950: #161950;
--color-blue-light-25: #f5fbff;
--color-blue-light-50: #f0f9ff;
--color-blue-light-100: #e0f2fe;
--color-blue-light-200: #b9e6fe;
--color-blue-light-300: #7cd4fd;
--color-blue-light-400: #36bffa;
--color-blue-light-500: #0ba5ec;
--color-blue-light-600: #0086c9;
--color-blue-light-700: #026aa2;
--color-blue-light-800: #065986;
--color-blue-light-900: #0b4a6f;
--color-blue-light-950: #062c41;
--color-gray-25: #fcfcfd;
--color-gray-50: #f9fafb;
--color-gray-100: #f2f4f7;
--color-gray-200: #e4e7ec;
--color-gray-300: #d0d5dd;
--color-gray-400: #98a2b3;
--color-gray-500: #667085;
--color-gray-600: #475467;
--color-gray-700: #344054;
--color-gray-800: #1d2939;
--color-gray-900: #101828;
--color-gray-950: #0c111d;
--color-gray-dark: #1a2231;
--color-orange-25: #fffaf5;
--color-orange-50: #fff6ed;
--color-orange-100: #ffead5;
--color-orange-200: #fddcab;
--color-orange-300: #feb273;
--color-orange-400: #fd853a;
--color-orange-500: #fb6514;
--color-orange-600: #ec4a0a;
--color-orange-700: #c4320a;
--color-orange-800: #9c2a10;
--color-orange-900: #7e2410;
--color-orange-950: #511c10;
--color-success-25: #f6fef9;
--color-success-50: #ecfdf3;
--color-success-100: #d1fadf;
--color-success-200: #a6f4c5;
--color-success-300: #6ce9a6;
--color-success-400: #32d583;
--color-success-500: #12b76a;
--color-success-600: #039855;
--color-success-700: #027a48;
--color-success-800: #05603a;
--color-success-900: #054f31;
--color-success-950: #053321;
--color-error-25: #fffbfa;
--color-error-50: #fef3f2;
--color-error-100: #fee4e2;
--color-error-200: #fecdca;
--color-error-300: #fda29b;
--color-error-400: #f97066;
--color-error-500: #f04438;
--color-error-600: #d92d20;
--color-error-700: #b42318;
--color-error-800: #912018;
--color-error-900: #7a271a;
--color-error-950: #55160c;
--color-warning-25: #fffcf5;
--color-warning-50: #fffaeb;
--color-warning-100: #fef0c7;
--color-warning-200: #fedf89;
--color-warning-300: #fec84b;
--color-warning-400: #fdb022;
--color-warning-500: #f79009;
--color-warning-600: #dc6803;
--color-warning-700: #b54708;
--color-warning-800: #93370d;
--color-warning-900: #7a2e0e;
--color-warning-950: #4e1d09;
--color-theme-pink-500: #ee46bc;
--color-theme-purple-500: #7a5af8;
/* --- other theme configs -- */
}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.