CSS Variables & TW Config

index.css

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 200 15% 95%; /* Light neutral slate */
		--foreground: 200 20% 20%; /* Dark slate */
		--muted: 200 15% 90%; /* Lighter neutral slate */
		--muted-foreground: 200 15% 60%; /* Medium slate */
		--border: 200 10% 80%; /* Very light slate */
		--input: 200 10% 98%; /* Even lighter slate */
		--card: 0 0% 100%; /* White */
		--card-foreground: 200 20% 15%; /* Very dark slate */
		--primary: 30 100% 50%; /* Exciting orange */
		--primary-foreground: 0 0% 100%; /* White */
		--secondary: 200 15% 80%; /* Light slate */
		--secondary-foreground: 200 20% 20%; /* Dark slate */
		--accent: 190 100% 50%; /* Inviting turquoise */
		--accent-foreground: 0 0% 100%; /* White */
		--ring: 200 15% 70%; /* Medium-light slate */
		--error: 0 100% 50%; /* Red */
		--error-foreground: 0 0% 100%; /* White */
		--success: 120 50% 50%; /* Green */
		--success-foreground: 0 0% 100%; /* White */
	}
	.dark {
		--background: 200 20% 15%; /* Dark slate */
		--foreground: 200 15% 90%; /* Light neutral slate */
		--muted: 200 15% 60%; /* Medium slate */
		--muted-foreground: 200 15% 80%; /* Lighter neutral slate */
		--border: 200 10% 40%; /* Medium-dark slate */
		--input: 200 10% 35%; /* Medium-dark slate */
		--card: 200 20% 20%; /* Very dark slate */
		--card-foreground: 200 15% 85%; /* Light neutral slate */
		--primary: 30 100% 50%; /* Exciting orange */
		--primary-foreground: 0 0% 100%; /* White */
		--secondary: 200 15% 60%; /* Medium slate */
		--secondary-foreground: 200 15% 95%; /* Light neutral slate */
		--accent: 190 100% 50%; /* Inviting turquoise */
		--accent-foreground: 0 0% 100%; /* White */
		--ring: 200 15% 50%; /* Medium-dark slate */
		--error: 0 100% 50%; /* Red */
		--error-foreground: 0 0% 100%; /* White */
		--success: 120 50% 50%; /* Green */
		--success-foreground: 0 0% 100%; /* White */
	}
}

@layer base {
	* {
		box-sizing: border-box;
	}

	html {
		@apply h-screen;
	}

	body {
		@apply bg-background text-foreground h-screen transition-colors duration-200 ease-in-out;
	}
}

tailwind.config.cjs

import { fontFamily } from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config}*/
module.exports = {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	darkMode: ['class'],

	theme: {
		container: {
			center: true,
			padding: '2rem',
			screens: {
				'2xl': '1440px'
			}
		},
		extend: {
			colors: {
				border: 'hsl(var(--border))',
				input: 'hsl(var(--input))',
				ring: 'hsl(var(--ring))',
				background: 'hsl(var(--background))',
				foreground: 'hsl(var(--foreground))',
				primary: {
					DEFAULT: 'hsl(var(--primary))',
					foreground: 'hsl(var(--primary-foreground))'
				},
				brand: {
					DEFAULT: 'hsl(var(--primary))',
					foreground: 'hsl(var(--primary-foreground))'
				},
				secondary: {
					DEFAULT: 'hsl(var(--secondary))',
					foreground: 'hsl(var(--secondary-foreground))'
				},
				accent: {
					DEFAULT: 'hsl(var(--accent))',
					foreground: 'hsl(var(--accent-foreground))'
				},
				card: {
					DEFAULT: 'hsl(var(--card))',
					foreground: 'hsl(var(--card-foreground))'
				},
				muted: {
					DEFAULT: 'hsl(var(--muted))',
					foreground: 'hsl(var(--muted-foreground))'
				},
				error: {
					DEFAULT: 'hsl(var(--error))',
					foreground: 'hsl(var(--error-foreground))'
				},
				success: {
					DEFAULT: 'hsl(var(--success))',
					foreground: 'hsl(var(--success-foreground))'
				}
			},
			fontFamily: {
				sans: ['Poppins', ...fontFamily.sans]
			}
		}
	},

	plugins: [require('tailwindcss-animate')]
};