Customization SCSS

Customization

Skote has managed the scss file in the html( skote_v*/assets/scss ) folder and in the laravel( skote_v*/resources/scss ) folder. We have used gulp-sass for scss compilation. You can add your custom scss in the custom.scss file instead of doing changes in the app.scss or other scss files as it will create conflicts in future updates.

Change Color Palette

tailwind.config.js

blue: {
    50: '#eff2f7',
    100: '#dbe0fa',
    200: '#bcc6f5',
    300: '#99a7f0',
    400: '#7589eb',
    500: '#556ee6',
    600: '#485ec4',
    700: '#1830a5',
    800: '#10206f',
    900: '#080f35',
    950: '#04081b',
},
gray: {
    50: '#f6f7f8',
    100: '#f8f9fa',
    200: '#eff2f7',
    300: '#eff2f7',
    400: '#ced4da',
    500: '#adb5bd',
    600: '#74788d',
    700: '#495057',
    800: '#343a40',
    900: '#212529',
    950: '#323439',
},
green: {
    50: '#ebfaf4',
    100: '#d7f4e9',
    200: '#aae8d2',
    300: '#82debc',
    400: '#5ad3a7',
    500: '#34c38f',
    600: '#2a9d73',
    700: '#1f7555',
    800: '#144d38',
    900: '#0b281d',
    950: '#05140f',
},
sky: {
    50: '#ecf5fd',
    100: '#deeefc',
    200: '#b8dbf9',
    300: '#97caf7',
    400: '#71b7f4',
    500: '#50a5f1',
    600: '#1387ec',
    700: '#0e66b3',
    800: '#094376',
    900: '#05233d',
    950: '#02101c',
},
yellow: {
    50: '#fef7ec',
    100: '#fcefd9',
    200: '#f9e1b8',
    300: '#f6d292',
    400: '#f4c471',
    500: '#f1b44c',
    600: '#ed9d12',
    700: '#af740e',
    800: '#764e09',
    900: '#392604',
    950: '#1c1302',
},
red: {
    50: '#fef1f1',
    100: '#fde2e2',
    200: '#fac1c1',
    300: '#f8a5a5',
    400: '#f68888',
    500: '#f46a6a',
    600: '#ef2929',
    700: '#c30e0e',
    800: '#800909',
    900: '#430505',
    950: '#210202',
},
dark: {
    50: '#e8ebed',
    100: '#d5d9dd',
    200: '#a8b0b8',
    300: '#7e8a96',
    400: '#57616b',
    500: '#343a40',
    600: '#292e33',
    700: '#202427',
    800: '#151719',
    900: '#0b0d0e',
    950: '#050506',
},
zink:{
    50: '#32394e',
    200: '#c3cbe4',
    300: '#353d55',
    700: '#2a3042',
    800: '#222736',
}
Change Font Family

tailwind.config.js

fontFamily: {
    'poppins': ['"Poppins", sans-serif'],
    'material': ['Material Design Icons']
},
© Skote.