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')]
};