Claude Code से CSS Styling को कैसे Streamline करें

CSS Styling में Claude Code कहां काम आता है

Design comp से CSS implementation, responsive support, dark mode support — styling का काम बहुत मेहनत वाला होता है। Claude Code design intent समझता है और efficiently styles generate कर सकता है।

Tailwind CSS Component Generation

> Tailwind CSS से इस card component को बनाओ:
> - Image, title, description, tags, post date
> - Hover पर shadow बढ़ने का animation
> - Dark mode support
> - Mobile responsive

function BlogCard({ post }: { post: Post }) {
  return (
    <article className="group rounded-xl overflow-hidden border border-gray-200
      bg-white shadow-sm transition-shadow duration-300 hover:shadow-lg
      dark:border-gray-700 dark:bg-gray-800">

      <div className="aspect-video overflow-hidden">
        <img
          src={post.image}
          alt={post.title}
          className="h-full w-full object-cover transition-transform
            duration-300 group-hover:scale-105"
        />
      </div>

      <div className="p-4 sm:p-6">
        <div className="mb-2 flex flex-wrap gap-2">
          {post.tags.map(tag => (
            <span key={tag} className="rounded-full bg-blue-100 px-2.5 py-0.5
              text-xs font-medium text-blue-800
              dark:bg-blue-900 dark:text-blue-200">
              {tag}
            </span>
          ))}
        </div>

        <h2 className="mb-2 text-lg font-bold text-gray-900
          line-clamp-2 dark:text-white sm:text-xl">
          {post.title}
        </h2>

        <p className="mb-4 text-sm text-gray-600 line-clamp-3
          dark:text-gray-300">
          {post.description}
        </p>

        <time className="text-xs text-gray-500 dark:text-gray-400">
          {new Date(post.date).toLocaleDateString('en-US')}
        </time>
      </div>
    </article>
  );
}

CSS Animation Generation

> Loading spinner CSS animation से बनाओ।
> Tailwind utilities और custom animation combine करो।

/* tailwind.config.js में add करने वाले custom animations */
@layer utilities {
  @keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
  }

  .animate-spinner {
    animation: spinner 1s linear infinite;
  }

  .animate-pulse-ring {
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}

function LoadingSpinner({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
  const sizeClasses = {
    sm: 'h-5 w-5 border-2',
    md: 'h-8 w-8 border-3',
    lg: 'h-12 w-12 border-4',
  };

  return (
    <div className="flex items-center justify-center">
      <div className={`${sizeClasses[size]} animate-spinner rounded-full
        border-gray-300 border-t-blue-600
        dark:border-gray-600 dark:border-t-blue-400`}
      />
    </div>
  );
}

Existing Styles का Refactoring

> src/styles/ के CSS files analyze करो,
> duplicate styles को common बनाओ।
> Use नहीं हो रहे CSS classes identify करके delete करो।

Claude Code पूरे project का CSS analyze करके, duplicate patterns integrate करने और unused classes हटाने का suggestion देता है।

Responsive Design एक साथ करना

> सभी page components का responsive support check करो।
> 320px से 1440px तक problem नहीं है confirm करो, ज़रूरत हो तो fix करो।

// Responsive grid layout का example
function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-1 gap-4
      sm:grid-cols-2 sm:gap-6
      lg:grid-cols-3
      xl:grid-cols-4 xl:gap-8">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Dark Mode Implementation

> पूरे project में dark mode add करो।
> System settings follow करे, और user manually switch भी कर सके।

// hooks/useTheme.ts
import { useEffect, useState } from 'react';

type Theme = 'light' | 'dark' | 'system';

export function useTheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem('theme') as Theme) || 'system';
  });

  useEffect(() => {
    const root = document.documentElement;
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');

    function applyTheme() {
      const isDark = theme === 'dark' ||
        (theme === 'system' && systemDark.matches);
      root.classList.toggle('dark', isDark);
    }

    applyTheme();
    systemDark.addEventListener('change', applyTheme);
    localStorage.setItem('theme', theme);

    return () => systemDark.removeEventListener('change', applyTheme);
  }, [theme]);

  return { theme, setTheme };
}

Summary

Claude Code का उपयोग करके, component styling से responsive support, dark mode implementation तक, CSS से जुड़े काम को काफी efficient बनाया जा सकता है। Design requirements को specifically prompt में बताना key है। Effective prompt लिखने का तरीका prompt technique complete guide में देखें। Styling conventions को CLAUDE.md में लिखें तो consistency बनी रहती है।

विस्तार से जानने के लिए Anthropic official documentation और Tailwind CSS official site देखें।