get prettier-tailwind working

.prettierrc

@@ -4,6 +4,6 @@
     "singleQuote": true,
     "trailingComma": "none",
     "printWidth": 100,
-    "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"],
+    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package.json

@@ -68,7 +68,7 @@
         "postcss": "^8.4.39",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.5",
-        "prettier-plugin-tailwindcss": "^0.6.5",
+        "prettier-plugin-tailwindcss": "^0.6.6",
         "remeda": "^2.10.0",
         "sass": "^1.77.6",
         "svelte": "^4.2.18",

pnpm-lock.yaml

@@ -139,8 +139,8 @@ importers:
         specifier: ^3.2.5
         version: 3.2.6(prettier@3.3.3)(svelte@4.2.18)
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.5
-        version: 0.6.5(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3)
+        specifier: ^0.6.6
+        version: 0.6.6(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3)
       remeda:
         specifier: ^2.10.0
         version: 2.10.0
@@ -3452,8 +3452,8 @@ packages:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
 
-  prettier-plugin-tailwindcss@0.6.5:
-    resolution: {integrity: sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==}
+  prettier-plugin-tailwindcss@0.6.6:
+    resolution: {integrity: sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
@@ -3467,6 +3467,7 @@ packages:
       prettier-plugin-import-sort: '*'
       prettier-plugin-jsdoc: '*'
       prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
       prettier-plugin-organize-attributes: '*'
       prettier-plugin-organize-imports: '*'
       prettier-plugin-sort-imports: '*'
@@ -3493,6 +3494,8 @@ packages:
         optional: true
       prettier-plugin-marko:
         optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
       prettier-plugin-organize-attributes:
         optional: true
       prettier-plugin-organize-imports:
@@ -7925,7 +7928,7 @@ snapshots:
       prettier: 3.3.3
       svelte: 4.2.18
 
-  prettier-plugin-tailwindcss@0.6.5(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3):
+  prettier-plugin-tailwindcss@0.6.6(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3):
     dependencies:
       prettier: 3.3.3
     optionalDependencies:

src/lib/components/ui/Badge.svelte

@@ -9,7 +9,7 @@
 
 <span
     class={classNames(
-        'badge text-xs self-start uppercase font-aeonik-fono text-white py-[0.375rem] px-3 rounded-[0.375rem] backdrop-blur-2xl',
+        'badge font-aeonik-fono self-start rounded-[0.375rem] py-[0.375rem] px-3 text-xs uppercase text-white backdrop-blur-2xl',
         classes
     )}
     {...props}

src/lib/components/ui/Button.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-    import { classNames } from '$lib/utils/classnames';
-    import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
-    import { cva, type VariantProps } from 'cva';
+import { classNames } from '$lib/utils/classnames';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+import { cva, type VariantProps } from 'cva';
+import InlineTag from './InlineTag.svelte';
 
-    const button = cva(
+const button = cva(
     [
-            'flex w-fit justify-center text-center no-underline select-none min-w-10 bg-origin-border text-white font-medium items-center gap-2 rounded-lg border border-transparent button duration-200'
+        'flex w-fit justify-center px-[0.875rem] h-10 transition-all text-center no-underline select-none min-w-10 bg-origin-border text-white font-medium items-center gap-2 rounded-lg border border-transparent button duration-200'
     ],
     {
         variants: {
             variant: {
                 primary: [
-                        'px-[0.875rem] py-[0.4375rem] bg-[linear-gradient(135deg,_var(--color-accent)_0%,_var(--color-accent)_61%,_var(--color-secondary-100)_100%)]',
+                    'bg-[linear-gradient(135deg,_var(--color-accent)_0%,_var(--color-accent)_61%,_var(--color-secondary-100)_100%)]',
                     'hover:shadow-[0_0_2rem_var(--color-accent-200)] active:not:disabled:shadow-[0_0_2rem_var(--color-accent-200)]'
                 ],
                 secondary: [
@@ -19,38 +20,52 @@
                     'hover:shadow-[0_-6px_10px_0px_rgba(253,54,110,0.08)_inset]'
                 ],
                 text: [
-                        'bg-transparent border-transparent',
+                    'bg-transparent border-transparent text-white',
                     'hover:backdrop-blur-md hover:bg-[linear-gradient(135deg,_rgba(255,_255,_255,_0.06)_0%,_rgba(255,_255,_255,_0.10)_54.74%,_rgba(255,_255,_255,_0.06)_100%)]'
                 ]
             }
         }
     }
-    );
+);
 
-    type ButtonProps =
+type ButtonProps =
     | (HTMLButtonAttributes & { href?: undefined })
     | (HTMLAnchorAttributes & { href: string });
 
-    type $$Props = ButtonProps & VariantProps<typeof button>;
+type $$Props = ButtonProps & VariantProps<typeof button>;
 
-    export let href: $$Props['href'] = undefined;
-    export let variant: $$Props['variant'] = 'primary';
-    const { class: classes, ...props } = $$restProps;
+export let href: $$Props['href'] = undefined;
+export let variant: $$Props['variant'] = 'primary';
+const { class: classes, ...props } = $$restProps;
 
-    const buttonClasses = classNames(button({ variant }), classes, {
+const buttonClasses = classNames(button({ variant }), classes, {
     secondary: variant === 'secondary',
     'leading-tight': $$slots.icon
-    });
+});
 </script>
 
 {#if href}
-    <a {...props} {href} class={buttonClasses}>
+    <a {...props} href={href} class={buttonClasses}>
+        {#if $$slots.icon}
             <slot name="icon" />
+        {/if}
         <slot />
+        {#if $$slots.tag}
+            <InlineTag>
+                <slot name="tag" />
+            </InlineTag>
+        {/if}
     </a>
 {:else}
     <button {...props} class={buttonClasses}>
+        {#if $$slots.icon}
             <slot name="icon" />
+        {/if}
         <slot />
+        {#if $$slots.tag}
+            <InlineTag>
+                <slot name="tag" />
+            </InlineTag>
+        {/if}
     </button>
 {/if}

src/lib/components/ui/InlineTag.svelte

@@ -0,0 +1,5 @@
+<div
+    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/[0.08] px-1 dark:bg-white/[0.12]"
+>
+    <slot />
+</div>