ワンクリックでManusで任意のスキルを実行

tailwind-css-patterns

スター0

フォーク0

更新日2026年3月25日 00:21

Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

ihj04982

ihj04982/my-cursor-settings

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Tailwind CSS Development Patterns

Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).

When to Use

Styling React/HTML components with utility classes
Building responsive layouts with breakpoints
Flexbox and grid layouts, spacing, typography, colors
Custom design systems, mobile-first, dark mode

Core Concepts

Utility-first: Apply styles in markup (e.g. bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded).

Responsive: Mobile-first breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Example: w-full md:w-1/2 lg:w-1/3.

Additional Resources

For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see reference.md.

このリポジトリの他の Skills

同じリポジトリ

frontend-skill

ihj04982/my-cursor-settings

Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.

2026-04-140

playwright-cli

ihj04982/my-cursor-settings

Automate browser interactions, test web pages and work with Playwright tests.

2026-04-140

vitest-testing-skills

ihj04982/my-cursor-settings

Advanced guidelines and best practices for writing tests using Vitest. Apply this skill when generating, reviewing, or refactoring test codes to prevent common pitfalls and ensure high performance.

2026-04-140

design-guide-1536x864-touch

ihj04982/my-cursor-settings

Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.

2026-03-260

agent-orchestration

ihj04982/my-cursor-settings

Lists available Cursor agents (planner, architect, tdd-guide, code-reviewer, security-reviewer, build-error-resolver, e2e-runner, refactor-cleaner, doc-updater) and when to use each. Use when the user asks which agent to use, how to delegate work, or what agents are available.

2026-03-250

async-parallelization-patterns

ihj04982/my-cursor-settings

Async parallelization patterns — Promise.all, waterfall prevention, dependency-based parallelism, RSC component composition, deferred await. Use when optimizing async operations, API routes, or data fetching.

2026-03-250

name	tailwind-css-patterns
description	Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
language	html,tsx,jsx,vue,svelte
framework	tailwindcss
license	MIT

Tailwind CSS Development Patterns

Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).

When to Use

Styling React/HTML components with utility classes
Building responsive layouts with breakpoints
Flexbox and grid layouts, spacing, typography, colors
Custom design systems, mobile-first, dark mode

Core Concepts

Utility-first: Apply styles in markup (e.g. bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded).

Responsive: Mobile-first breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Example: w-full md:w-1/2 lg:w-1/3.

Additional Resources

For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see reference.md.