Sveh UI

Svelte component powered by tailwind css, for my personal project only.

Requirement

Please install following libs:

• Tailwind 3
• Tailwind Form

Tailwind Config

Add content, extend colors theme and plugin

module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#edf4fc',
                    100: '#dbe9f9',
                    200: '#b7d3f3',
                    300: '#92bcee',
                    400: '#80b1eb',
                    500: '#5c9be5',
                    600: '#4a90e2',
                    700: '#4382cb',
                    800: '#3b73b5',
                    900: '#34659e'
                },
                secondary: {
                    50: '#f6fafe',
                    100: '#edf4fc',
                    200: '#dbe9f9',
                    300: '#c9def7',
                    400: '#b7d3f4',
                    500: '#aecef2',
                    600: '#a5c8f1',
                    700: '#95b4d9',
                    800: '#84a0c1',
                    900: '#637891'
                },
                success: {
                    50: '#eaf3ec',
                    100: '#d5e7d9',
                    200: '#abceb3',
                    300: '#82b68c',
                    400: '#589d66',
                    500: '#2e8540',
                    600: '#439153',
                    700: '#2e8540',
                    800: '#29783a',
                    900: '#205d2d'
                },
                error: {
                    50: '#fce8ec',
                    100: '#f9d2d8',
                    200: '#f7bbc5',
                    300: '#f18e9e',
                    400: '#eb6077',
                    500: '#e63350',
                    600: '#e31c3d',
                    700: '#cc1937',
                    800: '#b61631',
                    900: '#881125'
                },
                info: {
                    50: '#fbfbfb',
                    100: '#f7f7f7',
                    200: '#f4f4f4',
                    300: '#f0f0f0',
                    400: '#e8e8e8',
                    500: '#e4e4e4',
                    600: '#e1e1e1',
                    700: '#d9d9d9',
                    800: '#c3c3c3',
                    900: '#828282'
                },
                warning: {
                    50: '#fef9ec',
                    100: '#fef4d9',
                    200: '#fde8b3',
                    300: '#fbdd8e',
                    400: '#fad168',
                    500: '#facc55',
                    600: '#f9c642',
                    700: '#e0b23b',
                    800: '#957728',
                    900: '#7d6321'
                }
            }
        }
    },
    plugins: [require('@tailwindcss/forms')]
};