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.

# Personalizing Colors

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