tailwind-advanced-patterns

Name: tailwind-advanced-patterns
Rating: 60
Author: ak-eyther

by ak-eyther

A project to copy paste the entire settings

⭐ 0🍴 0📅 2026年1月6日

GitHubで見る Manusで実行

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. allowed-tools:

Read
Write
Edit

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>
  )
}

スコア

総合スコア

60/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20

✓LICENSE

ライセンスが設定されている

+10

○説明文

100文字以上の説明がある

0/10

○人気

GitHub Stars 100以上

0/15

○最近の活動

3ヶ月以内に更新がある

0/10

○フォーク

10回以上フォークされている

0/5

✓Issue管理

オープンIssueが50未満

✓言語

プログラミング言語が設定されている

○タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です