V2? Coming soon! New components and lots of improvements.

Powerful suite of Blade components for TALL Stack apps.

Colors

The colors personalization.

All TallStackUI components are based on three custom colors: primary, secondary and dark. Additionally, all other colors are the original TailwindCSS colors. You can customize the primary, secondary, and colors to your liking by following the TailwindCSS custom color concept.

If you are looking for how to create custom colors, use this guide.

1. Open the TailwindCSS configuration file and enter the following content:

theme: {
extend: {
// ...
 
colors: {
'primary': {
DEFAULT: '#acf73b',
'50': '#f7ffe5',
'100': '#edffc7',
'200': '#daff95',
'300': '#beff57',
'400': '#acf73b',
'500': '#83dd05',
'600': '#63b100',
'700': '#4b8605',
'800': '#3e690b',
'900': '#34590e',
'950': '#193201',
},
'secondary': {
DEFAULT: '#b5b5b5',
'50': '#f7f7f7',
'100': '#ededed',
'200': '#dfdfdf',
'300': '#c8c8c8',
'400': '#b5b5b5',
'500': '#999999',
'600': '#888888',
'700': '#7b7b7b',
'800': '#676767',
'900': '#545454',
'950': '#363636',
},
'dark': {
DEFAULT: '#3f4d69',
'50': '#f6f7f9',
'100': '#ebeef3',
'200': '#d3d9e4',
'300': '#acb8cd',
'400': '#7f92b1',
'500': '#5f7498',
'600': '#4b5d7e',
'700': '#3f4d69',
'800': '#364156',
'900': '#30384a',
'950': '#202531',
}
}
},
},

Replace the hexadecimal values above with your desired colors.

2. Rebuild your assets:

npm run build && php artisan optimize:clear

Code highlighting provided by Torchlight