fix: replace class + :class dual attributes with cn() calls

Merge static class and dynamic :class into single cn() calls
across 11 website components per project convention.

Amp-Thread-ID: https://ampcode.com/threads/T-019d9369-c195-762a-945a-e4dc02ffd409
Co-authored-by: Amp <amp@ampcode.com>

apps/website/src/components/common/FAQSection.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import { reactive } from 'vue'
 
 import type { Locale, TranslationKey } from '../../i18n/translations'
@@ -60,16 +61,22 @@ function toggle(index: number) {
             :id="`faq-trigger-${index}`"
             :aria-expanded="expanded[index]"
             :aria-controls="`faq-panel-${index}`"
-            class="flex w-full cursor-pointer items-center justify-between text-left"
-            :class="index === 0 ? 'pb-6' : 'py-6'"
+            :class="
+              cn(
+                'flex w-full cursor-pointer items-center justify-between text-left',
+                index === 0 ? 'pb-6' : 'py-6'
+              )
+            "
             @click="toggle(index)"
           >
             <span
-              class="text-lg font-light md:text-xl"
               :class="
-                expanded[index]
-                  ? 'text-primary-comfy-yellow'
-                  : 'text-primary-comfy-canvas'
+                cn(
+                  'text-lg font-light md:text-xl',
+                  expanded[index]
+                    ? 'text-primary-comfy-yellow'
+                    : 'text-primary-comfy-canvas'
+                )
               "
             >
               {{ faq.question }}

apps/website/src/components/common/NodeBadge.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
 const { segments, segmentClass = 'px-6' } = defineProps<{
   segments: Array<{ text?: string; logoSrc?: string; logoAlt?: string }>
   segmentClass?: string
@@ -28,8 +30,12 @@ const { segments, segmentClass = 'px-6' } = defineProps<{
         aria-hidden="true"
       />
       <span
-        class="bg-primary-comfy-yellow text-primary-comfy-ink flex items-center justify-center py-1 lg:py-5"
-        :class="segmentClass"
+        :class="
+          cn(
+            'bg-primary-comfy-yellow text-primary-comfy-ink flex items-center justify-center py-1 lg:py-5',
+            segmentClass
+          )
+        "
       >
         <img
           v-if="segment.logoSrc"

apps/website/src/components/common/ProductCard.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
 const { title, description, cta, href, bg } = defineProps<{
   title: string
   description: string
@@ -11,8 +13,12 @@ const { title, description, cta, href, bg } = defineProps<{
 <template>
   <a
     :href="href"
-    class="flex flex-col justify-between rounded-2xl p-8 transition-opacity hover:opacity-90"
-    :class="bg"
+    :class="
+      cn(
+        'flex flex-col justify-between rounded-2xl p-8 transition-opacity hover:opacity-90',
+        bg
+      )
+    "
   >
     <h3 class="text-3xl font-light whitespace-pre-line text-white lg:text-4xl">
       {{ title }}

apps/website/src/components/common/ProductCardsSection.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Locale, TranslationKey } from '../../i18n/translations'
 
+import { cn } from '@comfyorg/tailwind-utils'
+
 import { getRoutes } from '../../config/routes'
 import { t } from '../../i18n/translations'
 import ProductCard from './ProductCard.vue'
@@ -64,10 +66,12 @@ const cards = excludeProduct
 
     <!-- Cards -->
     <div
-      :class="[
-        'mt-16 grid grid-cols-1 gap-4',
-        cards.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
-      ]"
+      :class="
+        cn(
+          'mt-16 grid grid-cols-1 gap-4',
+          cards.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
+        )
+      "
     >
       <ProductCard v-for="card in cards" :key="card.product" v-bind="card" />
     </div>

apps/website/src/components/common/SiteNav.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import type { Locale } from '../../i18n/translations'
@@ -196,11 +197,13 @@ onUnmounted(() => {
     <!-- Mobile hamburger -->
     <button
       ref="hamburgerRef"
-      class="flex size-10 items-center justify-center rounded-xl lg:hidden"
       :class="
-        mobileMenuOpen
-          ? 'border-primary-comfy-yellow border-2 bg-transparent'
-          : 'bg-primary-comfy-yellow'
+        cn(
+          'flex size-10 items-center justify-center rounded-xl lg:hidden',
+          mobileMenuOpen
+            ? 'border-primary-comfy-yellow border-2 bg-transparent'
+            : 'bg-primary-comfy-yellow'
+        )
       "
       :aria-label="t('nav.toggleMenu', locale)"
       aria-controls="site-mobile-menu"

apps/website/src/components/home/ProductShowcaseSection.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import { ref } from 'vue'
 
 import type { Locale } from '../../i18n/translations'
@@ -59,8 +60,7 @@ const activeIndex = ref(0)
           <!-- Image area (mobile, rendered before active item) -->
           <BorderedPlaceholder
             v-if="activeIndex === i"
-            class="lg:hidden"
-            :class="i !== 0 ? 'mt-4' : ''"
+            :class="cn('lg:hidden', i !== 0 && 'mt-4')"
           />
 
           <!-- Connector (mobile) -->
@@ -78,8 +78,9 @@ const activeIndex = ref(0)
 
           <!-- Accordion item with connector -->
           <div
-            class="flex items-stretch"
-            :class="activeIndex !== i ? 'mt-4 lg:mt-0' : ''"
+            :class="
+              cn('flex items-stretch', activeIndex !== i && 'mt-4 lg:mt-0')
+            "
           >
             <img
               v-if="activeIndex === i"
@@ -90,11 +91,13 @@ const activeIndex = ref(0)
             />
             <button
               type="button"
-              class="rounded-5xl w-full cursor-pointer p-8 text-left transition-colors duration-300"
               :class="
-                activeIndex === i
-                  ? 'bg-primary-comfy-yellow text-primary-comfy-ink'
-                  : 'bg-transparency-white-t4 text-primary-comfy-canvas lg:ml-5'
+                cn(
+                  'rounded-5xl w-full cursor-pointer p-8 text-left transition-colors duration-300',
+                  activeIndex === i
+                    ? 'bg-primary-comfy-yellow text-primary-comfy-ink'
+                    : 'bg-transparency-white-t4 text-primary-comfy-canvas lg:ml-5'
+                )
               "
               @click="activeIndex = i"
             >
@@ -105,25 +108,35 @@ const activeIndex = ref(0)
                 <img
                   src="/icons/plus.svg"
                   alt=""
-                  class="size-5 shrink-0 transition-opacity duration-300"
-                  :class="activeIndex === i ? 'opacity-0' : 'opacity-100'"
+                  :class="
+                    cn(
+                      'size-5 shrink-0 transition-opacity duration-300',
+                      activeIndex === i ? 'opacity-0' : 'opacity-100'
+                    )
+                  "
                   aria-hidden="true"
                 />
               </div>
 
               <!-- Animated description (stacked for constant height) -->
               <div
-                class="grid transition-[grid-template-rows] duration-300"
                 :class="
-                  activeIndex === i ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                  cn(
+                    'grid transition-[grid-template-rows] duration-300',
+                    activeIndex === i ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                  )
                 "
               >
                 <div class="grid overflow-hidden">
                   <p
                     v-for="(f, j) in features"
                     :key="f.title"
-                    class="col-start-1 row-start-1 mt-4 text-sm/relaxed font-normal opacity-80"
-                    :class="j === i ? 'visible' : 'invisible'"
+                    :class="
+                      cn(
+                        'col-start-1 row-start-1 mt-4 text-sm/relaxed font-normal opacity-80',
+                        j === i ? 'visible' : 'invisible'
+                      )
+                    "
                   >
                     {{ f.description }}
                   </p>

apps/website/src/components/home/UseCaseSection.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import { computed, ref, useId } from 'vue'
 import type { Locale } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
@@ -132,11 +133,13 @@ useParallax([leftImgRef], { trigger: sectionRef, y: -60 })
         <button
           v-for="(category, index) in categories"
           :key="category.label"
-          class="lg:text-6.5xl cursor-pointer text-center text-4xl font-light whitespace-pre-line transition-colors"
           :class="
-            index === activeCategory
-              ? 'text-primary-comfy-canvas'
-              : 'text-primary-comfy-canvas/30 hover:text-primary-comfy-canvas/50'
+            cn(
+              'lg:text-6.5xl cursor-pointer text-center text-4xl font-light whitespace-pre-line transition-colors',
+              index === activeCategory
+                ? 'text-primary-comfy-canvas'
+                : 'text-primary-comfy-canvas/30 hover:text-primary-comfy-canvas/50'
+            )
           "
           @click="scrollToIndex(index)"
         >

apps/website/src/components/product/api/StepsSection.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Locale } from '../../../i18n/translations'
 
+import { cn } from '@comfyorg/tailwind-utils'
+
 import { externalLinks } from '../../../config/routes'
 import { t } from '../../../i18n/translations'
 import CardGridSection from '../shared/CardGridSection.vue'
@@ -42,14 +44,16 @@ const steps = [
           <span
             v-for="i in 15"
             :key="i"
-            class="block size-5 rounded-sm"
-            :class="[
-              i === 3 || i === 8 || i === 13
-                ? 'bg-primary-comfy-yellow'
-                : i % 3 === 0
-                  ? 'bg-primary-comfy-plum'
-                  : 'bg-secondary-mauve'
-            ]"
+            :class="
+              cn(
+                'block size-5 rounded-sm',
+                i === 3 || i === 8 || i === 13
+                  ? 'bg-primary-comfy-yellow'
+                  : i % 3 === 0
+                    ? 'bg-primary-comfy-plum'
+                    : 'bg-secondary-mauve'
+              )
+            "
           />
         </div>
       </div>

apps/website/src/components/product/cloud/AIModelsSection.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
 import type { Locale } from '../../../i18n/translations'
 
 import { externalLinks } from '../../../config/routes'
@@ -111,8 +113,12 @@ function getCardClass(layoutClass: string): string {
               />
 
               <div
-                class="absolute top-5 right-5 flex h-12 min-w-12 items-center justify-center px-3 lg:top-6 lg:right-6"
-                :class="card.badgeClass"
+                :class="
+                  cn(
+                    'absolute top-5 right-5 flex h-12 min-w-12 items-center justify-center px-3 lg:top-6 lg:right-6',
+                    card.badgeClass
+                  )
+                "
               >
                 <span
                   class="inline-block size-6 bg-current"

apps/website/src/components/product/enterprise/BYOKeySection.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Locale } from '../../../i18n/translations'
 
+import { cn } from '@comfyorg/tailwind-utils'
 import { t } from '../../../i18n/translations'
 import CardGridSection from '../shared/CardGridSection.vue'
 
@@ -38,14 +39,16 @@ const cards = [
           <span
             v-for="j in 15"
             :key="j"
-            class="block size-5 rounded-sm"
-            :class="[
-              j === 3 || j === 8 || j === 13
-                ? 'bg-primary-comfy-yellow'
-                : j % 3 === 0
-                  ? 'bg-primary-comfy-plum'
-                  : 'bg-secondary-mauve'
-            ]"
+            :class="
+              cn(
+                'block size-5 rounded-sm',
+                j === 3 || j === 8 || j === 13
+                  ? 'bg-primary-comfy-yellow'
+                  : j % 3 === 0
+                    ? 'bg-primary-comfy-plum'
+                    : 'bg-secondary-mauve'
+              )
+            "
           />
         </div>
       </div>

apps/website/src/components/product/shared/CardGridSection.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
 defineProps<{
   heading: string
   subtitle?: string
@@ -20,8 +22,12 @@ defineProps<{
     </div>
 
     <div
-      class="mt-12 grid gap-6 lg:mt-16"
-      :class="columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-3'"
+      :class="
+        cn(
+          'mt-12 grid gap-6 lg:mt-16',
+          columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-3'
+        )
+      "
     >
       <slot />
     </div>