tailwind.config.js

/** @type {import('tailwindcss').Config} */
const {iconsPlugin, getIconCollections} = require('@egoist/tailwindcss-icons');

module.exports = {
    content: [
        './components/**/*.{vue,js,ts}',
        './blocks/**/*.{vue,js,ts}',
        './app.vue',
    ],
    theme: {
        extend: {
            spacing: {
                "input-radius": "var(--input-radius)",
                "input-padding-x": "var(--input-padding-x)",
                "input-padding-y": "var(--input-padding-y)",
                "button-radius": "var(--button-radius)",
                "button-padding-x": "var(--button-padding-x)",
                "button-padding-y": "var(--button-padding-y)"
            },
            colors: {
                background: '#FFFFFF',
                foreground: '#000000',
                primary: {
                    DEFAULT: '#253f58',
                    50: '#f3f5f7',
                    100: '#d8dde2',
                    200: '#bdc4cd',
                    300: '#a2abb8',
                    400: '#8792a3',
                    500: '#6c798e',
                    600: '#56607a',
                    700: '#424966',
                    800: '#2c3152',
                    900: '#161a3e',
                    950: '#00071b',
                },
                secondary: {
                    DEFAULT: '#ff611e',
                    50: '#ffefd9',
                    100: '#ffd0a9',
                    200: '#ffa87d',
                    300: '#ff843d',
                    400: '#ff611e',
                    500: '#e34b07',
                    600: '#c63a06',
                    700: '#a12e06',
                    800: '#802505',
                    900: '#681d04',
                    950: '#360f02',
                },
                green: {
                    DEFAULT: '#6BDBBB',
                    50: '#edfcf7',
                    100: '#d4f7e9',
                    200: '#adedd7',
                    300: '#6bdbbb',
                    400: '#40c7a5',
                    500: '#1dac8d',
                    600: '#108b73',
                    700: '#0d6f5e',
                    800: '#0d584b',
                    900: '#0b493f',
                    950: '#052924',
                },
                red: {
                    DEFAULT: '#DC125B',
                    50: '#fff0f3',
                    100: '#ffe3e9',
                    200: '#ffcbd8',
                    300: '#ffa0b9',
                    400: '#ff6a95',
                    500: '#fd3674',
                    600: '#dc125b',
                    700: '#c70953',
                    800: '#a60b4c',
                    900: '#8e0d47',
                    950: '#500122',
                },
                yellow: {
                    DEFAULT: '#DBA16B',
                    50: '#fcf7f0',
                    100: '#f7eddd',
                    200: '#efd8b9',
                    300: '#e4bc8d',
                    400: '#dba16b',
                    500: '#cf7f40',
                    600: '#c16935',
                    700: '#a1532d',
                    800: '#81432b',
                    900: '#693925',
                    950: '#381b12',
                },
            },
        },
    },
    plugins: [
        iconsPlugin({
            // Select the icon collections you want to use
            collections: getIconCollections(['bi']),
        }),
    ],
}