View : 209

12/05/2026 01:13am

EP 9: Pro Tips: 20 Techniques to Make You Write Tailwind 10x Faster

EP 9: Pro Tips: 20 Techniques to Make You Write Tailwind 10x Faster

#form design

#responsive design

#vs code extensions

#Tailwind CSS

#css shortcuts

Been writing Tailwind CSS for a while but feel like you're not as fast as you should be? Or sometimes still need to search for the classes you need in the documentation?

In episode 9 of this series, we'll learn various tips and techniques that will help you use Tailwind CSS like a professional, from setting up tools and using shortcuts to advanced techniques that will make your work more efficient.

1. Setting Up VS Code to be Tailwind-Friendly

Installing Essential Extensions

Having the right extensions will make writing Tailwind much easier:

Tailwind CSS IntelliSense (Mandatory)

  • Install from VS Code Marketplace
  • Provides autocomplete, hover preview, and syntax highlighting
  • Helps detect class conflicts
  • Shows actual CSS when hovering over classes

Headwind (Auto Class Sorting)

  • Sorts Tailwind classes in the appropriate order
  • Makes code readable and consistent

Auto Rename Tag

  • Changes opening and closing tags simultaneously
  • Saves time when editing HTML

VS Code Settings Configuration

{
  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "typescript": "typescript",
    "javascriptreact": "javascriptreact",
    "typescriptreact": "typescriptreact"
  },
  
  "editor.quickSuggestions": {
    "strings": true
  },
  
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

Installing Prettier Plugin

npm install -D prettier prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

2. Systematic Class Writing Techniques

Correct Class Writing Order

Writing classes in this order will make them easier to read and maintain:

<!-- Recommended order -->
<div class="
  relative               <!-- Position -->
  flex items-center      <!-- Display & Layout -->
  w-full h-16           <!-- Sizing -->
  px-4 py-2             <!-- Spacing -->
  bg-blue-500           <!-- Background -->
  border border-gray-300 <!-- Border -->
  text-white font-medium <!-- Typography -->
  rounded-lg            <!-- Border Radius -->
  shadow-md             <!-- Effects -->
  transition-colors     <!-- Transitions -->
  hover:bg-blue-600     <!-- Interactive states -->
">
  Content
</div>

<!-- More complex example -->
<button class="
  relative inline-flex items-center justify-center
  min-w-[120px] px-6 py-3
  bg-gradient-to-r from-blue-500 to-purple-600
  border-0
  text-white font-semibold text-sm uppercase tracking-wider
  rounded-xl
  shadow-lg shadow-blue-500/25
  transition-all duration-300 ease-out
  hover:from-blue-600 hover:to-purple-700 hover:shadow-xl hover:-translate-y-0.5
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:translate-y-0 active:shadow-md
  disabled:opacity-50 disabled:cursor-not-allowed
">
  Get Started
</button>

3. Smart Arbitrary Values Techniques

<!-- Use Custom Values when necessary -->
<div class="w-[calc(100%-2rem)] h-[50vh] bg-[#ff6b35] text-[14px]">
  Custom sizing and colors
</div>

<!-- Use CSS Variables -->
<div class="bg-[var(--brand-color)] text-[var(--brand-text)]">
  CSS Variable usage
</div>

<!-- Complex Calculations -->
<div class="
  grid-cols-[200px_1fr_100px]
  gap-[clamp(1rem,5vw,3rem)]
  min-h-[calc(100vh-4rem)]
">
  Advanced Grid Layout
</div>

<!-- Custom Gradients -->
<div class="bg-gradient-to-br from-[#667eea] via-[#764ba2] to-[#f093fb]">
  Custom Gradient
</div>

4. Shortcuts and Keyboard Tricks

VS Code Shortcuts for Tailwind

Ctrl+Space (Cmd+Space)     → Open IntelliSense suggestions
Ctrl+Shift+P (Cmd+Shift+P) → Command palette
Alt+Click                  → Multiple cursor selection
Ctrl+D (Cmd+D)            → Select next occurrence
Ctrl+Shift+L (Cmd+Shift+L) → Select all occurrences
Alt+Up/Down               → Move line up/down
Shift+Alt+Up/Down         → Copy line up/down
Ctrl+/ (Cmd+/)            → Toggle comment

Multi-cursor Techniques

<!-- Select multiple lines and edit simultaneously -->
<div class="bg-blue-500 text-white p-4">Item 1</div>
<div class="bg-blue-500 text-white p-4">Item 2</div>
<div class="bg-blue-500 text-white p-4">Item 3</div>
<!-- Press Alt+Click on each bg-blue-500 line, then change to bg-red-500 simultaneously -->

5. Professional Responsive Techniques

Correct Mobile-First Approach

<!-- ✅ Correct - Start from mobile then expand -->
<div class="
  p-4 md:p-6 lg:p-8
  text-sm md:text-base lg:text-lg
  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
">
  Content
</div>

<!-- ❌ Wrong - Start from desktop then reduce -->
<div class="
  p-8 md:p-6 sm:p-4
  text-lg md:text-base sm:text-sm
  grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1
">
  Content
</div>

Element Hide/Show Techniques

<!-- Show only on Mobile -->
<div class="block md:hidden">
  <button class="w-full bg-blue-500 text-white py-3">
    Mobile Menu Toggle
  </button>
</div>

<!-- Show only on Desktop -->
<nav class="hidden md:flex space-x-6">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<!-- Change Layout by screen size -->
<div class="
  flex flex-col          <!-- Mobile: stack vertically -->
  md:flex-row           <!-- Tablet+: side by side -->
  lg:items-center       <!-- Desktop: center aligned -->
">
  <div class="flex-1">Main Content</div>
  <div class="w-full md:w-80 lg:w-96">Sidebar</div>
</div>

6. Color Management Techniques

Creating Consistent Color Palettes

<!-- Use colors from the same scale -->
<div class="space-y-4">
  <!-- Light background -->
  <div class="bg-blue-50 border border-blue-200 text-blue-900 p-4">
    Light variant
  </div>
  
  <!-- Medium background -->
  <div class="bg-blue-100 border border-blue-300 text-blue-800 p-4">
    Medium variant
  </div>
  
  <!-- Dark background -->
  <div class="bg-blue-500 border border-blue-600 text-white p-4">
    Dark variant
  </div>
</div>

<!-- Semantic Colors -->
<div class="space-y-2">
  <div class="bg-green-50 text-green-800 border border-green-200 p-3 rounded">
    ✅ Success message
  </div>
  <div class="bg-yellow-50 text-yellow-800 border border-yellow-200 p-3 rounded">
    ⚠️ Warning message
  </div>
  <div class="bg-red-50 text-red-800 border border-red-200 p-3 rounded">
    ❌ Error message
  </div>
  <div class="bg-blue-50 text-blue-800 border border-blue-200 p-3 rounded">
    ℹ️ Info message
  </div>
</div>

Opacity Modifier Techniques

<!-- Use Opacity instead of creating new colors -->
<div class="bg-blue-500/20 border border-blue-500/30">
  20% opacity background
</div>

<div class="bg-gradient-to-r from-purple-500/80 to-pink-500/80">
  Translucent gradient
</div>

<!-- Change Opacity on Hover -->
<button class="
  bg-blue-500 hover:bg-blue-500/80
  text-white hover:text-white/90
  transition-all
">
  Hover me
</button>

7. Smart Flexbox and Grid Techniques

Common Flexbox Patterns

<!-- Center everything -->
<div class="flex items-center justify-center min-h-screen">
  <div>Perfect center</div>
</div>

<!-- Navigation bar -->
<nav class="flex items-center justify-between px-4 py-2">
  <div class="font-bold">Logo</div>
  <div class="flex items-center space-x-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <button class="bg-blue-500 text-white px-4 py-2 rounded">
      Sign Up
    </button>
  </div>
</nav>

<!-- Card with flexible content -->
<div class="flex flex-col h-full">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="">
  <div class="flex-1 p-4 flex flex-col">
    <h3 class="font-bold mb-2">Title</h3>
    <p class="text-gray-600 mb-4 flex-1">
      Description that can vary in length
    </p>
    <button class="w-full bg-blue-500 text-white py-2 rounded">
      Action
    </button>
  </div>
</div>

<!-- Sticky footer layout -->
<div class="flex flex-col min-h-screen">
  <header class="bg-blue-500 text-white p-4">Header</header>
  <main class="flex-1 p-4">Main content</main>
  <footer class="bg-gray-800 text-white p-4">Footer</footer>
</div>

Useful Grid Patterns

<!-- Auto-fit grid -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div class="bg-white p-4 rounded shadow">Card 1</div>
  <div class="bg-white p-4 rounded shadow">Card 2</div>
  <div class="bg-white p-4 rounded shadow">Card 3</div>
</div>

<!-- Complex dashboard layout -->
<div class="grid grid-cols-12 grid-rows-[auto_1fr_auto] h-screen gap-4">
  <!-- Header spans full width -->
  <header class="col-span-12 bg-blue-500 text-white p-4">
    Header
  </header>
  
  <!-- Sidebar -->
  <aside class="col-span-3 bg-gray-100 p-4">
    Sidebar
  </aside>
  
  <!-- Main content area -->
  <main class="col-span-9 p-4 overflow-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="bg-white p-6 rounded shadow">Widget 1</div>
      <div class="bg-white p-6 rounded shadow">Widget 2</div>
      <div class="bg-white p-6 rounded shadow">Widget 3</div>
    </div>
  </main>
  
  <!-- Footer spans full width -->
  <footer class="col-span-12 bg-gray-800 text-white p-4">
    Footer
  </footer>
</div>

8. Animation and Transition Techniques

Micro-interactions that Bring UI to Life

<!-- Button animations -->
<button class="
  bg-blue-500 hover:bg-blue-600
  text-white font-medium px-6 py-3 rounded-lg
  transform transition-all duration-200 ease-out
  hover:scale-105 hover:shadow-lg
  active:scale-95 active:shadow-md
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
">
  Interactive Button
</button>

<!-- Card hover effects -->
<div class="
  bg-white rounded-xl shadow-md overflow-hidden
  transition-all duration-300 ease-out
  hover:shadow-xl hover:-translate-y-1
  cursor-pointer group
">
  <img class="
    w-full h-48 object-cover
    transition-transform duration-500 ease-out
    group-hover:scale-110
  " src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400" alt="" loading="lazy">
  
  <div class="p-6">
    <h3 class="
      font-semibold text-lg mb-2
      transition-colors duration-200
      group-hover:text-blue-600
    ">
      Card Title
    </h3>
    <p class="text-gray-600">Card description</p>
    
    <div class="
      mt-4 opacity-0 transform translate-y-2
      transition-all duration-300 ease-out
      group-hover:opacity-100 group-hover:translate-y-0
    ">
      <button class="text-blue-600 font-medium">Learn More →</button>
    </div>
  </div>
</div>

<!-- Loading states -->
<div class="space-y-4">
  <!-- Pulse loading -->
  <div class="animate-pulse bg-gray-300 h-4 rounded"></div>
  <div class="animate-pulse bg-gray-300 h-4 rounded w-3/4"></div>
  <div class="animate-pulse bg-gray-300 h-4 rounded w-1/2"></div>
  
  <!-- Spinner -->
  <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
  
  <!-- Bounce -->
  <div class="flex space-x-1">
    <div class="animate-bounce bg-blue-500 h-2 w-2 rounded-full"></div>
    <div class="animate-bounce bg-blue-500 h-2 w-2 rounded-full" style="animation-delay: 0.1s;"></div>
    <div class="animate-bounce bg-blue-500 h-2 w-2 rounded-full" style="animation-delay: 0.2s;"></div>
  </div>
</div>

9. Advanced Form and Input Techniques

Creating Beautiful and User-Friendly Forms

<!-- Modern form design -->
<form class="max-w-md mx-auto space-y-6">
  <!-- Floating label input -->
  <div class="relative group">
    <input 
      type="email" 
      id="email"
      class="
        peer w-full px-3 pb-2 pt-6 
        border-2 border-gray-300 rounded-lg
        focus:border-blue-500 focus:outline-none
        transition-all duration-200
      "
      placeholder=" "
    >
    <label 
      for="email"
      class="
        absolute left-3 top-2 text-xs text-gray-500
        peer-placeholder-shown:text-base peer-placeholder-shown:top-4
        peer-focus:text-xs peer-focus:top-2 peer-focus:text-blue-500
        transition-all duration-200 pointer-events-none
      "
    >
      Email Address
    </label>
  </div>

  <!-- Input with icon -->
  <div class="relative">
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
      <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
      </svg>
    </div>
    <input
      type="text"
      placeholder="Full name"
      class="
        w-full pl-10 pr-3 py-3
        border border-gray-300 rounded-lg
        focus:ring-2 focus:ring-blue-500 focus:border-blue-500
        transition-all duration-200
      "
    >
  </div>

  <!-- File upload with drag and drop styling -->
  <div class="
    border-2 border-dashed border-gray-300 rounded-lg p-6 text-center
    hover:border-blue-500 hover:bg-blue-50
    transition-all duration-200 cursor-pointer
    group
  ">
    <input type="file" class="hidden" id="file-upload">
    <label for="file-upload" class="cursor-pointer">
      <svg class="mx-auto h-12 w-12 text-gray-400 group-hover:text-blue-500 transition-colors" 
           fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
      </svg>
      <p class="mt-2 text-sm text-gray-600 group-hover:text-blue-600 transition-colors">
        <span class="font-medium">Click to upload</span> or drag and drop
      </p>
      <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
    </label>
  </div>

  <!-- Submit button -->
  <button
    type="submit"
    class="
      w-full bg-blue-500 hover:bg-blue-600 
      text-white font-semibold py-3 px-4 rounded-lg
      transition-colors duration-200
      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
      disabled:opacity-50 disabled:cursor-not-allowed
    "
  >
    Create Account
  </button>
</form>

10. Managing State with CSS Techniques

Expert Pseudo-classes Usage

<!-- Complex form validation styling -->
<div class="space-y-4">
  <div class="relative">
    <input 
      type="email" 
      required
      class="
        w-full px-3 py-2 border rounded-lg peer
        border-gray-300 focus:border-blue-500
        invalid:border-red-500 invalid:focus:border-red-500
        valid:border-green-500 valid:focus:border-green-500
        transition-colors duration-200
      "
      placeholder="Email address"
    >
    <p class="
      text-sm mt-1 opacity-0
      peer-invalid:opacity-100 peer-invalid:text-red-500
      transition-all duration-200
    ">
      Please enter a valid email address
    </p>
  </div>
</div>

<!-- List with alternating colors and hover states -->
<ul class="divide-y divide-gray-200">
  <li class="
    py-3 px-4 hover:bg-gray-50
    first:rounded-t-lg last:rounded-b-lg
    transition-colors duration-200
  ">
    Item 1
  </li>
  <li class="
    py-3 px-4 hover:bg-gray-50
    bg-gray-25
    transition-colors duration-200
  ">
    Item 2
  </li>
  <li class="
    py-3 px-4 hover:bg-gray-50
    transition-colors duration-200
  ">
    Item 3
  </li>
</ul>

<!-- Table with row highlighting -->
<table class="w-full">
  <tbody>
    <tr class="
      border-b hover:bg-blue-50
      transition-colors duration-200
      group
    ">
      <td class="py-3 px-4 group-hover:text-blue-900">John Doe</td>
      <td class="py-3 px-4 group-hover:text-blue-900">john@example.com</td>
      <td class="py-3 px-4">
        <button class="
          opacity-0 group-hover:opacity-100
          text-blue-600 hover:text-blue-800
          transition-all duration-200
        ">
          Edit
        </button>
      </td>
    </tr>
  </tbody>
</table>

11. Performance Tips and Best Practices

Writing Efficient HTML

<!-- ✅ Good - Use minimum classes needed for the result -->
<div class="flex items-center space-x-4">
  <img class="w-12 h-12 rounded-full" src="avatar.jpg" alt="">
  <div>
    <h4 class="font-medium">John Doe</h4>
    <p class="text-gray-600 text-sm">Software Engineer</p>
  </div>
</div>

<!-- ❌ Bad - Using too many classes -->
<div class="flex flex-row items-center justify-start space-x-4 w-full">
  <img class="w-12 h-12 rounded-full object-cover border-0" src="avatar.jpg" alt="">
  <div class="flex flex-col items-start justify-start">
    <h4 class="font-medium text-base leading-normal text-black">John Doe</h4>
    <p class="text-gray-600 text-sm leading-normal font-normal">Software Engineer</p>
  </div>
</div>

Using @apply Wisely

/* ✅ Good - Combine frequently used patterns */
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-3 rounded-lg transition-colors;
}

.card {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
}

/* ❌ Bad - Combine classes used only once */
.unique-header {
  @apply text-2xl font-bold text-center mb-4;
}

/* ✅ Good - Create utilities for complex patterns */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.gradient-text {
  @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

12. Debug and Troubleshooting Techniques

Using Browser DevTools with Tailwind

<!-- Add temporary classes for debugging -->
<div class="bg-red-500/20 border-2 border-yellow-500">
  <!-- Add transparent red background to see layout -->
  <!-- Add yellow border to see boundaries -->
  
  <div class="bg-blue-500/20 p-4">
    Content here
  </div>
</div>

<!-- Use outline to see element boundaries -->
<div class="outline outline-red-500 outline-2">
  Debug element
</div>

Common Problem-Solving Techniques

<!-- 1. Classes not working - check order -->
<!-- ❌ Wrong - bg-red-500 will override bg-blue-500 -->
<div class="bg-blue-500 bg-red-500">Text</div>

<!-- ✅ Correct - use conditional class -->
<div class="bg-blue-500 hover:bg-red-500">Text</div>

<!-- 2. Responsive not working -->
<!-- ❌ Wrong -->
<div class="text-lg sm:text-base">Text</div>

<!-- ✅ Correct - Mobile-first -->
<div class="text-base sm:text-lg">Text</div>

<!-- 3. Z-index issues -->
<div class="relative">
  <div class="absolute z-10 bg-white p-4">Dropdown</div>
  <div class="relative z-20">Content above dropdown</div>
</div>

13. Workflow and Project Structure

Professional File Organization

project/
├── src/
│   ├── styles/
│   │   ├── globals.css           # Tailwind imports + global styles
│   │   ├── components.css        # Component-specific styles
│   │   ├── utilities.css         # Custom utility classes
│   │   └── themes/
│   │       ├── light.css         # Light theme variables
│   │       └── dark.css          # Dark theme variables
│   ├── components/
│   │   ├── ui/                   # Reusable UI components
│   │   │   ├── Button/
│   │   │   │   ├── Button.jsx
│   │   │   │   ├── Button.stories.js
│   │   │   │   └── Button.test.js
│   │   │   ├── Card/
│   │   │   │   ├── Card.jsx
│   │   │   │   ├── CardHeader.jsx
│   │   │   │   ├── CardBody.jsx
│   │   │   │   └── CardFooter.jsx
│   │   │   ├── Input/
│   │   │   │   ├── Input.jsx
│   │   │   │   ├── TextArea.jsx
│   │   │   │   └── Select.jsx
│   │   │   └── index.js          # Export all UI components
│   │   ├── layout/               # Layout components
│   │   │   ├── Header/
│   │   │   │   ├── Header.jsx
│   │   │   │   ├── Navigation.jsx
│   │   │   │   └── UserMenu.jsx
│   │   │   ├── Footer/
│   │   │   │   └── Footer.jsx
│   │   │   ├── Sidebar/
│   │   │   │   ├── Sidebar.jsx
│   │   │   │   └── SidebarItem.jsx
│   │   │   └── Layout.jsx        # Main layout wrapper
│   │   ├── forms/                # Form-specific components
│   │   │   ├── ContactForm.jsx
│   │   │   ├── LoginForm.jsx
│   │   │   └── RegisterForm.jsx
│   │   └── pages/                # Page-specific components
│   │       ├── HomePage/
│   │       ├── AboutPage/
│   │       └── ContactPage/
│   ├── hooks/                    # Custom React hooks
│   │   ├── useTheme.js
│   │   ├── useLocalStorage.js
│   │   └── useApi.js
│   ├── utils/
│   │   ├── cn.js                 # Class name utility
│   │   ├── theme.js              # Theme configuration
│   │   ├── constants.js          # App constants
│   │   └── helpers.js            # Helper functions
│   ├── assets/
│   │   ├── images/
│   │   ├── icons/
│   │   └── fonts/
│   └── pages/                    # Next.js pages or React Router
├── docs/
│   ├── design-system.md          # Design system documentation
│   ├── component-guide.md        # Component usage guide
│   └── style-guide.html          # Visual style guide
├── storybook/                    # Storybook configuration
├── tests/                        # Test files
├── .vscode/
│   ├── settings.json             # VS Code settings
│   ├── extensions.json           # Recommended extensions
│   └── snippets/                 # Custom code snippets
├── tailwind.config.js            # Tailwind configuration
├── postcss.config.js             # PostCSS configuration
├── .prettierrc                   # Prettier configuration
├── .eslintrc.js                  # ESLint configuration
└── package.json

Class Name Utility Function (cn.js)

// utils/cn.js
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

/**
 * Combines class names and merges Tailwind classes intelligently
 * @param {...(string|Object|Array)} inputs - Class names to combine
 * @returns {string} Combined and merged class names
 */
export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

// Example usage:
// cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)
// cn('bg-red-500', condition && 'bg-blue-500') // => conditional classes
// cn(['bg-red-500', 'text-white'], { 'font-bold': isActive }) // => mixed types

14. Component Patterns You Should Know

Compound Component Pattern

// Compound Component Pattern
function Card({ children, className, ...props }) {
  return (
    <div 
      className={cn('bg-white rounded-lg shadow-md overflow-hidden', className)}
      {...props}
    >
      {children}
    </div>
  )
}

function CardHeader({ children, className, ...props }) {
  return (
    <div 
      className={cn('px-6 py-4 border-b border-gray-200', className)}
      {...props}
    >
      {children}
    </div>
  )
}

function CardContent({ children, className, ...props }) {
  return (
    <div className={cn('px-6 py-4', className)} {...props}>
      {children}
    </div>
  )
}

function CardFooter({ children, className, ...props }) {
  return (
    <div 
      className={cn('px-6 py-4 border-t border-gray-200 bg-gray-50', className)}
      {...props}
    >
      {children}
    </div>
  )
}

Card.Header = CardHeader
Card.Content = CardContent
Card.Footer = CardFooter

// Usage
<Card>
  <Card.Header>
    <h3 className="font-semibold">Card Title</h3>
  </Card.Header>
  <Card.Content>
    <p>Card content goes here</p>
  </Card.Content>
  <Card.Footer>
    <button className="btn-primary">Action</button>
  </Card.Footer>
</Card>

15. Dark Mode Techniques

Complete Dark Mode Toggle

<!-- Dark mode toggle button -->
<button 
  id="theme-toggle"
  class="
    p-2 rounded-lg 
    bg-gray-200 dark:bg-gray-700 
    text-gray-800 dark:text-gray-200
    hover:bg-gray-300 dark:hover:bg-gray-600
    transition-colors duration-200
  "
>
  <!-- Sun icon (show in dark mode) -->
  <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59z"/>
  </svg>
  
  <!-- Moon icon (show in light mode) -->
  <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 24 24">
    <path d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"/>
  </svg>
</button>

<!-- Dark mode optimized components -->
<div class="
  bg-white dark:bg-gray-800
  text-gray-900 dark:text-gray-100
  border border-gray-200 dark:border-gray-700
  p-6 rounded-lg
">
  <h3 class="font-semibold mb-2">Dark Mode Card</h3>
  <p class="text-gray-600 dark:text-gray-300">
    This card adapts to dark mode automatically
  </p>
</div>

<script>
// Dark mode toggle script
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;

// Check for saved theme preference or default to system preference
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
  html.classList.add('dark');
}

themeToggle.addEventListener('click', () => {
  html.classList.toggle('dark');
  localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
});
</script>

16. Complex Layout Creation Techniques

Professional Dashboard Layout

<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow-sm">
    <div class="px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <img class="h-8 w-auto" src="logo.svg" alt="Logo">
          <nav class="hidden md:flex ml-6 space-x-8">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">
              Dashboard
            </a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">
              Analytics
            </a>
          </nav>
        </div>
        
        <div class="flex items-center space-x-4">
          <button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75z"/>
            </svg>
          </button>
          
          <div class="relative">
            <img class="h-8 w-8 rounded-full" src="avatar.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="flex">
    <!-- Sidebar -->
    <aside class="w-64 bg-white dark:bg-gray-800 shadow-sm min-h-screen">
      <nav class="mt-5 px-2">
        <div class="space-y-1">
          <a href="#" class="
            bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100
            group flex items-center px-2 py-2 text-sm font-medium rounded-md
          ">
            <svg class="text-gray-500 mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
            </svg>
            Dashboard
          </a>
          
          <a href="#" class="
            text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700
            group flex items-center px-2 py-2 text-sm font-medium rounded-md
          ">
            <svg class="text-gray-400 mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
            Users
          </a>
        </div>
      </nav>
    </aside>

    <!-- Main content -->
    <main class="flex-1 p-6">
      <div class="max-w-7xl mx-auto">
        <!-- Stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
            <div class="flex items-center">
              <div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
                <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Users</p>
                <p class="text-2xl font-semibold text-gray-900 dark:text-gray-100">12,345</p>
              </div>
            </div>
          </div>
          
          <!-- Repeat for other stats -->
        </div>

        <!-- Charts and tables -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Recent Activity</h3>
            <div class="space-y-3">
              <div class="flex items-center">
                <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                <div class="flex-1">
                  <p class="text-sm text-gray-900 dark:text-gray-100">User John Doe registered</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p>
                </div>
              </div>
              <!-- More activities -->
            </div>
          </div>
          
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Performance</h3>
            <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
              Chart placeholder
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

17. Advanced Hover States Techniques

Interactive Cards and Buttons

<!-- Advanced button hover effects -->
<div class="flex flex-wrap gap-4">
  <!-- Gradient button with glow -->
  <button class="
    relative px-6 py-3 
    bg-gradient-to-r from-purple-500 to-pink-500
    text-white font-semibold rounded-lg
    transition-all duration-300 ease-out
    hover:from-purple-600 hover:to-pink-600
    hover:shadow-[0_0_20px_rgba(168,85,247,0.4)]
    hover:-translate-y-0.5
    active:translate-y-0
  ">
    Gradient Glow
  </button>

  <!-- 3D button effect -->
  <button class="
    px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg
    shadow-[0_4px_0_0_rgb(37,99,235)]
    transition-all duration-150
    hover:shadow-[0_2px_0_0_rgb(37,99,235)]
    hover:translate-y-0.5
    active:shadow-[0_0_0_0_rgb(37,99,235)]
    active:translate-y-1
  ">
    3D Effect
  </button>

  <!-- Border slide effect -->
  <button class="
    relative px-6 py-3 
    bg-transparent border-2 border-green-500 text-green-500
    font-semibold rounded-lg overflow-hidden
    transition-colors duration-300
    hover:text-white
    group
  ">
    <span class="relative z-10">Border Slide</span>
    <div class="
      absolute inset-0 bg-green-500
      transform -translate-x-full
      transition-transform duration-300
      group-hover:translate-x-0
    "></div>
  </button>
</div>

<!-- Interactive card gallery -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="
    group relative bg-white rounded-xl shadow-lg overflow-hidden
    transition-all duration-500 ease-out
    hover:shadow-2xl hover:-translate-y-2
    cursor-pointer
  ">
    <div class="relative overflow-hidden">
      <img 
        class="w-full h-48 object-cover transition-transform duration-700 group-hover:scale-110" 
        src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400" 
        alt=""
        loading="lazy"
      >
      <div class="
        absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent
        opacity-0 group-hover:opacity-100
        transition-opacity duration-300
      "></div>
      
      <!-- Floating action button -->
      <button class="
        absolute top-4 right-4 p-2 bg-white rounded-full shadow-lg
        opacity-0 transform translate-y-2
        group-hover:opacity-100 group-hover:translate-y-0
        transition-all duration-300 delay-100
      ">
        <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
        </svg>
      </button>
    </div>
    
    <div class="p-6">
      <h3 class="
        font-semibold text-lg text-gray-900 mb-2
        group-hover:text-blue-600 transition-colors duration-200
      ">
        Card Title
      </h3>
      <p class="text-gray-600 mb-4">
        Beautiful card with hover effects and animations
      </p>
      
      <div class="
        flex items-center justify-between
        opacity-0 transform translate-y-2
        group-hover:opacity-100 group-hover:translate-y-0
        transition-all duration-300 delay-200
      ">
        <span class="text-2xl font-bold text-blue-600">$99</span>
        <button class="
          px-4 py-2 bg-blue-500 text-white rounded-lg font-medium
          hover:bg-blue-600 transition-colors duration-200
        ">
          Buy Now
        </button>
      </div>
    </div>
    
    <!-- Shine effect -->
    <div class="
      absolute inset-0 -top-2 -left-2
      bg-gradient-to-r from-transparent via-white/20 to-transparent
      transform -skew-x-12 -translate-x-full
      group-hover:animate-[shine_0.8s_ease-out]
    "></div>
  </div>
</div>

<style>
@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}
</style>

18. Scrollbar and Selection Customization Techniques

Custom Scrollbar

/* Custom scrollbar styles */
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  
  .scrollbar-thumb-rounded {
    scrollbar-color: rgb(156 163 175) transparent;
  }
  
  /* Webkit scrollbars */
  .scrollbar-custom::-webkit-scrollbar {
    @apply w-2;
  }
  
  .scrollbar-custom::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
  }
  
  .scrollbar-custom::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full hover:bg-gray-500;
  }
  
  /* Dark mode scrollbar */
  .dark .scrollbar-custom::-webkit-scrollbar-track {
    @apply bg-gray-800;
  }
  
  .dark .scrollbar-custom::-webkit-scrollbar-thumb {
    @apply bg-gray-600 hover:bg-gray-500;
  }
}

<!-- Custom scrollbar container -->
<div class="
  h-64 overflow-y-auto p-4 bg-white rounded-lg border
  scrollbar-thin scrollbar-thumb-rounded scrollbar-custom
">
  <div class="space-y-4">
    <p>Content that requires scrolling...</p>
    <p>More content...</p>
    <!-- Repeat for scrollable content -->
  </div>
</div>

Custom Text Selection

@layer base {
  ::selection {
    @apply bg-blue-200 text-blue-900;
  }
  
  .dark ::selection {
    @apply bg-blue-800 text-blue-100;
  }
  
  /* Specific selection colors for different sections */
  .hero-section ::selection {
    @apply bg-purple-200 text-purple-900;
  }
  
  .code-block ::selection {
    @apply bg-gray-800 text-gray-100;
  }
}

19. Advanced CSS Grid Techniques

Masonry Layout and Complex Grids

<!-- Masonry-style layout -->
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
  <div class="break-inside-avoid bg-white rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-32 object-cover" src="image1.jpg" alt="" loading="lazy">
    <div class="p-4">
      <h3 class="font-semibold mb-2">Short content</h3>
      <p class="text-gray-600 text-sm">Brief description</p>
    </div>
  </div>
  
  <div class="break-inside-avoid bg-white rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="image2.jpg" alt="" loading="lazy">
    <div class="p-4">
      <h3 class="font-semibold mb-2">Longer content card</h3>
      <p class="text-gray-600 text-sm">
        This card has more content and will be taller than others, 
        creating a masonry effect with the CSS columns property.
      </p>
    </div>
  </div>
  
  <div class="break-inside-avoid bg-white rounded-lg shadow-md overflow-hidden">
    <div class="p-4">
      <h3 class="font-semibold mb-2">Text only</h3>
      <p class="text-gray-600 text-sm">No image, just text content</p>
    </div>
  </div>
</div>

<!-- Complex grid layouts -->
<div class="grid grid-cols-6 grid-rows-4 gap-4 h-screen p-4">
  <!-- Featured article - large -->
  <article class="
    col-span-6 md:col-span-4 row-span-2
    bg-gradient-to-br from-blue-500 to-purple-600 
    text-white p-6 rounded-xl
    flex flex-col justify-end
    relative overflow-hidden
    group cursor-pointer
  ">
    <img 
      class="absolute inset-0 w-full h-full object-cover opacity-30 group-hover:opacity-20 transition-opacity" 
      src="featured.jpg" 
      alt=""
      loading="lazy"
    >
    <div class="relative z-10">
      <span class="text-sm opacity-90">Featured Article</span>
      <h2 class="text-2xl md:text-3xl font-bold mb-2">
        Amazing Discovery in Science
      </h2>
      <p class="opacity-90 mb-4">
        Scientists have made a breakthrough that could change everything...
      </p>
      <button class="
        bg-white/20 hover:bg-white/30 
        text-white px-4 py-2 rounded-lg 
        backdrop-blur-sm transition-colors
      ">
        Read More
      </button>
    </div>
  </article>
  
  <!-- Sidebar content -->
  <aside class="col-span-6 md:col-span-2 row-span-4 space-y-4">
    <!-- Trending -->
    <div class="bg-white rounded-xl p-4 shadow-sm">
      <h3 class="font-semibold mb-3">Trending Now</h3>
      <div class="space-y-3">
        <div class="flex items-center space-x-3">
          <img class="w-12 h-12 rounded-lg object-cover" src="thumb1.jpg" alt="" loading="lazy">
          <div class="flex-1">
            <h4 class="font-medium text-sm">Article Title</h4>
            <p class="text-xs text-gray-500">2 hours ago</p>
          </div>
        </div>
        <!-- More trending items -->
      </div>
    </div>
    
    <!-- Newsletter signup -->
    <div class="bg-gradient-to-br from-green-400 to-blue-500 text-white p-4 rounded-xl">
      <h3 class="font-semibold mb-2">Stay Updated</h3>
      <p class="text-sm opacity-90 mb-3">Get the latest news in your inbox</p>
      <div class="flex">
        <input 
          type="email" 
          placeholder="Email" 
          class="flex-1 px-3 py-2 rounded-l-lg text-gray-900 text-sm"
        >
        <button class="bg-white/20 px-4 py-2 rounded-r-lg hover:bg-white/30 transition-colors">
          →
        </button>
      </div>
    </div>
  </aside>
  
  <!-- Secondary articles -->
  <article class="col-span-3 md:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
    <img class="w-full h-32 object-cover" src="article2.jpg" alt="" loading="lazy">
    <div class="p-4">
      <h3 class="font-semibold mb-1">Secondary Article</h3>
      <p class="text-gray-600 text-sm">Brief description...</p>
    </div>
  </article>
  
  <article class="col-span-3 md:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
    <img class="w-full h-32 object-cover" src="article3.jpg" alt="" loading="lazy">
    <div class="p-4">
      <h3 class="font-semibold mb-1">Another Article</h3>
      <p class="text-gray-600 text-sm">Brief description...</p>
    </div>
  </article>
</div>

20. Performance Optimization Techniques

Lazy Loading and Performance

<!-- Optimized image loading -->
<img 
  class="w-full h-64 object-cover rounded-lg"
  src="placeholder.jpg"
  data-src="actual-image.jpg"
  alt="Description"
  loading="lazy"
  onload="this.classList.add('loaded')"
>

<style>
img {
  transition: opacity 0.3s;
}
img:not(.loaded) {
  opacity: 0.7;
}
img.loaded {
  opacity: 1;
}
</style>

<!-- Progressive enhancement -->
<div class="
  bg-gradient-to-r from-gray-200 to-gray-300
  animate-pulse rounded-lg
  aspect-video
" data-image-container>
  <!-- Placeholder while loading -->
  <img 
    class="w-full h-full object-cover rounded-lg opacity-0 transition-opacity duration-500"
    data-src="image.jpg"
    alt="Content"
    onload="this.style.opacity=1; this.parentElement.classList.remove('animate-pulse')"
  >
</div>

<!-- Intersection Observer for animations -->
<div class="
  opacity-0 translate-y-8
  transition-all duration-700
  [&.animate-in]:opacity-100 [&.animate-in]:translate-y-0
" data-animate>
  Content that animates in when scrolled into view
</div>

<script>
// Intersection Observer for scroll animations
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
      observer.unobserve(entry.target);
    }
  });
}, observerOptions);

document.querySelectorAll('[data-animate]').forEach(el => {
  observer.observe(el);
});
</script>

CSS-in-JS Optimization

// Optimized class concatenation
const getButtonClasses = (variant, size, disabled) => {
  const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
  
  const variants = {
    primary: 'bg-blue-500 hover:bg-blue-600 text-white focus:ring-blue-500',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900 focus:ring-gray-500',
    outline: 'border-2 border-gray-300 hover:bg-gray-50 text-gray-700 focus:ring-gray-500'
  };
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };
  
  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
  
  return `${baseClasses} ${variants[variant]} ${sizes[size]} ${disabledClasses}`.trim();
};

// Usage
<button className={getButtonClasses('primary', 'md', false)}>
  Click me
</button>

Summary of All Tips

After completing episode 9, you've learned Tailwind CSS from basics to professional level. Key tips to remember:

🛠️ Setup and Tools:

  • Install essential VS Code extensions (IntelliSense, Headwind)
  • Use Prettier plugin for class ordering
  • Configure VS Code settings to support Tailwind

⚡ Productivity Tips:

  • Write classes in proper order (Position → Display → Sizing → Spacing → Styling)
  • Use arbitrary values when necessary w-[calc(100%-2rem)]
  • Use shortcuts and multi-cursor selection
  • Use cn() utility function for combining classes

🎨 Design Principles:

  • Always think Mobile-First
  • Use colors from the same scale for consistency
  • Use opacity modifiers instead of creating new colors bg-blue-500/20
  • Add micro-interactions to make UI lively

🚀 Advanced Techniques:

  • Use appropriate Grid and Flexbox patterns
  • Create reusable compound components
  • Use CSS custom properties for theming
  • Optimize performance with lazy loading and intersection observer

📱 Responsive Design:

  • Use breakpoint modifiers systematically
  • Hide/show elements appropriately
  • Adjust layout for each screen size

🌙 Dark Mode:

  • Use dark: prefix for dark mode styles
  • Create complete theme toggle
  • Store preference in localStorage

🎯 Performance:

  • Use minimum classes needed for results
  • Use @apply only for frequently used patterns
  • Optimize images with lazy loading
  • Use CSS-in-JS efficiently

🐛 Debugging:

  • Use debug classes like bg-red-500/20 to see layout
  • Check class order and specificity
  • Use browser DevTools with Tailwind IntelliSense

🏗️ Project Structure:

  • Organize files systematically
  • Create reusable component library
  • Use design tokens for consistency

💡 Pro Tips:

  • Use arbitrary values for edge cases: w-[calc(50%-1rem)]
  • Use group utilities for parent-child interactions: group-hover:
  • Use peer utilities for sibling interactions: peer-invalid:
  • Include transition with all interactive elements: transition-all duration-200
  • Use semantic class names with Tailwind: className={cn('btn', 'btn-primary', className)}

🎓 Next Learning Path:

  • Practice by cloning favorite interfaces
  • Create your own design system
  • Follow Tailwind community and updates
  • Experiment with headless UI libraries
  • Learn advanced CSS features that work with Tailwind

🔥 Final Pro Tips:

  • Speed up development by creating snippets for frequently used patterns
  • Maintain consistency by using design tokens and component systems
  • Stay updated with Tailwind releases and community plugins
  • Practice regularly - the more you use it, the faster and better you get

The most important truth: Tailwind CSS isn't just a utility framework, but a tool that helps us think about design systems systematically. Learning Tailwind is learning good design principles, managing spacing, colors, typography, and responsive design professionally.

Hope these techniques help you write Tailwind CSS faster, more efficiently, and create beautiful work more easily.

From now on, try applying these techniques to real projects, and remember that consistent practice is the key to becoming a pro!

Follow Superdev School to learn new technologies and advance

Read more

🔵 Facebook: Superdev School  (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school