Claude Code Plugins

Community-maintained marketplace

Feedback

tailwind-advanced-patterns

@ak-eyther/model-project
0
0

Advanced Tailwind CSS patterns including custom themes, responsive design, dark mode, animations, and component variants. Use for complex styling or design system implementation.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name tailwind-advanced-patterns
description Advanced Tailwind CSS patterns including custom themes, responsive design, dark mode, animations, and component variants. Use for complex styling or design system implementation.
metadata [object Object]

Tailwind Advanced Patterns

Custom Theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],
      },
    },
  },
}

Dark Mode

// app/layout.tsx
export default function Layout({ children }) {
  return (
    <html className="dark">
      <body className="bg-white dark:bg-gray-900">
        {children}
      </body>
    </html>
  )
}

// Component with dark mode
function Card() {
  return (
    <div className="bg-white dark:bg-gray-800 
                    text-gray-900 dark:text-white">
      Content
    </div>
  )
}

Responsive Design

function ResponsiveGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {/* Cards */}
    </div>
  )
}

Custom Animations

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
    },
  },
}

Component Variants with clsx

import clsx from 'clsx'

interface ButtonProps {
  variant: 'primary' | 'secondary'
  size: 'sm' | 'md' | 'lg'
}

function Button({ variant, size }: ButtonProps) {
  return (
    <button
      className={clsx(
        'rounded font-medium',
        {
          'bg-blue-500 text-white': variant === 'primary',
          'bg-gray-200 text-gray-900': variant === 'secondary',
          'px-2 py-1 text-sm': size === 'sm',
          'px-4 py-2 text-base': size === 'md',
          'px-6 py-3 text-lg': size === 'lg',
        }
      )}
    >
      Click me
    </button>
  )
}

Scripts

  • scripts/skill_info.py: Print skill name and description.