원클릭으로 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.