원클릭으로 Manus에서 모든 스킬 실행

시작하기

tailwind-utilities

스타2

포크1

업데이트2026년 1월 23일 19:25

Best practices for Tailwind CSS, responsive design, and dark mode.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

sraloff

sraloff/gravityboots

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Tailwind Utilities

When to use this skill

Styling HTML/React components with Tailwind CSS.
Configuring tailwind.config.js.
implementing Dark Mode.

1. Structure & Organization

Ordering: logical ordering (Layout -> Box Model -> Typography -> Visuals -> Misc). Use prettier-plugin-tailwindcss if available.
Components: Extract long string classes into components (React/Blade) or use @apply sparingly (only for true reusability patterns).

2. Responsive Design

Mobile First: Write base styles for mobile, then add md:, lg: overrides.
Arbitrary values: Use [] syntax sparingly (e.g., top-[13px]) only when design system tokens don't suffice.

3. Dark Mode

Strategy: Use class strategy (toggling a class on html/body) rather than media (auto-detect) for better user control.
Colors: Use dark:bg-slate-900 or CSS variables for semantic colors (bg-background where background changes based on root theme).

이 저장소의 다른 Skills

같은 저장소

project-initialization-bootstrap

sraloff/gravityboots

Bootstraps a new project with standard folder structure, git init, basic files, planning doc skeletons, and initial memory.json. Triggers on new project creation keywords. CRITICAL for first-time setup.

2026-01-232

apache-lamp-config

sraloff/gravityboots

Configuration for Virtual Hosts, .htaccess, and PHP-FPM in LAMP stacks.

2026-01-232

api-design-patterns

sraloff/gravityboots

Principles for REST, GraphQL, versioning, and API authentication.

2026-01-232

assets-icons-fonts

sraloff/gravityboots

Optimization and usage of SVGs, fonts, and static assets.

2026-01-232

bootstrap-legacy

sraloff/gravityboots

Patterns for maintaining or migrating Bootstrap 3/4/5 projects.

2026-01-232

caddy-modern-config

sraloff/gravityboots

Caddyfile configuration, auto-HTTPS, and FastCGI.

2026-01-232

name	tailwind-utilities
description	Best practices for Tailwind CSS, responsive design, and dark mode.

Tailwind Utilities

When to use this skill

Styling HTML/React components with Tailwind CSS.
Configuring tailwind.config.js.
implementing Dark Mode.

1. Structure & Organization

Ordering: logical ordering (Layout -> Box Model -> Typography -> Visuals -> Misc). Use prettier-plugin-tailwindcss if available.
Components: Extract long string classes into components (React/Blade) or use @apply sparingly (only for true reusability patterns).

2. Responsive Design

Mobile First: Write base styles for mobile, then add md:, lg: overrides.
Arbitrary values: Use [] syntax sparingly (e.g., top-[13px]) only when design system tokens don't suffice.

3. Dark Mode

Strategy: Use class strategy (toggling a class on html/body) rather than media (auto-detect) for better user control.
Colors: Use dark:bg-slate-900 or CSS variables for semantic colors (bg-background where background changes based on root theme).