一键在 Manus 中运行任何 Skill

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 仓库查看创作者相关仓库

下载

在 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.