From 3fbb9a18372f2b6a675dd6c039ba52be76f3eeb4 Mon Sep 17 00:00:00 2001 From: TheSiahxyz <164138827+TheSiahxyz@users.noreply.github.com> Date: Fri, 16 Jan 2026 08:30:14 +0900 Subject: updates --- ui/tailwindcss/README.md | 599 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 599 insertions(+) create mode 100644 ui/tailwindcss/README.md (limited to 'ui/tailwindcss/README.md') diff --git a/ui/tailwindcss/README.md b/ui/tailwindcss/README.md new file mode 100644 index 0000000..a1d5f2c --- /dev/null +++ b/ui/tailwindcss/README.md @@ -0,0 +1,599 @@ +# Tailwind CSS Claude Code Configuration ๐ŸŽจ + +A comprehensive Claude Code configuration for building beautiful, responsive, and performant user interfaces with Tailwind CSS, utility-first styling, and modern design systems. + +## โœจ Features + +This configuration provides: + +- **Utility-first CSS mastery** with Tailwind's complete toolkit +- **Responsive design patterns** with mobile-first methodology +- **Design system architecture** with custom colors, spacing, and typography +- **Component composition patterns** using utility classes +- **Dark mode implementation** with seamless theming +- **Performance optimization** with CSS purging and minimal bundles +- **Animation and motion** utilities for engaging interfaces +- **Accessibility best practices** with focus management and semantic HTML + +## ๐Ÿ“ฆ Installation + +1. Copy the `.claude` directory to your project root: + +```bash +cp -r tailwindcss/.claude your-project/ +cp tailwindcss/CLAUDE.md your-project/ +``` + +2. Install Tailwind CSS in your project: + +```bash +npm install -D tailwindcss postcss autoprefixer +npx tailwindcss init -p + +# Optional: Install additional plugins +npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio @tailwindcss/container-queries +``` + +3. The configuration will be automatically loaded when you start Claude Code in your project. + +## ๐ŸŽฏ What You Get + +### Tailwind CSS Expertise + +- **Utility-first methodology** - Building complex components with simple utilities +- **Responsive design mastery** - Mobile-first approach with consistent breakpoints +- **Design system creation** - Custom colors, spacing, typography, and component tokens +- **Performance optimization** - CSS purging, minimal bundles, and efficient styling +- **Dark mode implementation** - Seamless theming with class-based or CSS variable approaches +- **Component patterns** - Reusable utility compositions for common UI elements + +### Key Development Areas + +| Area | Coverage | +|------|----------| +| **Layout** | Flexbox, Grid, Container queries, Responsive design | +| **Typography** | Font families, sizes, weights, line heights, text styles | +| **Colors** | Custom palettes, semantic tokens, dark mode, opacity | +| **Spacing** | Margin, padding, gap, custom scale, responsive spacing | +| **Borders** | Radius, width, colors, shadows, outlines | +| **Animations** | Transitions, transforms, keyframes, micro-interactions | +| **Components** | Buttons, forms, cards, navigation, complex UI patterns | +| **Performance** | Purging, optimization, bundle size, loading strategies | + +## ๐Ÿš€ Quick Start Examples + +### Basic Configuration + +```javascript +// tailwind.config.js +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}', + ], + theme: { + extend: { + colors: { + brand: { + 50: '#f0f9ff', + 500: '#0ea5e9', + 900: '#0c4a6e', + } + } + }, + }, + plugins: [], +} +``` + +### Component Examples + +```jsx +// Button Component with Variants +function Button({ children, variant = 'primary', size = 'md' }) { + const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50'; + + const variants = { + primary: 'bg-brand-600 text-white hover:bg-brand-700', + secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200', + outline: 'border border-gray-300 bg-transparent hover:bg-gray-50', + }; + + const sizes = { + sm: 'h-8 px-3 text-sm', + md: 'h-10 px-4', + lg: 'h-11 px-6 text-lg', + }; + + return ( + + ); +} + +// Responsive Card Component +function Card({ children, hover = false }) { + return ( +
+ {children} +
+ ); +} +``` + +### Responsive Design + +```jsx +// Mobile-First Responsive Layout +function ResponsiveLayout() { + return ( +
+
+

+ Responsive Typography +

+
+
+ ); +} +``` + +## ๐Ÿ”ง Configuration Patterns + +### Design System Setup + +```javascript +// Advanced Tailwind configuration +module.exports = { + darkMode: 'class', + theme: { + extend: { + colors: { + // Custom brand colors + brand: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 200: '#bae6fd', + 500: '#0ea5e9', + 600: '#0284c7', + 900: '#0c4a6e', + }, + // Semantic colors using CSS variables + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + }, + fontFamily: { + sans: ['Inter', 'system-ui', 'sans-serif'], + mono: ['JetBrains Mono', 'Consolas', 'monospace'], + }, + animation: { + 'fade-in': 'fadeIn 0.5s ease-in-out', + 'slide-up': 'slideUp 0.3s ease-out', + 'bounce-gentle': 'bounceGentle 2s infinite', + }, + keyframes: { + fadeIn: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + slideUp: { + '0%': { transform: 'translateY(10px)', opacity: '0' }, + '100%': { transform: 'translateY(0)', opacity: '1' }, + }, + }, + }, + }, + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/forms'), + require('@tailwindcss/aspect-ratio'), + ], +} +``` + +### CSS Variables for Theming + +```css +/* globals.css */ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --primary: 221.2 83.2% 53.3%; + --primary-foreground: 210 40% 98%; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 84% 4.9%; + } +} + +@layer components { + .btn { + @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50; + } + + .card { + @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900; + } +} +``` + +## ๐ŸŒ“ Dark Mode Implementation + +### Class-Based Dark Mode + +```jsx +// Theme toggle component +function ThemeToggle() { + const [theme, setTheme] = useState('light'); + + const toggleTheme = () => { + const newTheme = theme === 'light' ? 'dark' : 'light'; + setTheme(newTheme); + document.documentElement.classList.toggle('dark'); + }; + + return ( + + ); +} + +// Dark mode aware components +function DarkModeCard({ children }) { + return ( +
+ {children} +
+ ); +} +``` + +## ๐Ÿ“ฑ Responsive Patterns + +### Responsive Grid Systems + +```jsx +// Auto-responsive grid +function ResponsiveGrid({ children }) { + return ( +
+ {children} +
+ ); +} + +// Container queries for component-level responsiveness +function ContainerAwareCard() { + return ( +
+
+

+ Container Query Title +

+
+
+ ); +} +``` + +### Responsive Navigation + +```jsx +// Mobile-first navigation +function Navigation() { + const [isOpen, setIsOpen] = useState(false); + + return ( + + ); +} +``` + +## ๐ŸŽฌ Animation and Motion + +### Custom Animations + +```jsx +// Staggered animation list +function StaggeredList({ items }) { + return ( +
+ {items.map((item, index) => ( +
+ {item.content} +
+ ))} +
+ ); +} + +// Interactive hover effects +function InteractiveCard({ children }) { + return ( +
+
+
+ {children} +
+
+ ); +} +``` + +### Loading States + +```jsx +// Skeleton loading components +function SkeletonCard() { + return ( +
+
+
+
+
+ ); +} + +// Spinner component +function Spinner({ size = 'md' }) { + const sizes = { + sm: 'h-4 w-4', + md: 'h-8 w-8', + lg: 'h-12 w-12', + }; + + return ( +
+ ); +} +``` + +## ๐Ÿ“Š Performance Optimization + +### Content Optimization + +```javascript +// Optimized content configuration +module.exports = { + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}', + ], + safelist: [ + // Dynamic classes that might be purged incorrectly + { + pattern: /bg-(red|green|blue)-(100|500|900)/, + variants: ['hover', 'focus'], + }, + ], + blocklist: [ + // Classes to never include + 'container', + 'collapsible', + ], +} +``` + +### Bundle Size Optimization + +```javascript +// Plugin configuration for smaller bundles +module.exports = { + plugins: [ + require('@tailwindcss/typography')({ + className: 'prose', + target: 'modern', // Smaller bundle size + }), + require('@tailwindcss/forms')({ + strategy: 'class', // Only include when using form-* classes + }), + ], + corePlugins: { + // Disable unused core plugins + container: false, + accessibility: false, + }, +} +``` + +## ๐Ÿงช Testing Integration + +### Component Testing with Tailwind Classes + +```jsx +// Testing utility classes +import { render, screen } from '@testing-library/react'; + +describe('Button Component', () => { + it('applies correct styling classes', () => { + render(); + const button = screen.getByRole('button'); + + expect(button).toHaveClass('bg-brand-600', 'text-white', 'hover:bg-brand-700'); + }); + + it('responds to different screen sizes', () => { + render(); + const card = screen.getByTestId('card'); + + expect(card).toHaveClass('p-4', 'md:p-6', 'lg:p-8'); + }); +}); +``` + +### Visual Regression Testing + +```javascript +// Storybook configuration for visual testing +export default { + title: 'Components/Button', + component: Button, + parameters: { + viewport: { + viewports: { + mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } }, + tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } }, + desktop: { name: 'Desktop', styles: { width: '1024px', height: '768px' } }, + }, + }, + }, +}; + +export const AllVariants = () => ( +
+ + + +
+); +``` + +## ๐Ÿ”— Integration + +This configuration works seamlessly with: + +- **Next.js 15** - App Router and Server Components styling +- **React/Vue/Svelte** - Component-based architectures +- **shadcn/ui** - Pre-built accessible components +- **Headless UI** - Unstyled, accessible UI primitives +- **Framer Motion** - Animation library integration +- **Storybook** - Component documentation and testing + +## ๐Ÿ“š Resources + +- [Tailwind CSS Documentation](https://tailwindcss.com/docs) +- [Tailwind UI Components](https://tailwindui.com) +- [Headless UI](https://headlessui.com) +- [Heroicons](https://heroicons.com) +- [Tailwind Play](https://play.tailwindcss.com) - Online playground +- [Tailwind Community](https://github.com/tailwindlabs/tailwindcss/discussions) +- [Awesome Tailwind CSS](https://github.com/aniftyco/awesome-tailwindcss) + +## ๐ŸŽจ Design Resources + +- [Color palette generators](https://tailwindcss.com/docs/customizing-colors) +- [Typography scale calculator](https://type-scale.com) +- [Spacing scale reference](https://tailwindcss.com/docs/customizing-spacing) +- [Component examples](https://tailwindcomponents.com) +- [Templates and themes](https://tailwindtemplates.co) + +--- + +**Ready to build stunning, responsive interfaces with Claude Code and Tailwind CSS!** + +๐ŸŒŸ **Star this configuration** if it accelerates your UI development workflow! -- cgit v1.2.3