chore: lint tailwind variant classes

.prettierrc

@@ -4,6 +4,7 @@
 	"trailingComma": "all",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"tailwindFunctions": ["tv"],
 	"overrides": [
 		{
 			"files": "*.svelte",

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"tailwindCSS.experimental.classRegex": [
+		["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
+	]
+}

src/lib/components/Avatar/Avatar.svelte

@@ -24,11 +24,11 @@
 		base: 'flex h-full w-full select-none items-center justify-center font-medium',
 		variants: {
 			size: {
-				tiny: 'w-5 h-5 text-xs',
-				small: 'w-7 h-7 text-sm',
-				medium: 'w-10 h-10 text-md',
-				large: 'w-12 h-12 text-lg',
-				giant: 'w-16 h-16 text-xl',
+				tiny: 'h-5 w-5 text-xs',
+				small: 'h-7 w-7 text-sm',
+				medium: 'text-md h-10 w-10',
+				large: 'h-12 w-12 text-lg',
+				giant: 'h-16 w-16 text-xl',
 			},
 			color: {
 				primary: 'bg-primary text-light',
@@ -46,7 +46,7 @@
 	});
 
 	const wrapper = tv({
-		base: 'overflow-hidden shadow-md rounded rounded-full',
+		base: 'overflow-hidden rounded-full shadow-md',
 	});
 
 	const getInitials = (name: string) => {

src/lib/components/Card/Card.svelte

@@ -44,11 +44,11 @@
 	});
 
 	const cardStyles = tv({
-		base: 'flex flex-col w-full h-full',
+		base: 'flex h-full w-full flex-col',
 		variants: {
 			color: {
 				primary: 'bg-primary/25 dark:bg-primary/25',
-				secondary: 'bg-dark/5 dark:bg-dark/25 text-dark',
+				secondary: 'bg-dark/5 text-dark dark:bg-dark/25',
 				success: 'bg-success/15 dark:bg-success/30',
 				danger: 'bg-danger/15 dark:bg-danger/50',
 				warning: 'bg-warning/25 dark:bg-warning/50',

src/lib/components/Code/Code.svelte

@@ -32,7 +32,7 @@
 
 			filledColor: {
 				false: '',
-				muted: 'bg-gray-600 dark:bg-gray-800 text-light',
+				muted: 'bg-gray-600 text-light dark:bg-gray-800',
 				primary: 'bg-primary text-light',
 				secondary: 'bg-dark text-light',
 				success: 'bg-success text-light',

src/lib/components/Form/Checkbox.svelte

@@ -32,7 +32,7 @@
 	} = $derived(getFieldContext());
 
 	const containerStyles = tv({
-		base: 'border-2 ring-offset-background focus-visible:ring-ring peer box-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50 overflow-hidden',
+		base: 'ring-offset-background focus-visible:ring-ring peer box-content overflow-hidden border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',

src/lib/components/Form/Input.svelte

@@ -36,7 +36,7 @@
 	});
 
 	const inputStyles = tv({
-		base: 'w-full outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75',
+		base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-200 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:aria-readonly:text-dark/75',
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',

src/lib/components/Modal/Modal.svelte

@@ -32,7 +32,7 @@
 	}: Props = $props();
 
 	const modalStyles = tv({
-		base: 'flex  rounded-none border border-subtle bg-subtle  sm:rounded-2xl',
+		base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl',
 		variants: {
 			size: {
 				tiny: 'h-full sm:h-min md:max-w-64',

src/lib/components/Navbar/NavbarItem.svelte

@@ -12,7 +12,7 @@
 	let { href, title, active = false, ...iconProps }: Props = $props();
 
 	const styles = tv({
-		base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 pl-5 group-hover:sm:px-5 md:px-5',
+		base: 'flex w-full place-items-center gap-4 rounded-r-full py-3 pl-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:px-5',
 		variants: {
 			active: {
 				true: 'bg-primary/10 text-primary',

src/lib/components/SupporterBadge/SupporterBadge.svelte

@@ -24,7 +24,7 @@
 	};
 
 	const containerStyles = tv({
-		base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg  transition-all',
+		base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all',
 		variants: {
 			size: {
 				tiny: 'px-2 py-1',
@@ -34,8 +34,8 @@
 				giant: 'px-3 py-2',
 			},
 			effect: {
-				hover: 'border border-dark/25 supporter-effect-hover',
-				always: 'shadow supporter-effect',
+				hover: 'supporter-effect-hover border border-dark/25',
+				always: 'supporter-effect shadow',
 			},
 		},
 	});

src/lib/components/Switch/Switch.svelte

@@ -43,7 +43,7 @@
 	});
 
 	const bar = tv({
-		base: 'w-12 h-3 my-2 rounded-full border border-transparent',
+		base: 'my-2 h-3 w-12 rounded-full border border-transparent',
 		variants: {
 			fillColor: {
 				default: 'bg-gray-400',
@@ -58,7 +58,7 @@
 	});
 
 	const dot = tv({
-		base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]',
+		base: 'absolute h-6 w-6 rounded-full transition-transform duration-[400ms]',
 		variants: {
 			checked: {
 				true: 'translate-x-6',