Differentiate Tailwind CSS groups by naming them

fabian-hiller · Dec 31, 2024 · 5d3a7b4 · 5d3a7b4
1 parent 46b8943
commit 5d3a7b4
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 11 deletions.
diff --git a/website/src/components/IconButton.tsx b/website/src/components/IconButton.tsx
@@ -18,7 +18,7 @@ export const IconButton = component$<IconButtonProps>(
     <UnstyledButton
       {...props}
       class={clsx(
-        'focus-ring group flex items-center rounded-xl backdrop-blur',
+        'focus-ring group/button flex items-center rounded-xl backdrop-blur',
         align === 'right' && 'flex-row-reverse',
         props.class
       )}
@@ -28,17 +28,17 @@ export const IconButton = component$<IconButtonProps>(
         class={clsx(
           'flex h-10 w-10 items-center justify-center rounded-xl transition-colors',
           variant === 'primary' &&
-            'bg-sky-600 text-white group-hover:bg-sky-600/80 dark:bg-sky-400 dark:text-gray-900 dark:group-hover:bg-sky-400/80',
+            'bg-sky-600 text-white group-hover/button:bg-sky-600/80 dark:bg-sky-400 dark:text-gray-900 dark:group-hover/button:bg-sky-400/80',
           variant === 'secondary' &&
-            'bg-sky-600/10 text-sky-600 group-hover:bg-sky-600/20 dark:bg-sky-400/10 dark:text-sky-400 dark:group-hover:bg-sky-400/20'
+            'bg-sky-600/10 text-sky-600 group-hover/button:bg-sky-600/20 dark:bg-sky-400/10 dark:text-sky-400 dark:group-hover/button:bg-sky-400/20'
         )}
       >
         <Slot />
       </div>
       {!hideLabel && (
         <div
           class={clsx(
-            'mx-4 transition-colors group-hover:text-slate-700 md:mx-6 md:text-lg lg:mx-8 lg:text-xl dark:group-hover:text-slate-200'
+            'mx-4 transition-colors group-hover/button:text-slate-700 md:mx-6 md:text-lg lg:mx-8 lg:text-xl dark:group-hover/button:text-slate-200'
           )}
         >
           {label}

diff --git a/website/src/components/MainMenuToggle.tsx b/website/src/components/MainMenuToggle.tsx
@@ -16,7 +16,10 @@ export const MainMenuToggle = component$<MainMenuToggleProps>(
     <Form action={action}>
       <input name="state" type="hidden" value={open ? 'closed' : 'opened'} />
       <button
-        class={clsx('focus-ring group rounded-lg p-2', !open && 'rotate-180')}
+        class={clsx(
+          'focus-ring group/button rounded-lg p-2',
+          !open && 'rotate-180'
+        )}
         type="submit"
         aria-expanded={open}
         aria-label={`${open ? 'Close' : 'Open'} main menu`}
@@ -27,7 +30,7 @@ export const MainMenuToggle = component$<MainMenuToggleProps>(
             <div
               key={index}
               class={clsx(
-                'absolute h-[1.5px] w-full rounded-full bg-slate-600 transition group-hover:bg-slate-900 dark:bg-slate-400 dark:group-hover:bg-slate-200',
+                'absolute h-[1.5px] w-full rounded-full bg-slate-600 transition group-hover/button:bg-slate-900 dark:bg-slate-400 dark:group-hover/button:bg-slate-200',
                 index === 1 && open && 'opacity-0',
                 index === 0 && (open ? '-rotate-45' : '-translate-y-1.5'),
                 index === 2 && (open ? 'rotate-45' : 'translate-y-1.5')

diff --git a/website/src/components/PostCover.tsx b/website/src/components/PostCover.tsx
@@ -13,8 +13,7 @@ export const PostCover = component$<PostCoverProps>(({ variant, label }) => (
   <div
     class={clsx(
       'relative flex aspect-video select-none items-center justify-center overflow-hidden rounded-xl border-2 border-slate-200 dark:border-slate-800',
-      variant === 'blog' &&
-        'duration-100 group-hover:-translate-y-1 lg:rounded-2xl',
+      variant === 'blog' && 'duration-100 hover:-translate-y-1 lg:rounded-2xl',
       variant === 'post' &&
         'mx-3 lg:mx-10 lg:rounded-[32px] lg:border-[3px] 2xl:mx-0'
     )}

diff --git a/website/src/hooks/useMDXComponents.tsx b/website/src/hooks/useMDXComponents.tsx
@@ -46,8 +46,8 @@ const Pre = component$<PreProps>((props) => {
   });
 
   return (
-    <div class="code-wrapper group relative overflow-hidden rounded-2xl border-2 border-slate-200 lg:rounded-3xl lg:border-[3px] dark:border-slate-800">
-      <div class="absolute right-5 top-5 hidden space-x-6 group-hover:flex lg:right-10 lg:top-10">
+    <div class="code-wrapper group/code relative overflow-hidden rounded-2xl border-2 border-slate-200 lg:rounded-3xl lg:border-[3px] dark:border-slate-800">
+      <div class="absolute right-5 top-5 hidden space-x-5 group-hover/code:flex lg:right-10 lg:top-10">
         <IconButton
           type="button"
           variant="secondary"

diff --git a/website/src/routes/blog/index.tsx b/website/src/routes/blog/index.tsx
@@ -63,7 +63,7 @@ export default component$(() => {
       <ol class="mx-3 mt-6 flex flex-wrap lg:mx-2 lg:mt-10">
         {posts.value.map((post) => (
           <li class="w-full px-5 py-6 md:w-1/2 lg:p-8" key={post.href}>
-            <Link class="group space-y-8" href={post.href}>
+            <Link class="space-y-8" href={post.href}>
               <PostCover variant="blog" label={post.cover} />
               <div class="space-y-5">
                 <h3 class="text-lg font-medium leading-normal text-slate-900 md:text-xl lg:text-2xl dark:text-slate-200">