Alpha

Tailwind CSS to AdorableCSS Conversion Report

Summary

After analyzing the homepage-kit package, I found several files still containing Tailwind CSS classes that need to be converted to AdorableCSS syntax.

Files with Tailwind Classes

1. HeroSection.svelte - Contains Tailwind in code examples

  • Classes in example code:
    • flex flex-col items-center justify-center gap-6 p-8
    • bg-white r(lg) shadow-lg hover:shadow-xl transition-shadow duration-300
    • text-2xl font-bold text-gray-900
    • grid grid-cols-1 md:grid-cols-3 gap-4 w-full
    • flex flex-col items-center p-4 bg-blue-50 r(md)
    • text-xl font-semibold text-blue-600
    • text-sm text-gray-600

2. CodeComparison.svelte - Contains Tailwind in comparison examples

  • Classes in example code:
    • flex flex-col p-6 bg-white r(lg) shadow-md hover:shadow-lg transition-shadow duration-300
    • text-xl font-bold text-gray-900 mb-2
    • text-gray-600 leading-relaxed
    • min-h-screen flex flex-col items-center justify-center
    • bg-to-br from-purple-500 to-pink-500 text-white px-4
    • text-5xl md:text-6xl font-bold text-center mb-6
    • mt-8 px-8 py-4 bg-white text-purple-600 r(lg) font-semibold hover:scale-105 transition-transform

3. DramaticCodeComparison.svelte - Contains extensive Tailwind examples

  • Classes in example code:
    • relative flex flex-col items-center justify-center min-h-screen
    • bg-to-br from-purple-500 via-pink-500 to-red-500
    • absolute inset-0 bg-black/20
    • text-5xl md:text-6xl lg:text-7xl font-black
    • text-center text-white drop-shadow-2xl animate-pulse
    • flex flex-col sm:flex-row gap-4 mt-8
    • hover:scale-105 transform transition-all duration-300 ease-in-out

4. InteractiveHero.svelte - Contains Tailwind in example comparisons

  • Classes in example code:
    • flex flex-col p-6 bg-white r(lg) shadow-md hover:shadow-lg hover:scale-105 transition-all duration-300
    • text-2xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent
    • text-gray-600 mt-2
    • mt-4 px-6 py-3 bg-purple-600 text-white r(lg) hover:bg-purple-700 transition-colors

5. +layout.svelte - Contains hybrid classes

  • Mixed AdorableCSS and Tailwind:
    • relative min-h(screen) - Uses AdorableCSS for height but Tailwind pattern for relative
    • Some inline-block usage in InteractiveHero.svelte

Common Tailwind Patterns Found

Layout Classes

  • flex, flex-col, flex-row → hbox(), vbox()
  • items-center, justify-center → hbox(pack), vbox(center)
  • items-start, items-end → hbox(top), hbox(bottom)
  • justify-between, justify-start → hbox(middle) gap(auto), hbox(left)
  • grid grid-cols-X → grid(X)
  • gap-X → gap(sm/md/lg/xl)
  • space-x-X, space-y-X → gap() in flex containers

Spacing Classes

  • p-X, px-X, py-X → p(X), px(X), py(X)
  • m-X, mx-X, my-X → m(X), mx(X), my(X)
  • mt-X, mb-X, ml-X, mr-X → mt(X), mb(X), ml(X), mr(X)

Typography Classes

  • text-Xg, text-lg, text-xl → font(lg), font(xl)
  • font-bold, font-semibold → bold(), bold(600)
  • text-gray-X → c(gray-X)
  • text-center, text-left, text-right → text(center), text(left), text(right)
  • leading-relaxed → Custom line-height with font(size/line-height)

Background & Colors

  • bg-white, bg-gray-X → bg(white), bg(gray-X)
  • bg-to-br from-X to-Y → bg(135deg/X..Y) or bg(to-br/X..Y)
  • text-white, text-purple-X → c(white), c(purple-X)

Borders & Shadows

  • r(lg), r(full) → r(lg), r(full)
  • shadow-md, shadow-lg → shadow(md), shadow(lg)
  • border-2 border-white → border(2/white)

State & Animation

  • hover:shadow-xl → hover:shadow(xl)
  • hover:scale-105 → hover:scale(1.05)
  • transition-shadow duration-300 → transition
  • animate-pulse → animate(pulse)

Position & Display

  • relative, absolute, fixed → relative, absolute, fixed (keep as-is)
  • inset-0 → inset(0)
  • min-h-screen → min-h(screen)
  • max-w-2xl → max-w(2xl)
  • w-full → w(full)

Recommendations

  1. Priority Conversions: Focus on the example code blocks first, as they’re user-facing and should demonstrate AdorableCSS syntax
  2. Component Files: The actual Svelte components appear to be mostly converted already
  3. Documentation: Ensure all code examples in documentation use AdorableCSS syntax
  4. Testing: After conversion, test all interactive demos to ensure they still work correctly

Notes

  • Most of the actual component code has already been converted to AdorableCSS
  • The remaining Tailwind classes are primarily in:
    • Code example strings (for comparison purposes)
    • A few edge cases in actual component markup
    • Some hybrid usage where AdorableCSS and Tailwind patterns are mixed