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

시작하기

tailwind-css

스타5

포크1

업데이트2026년 3월 24일 08:23

Write Tailwind utility classes with proper responsive design, dark mode, and configuration.

설치

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

Manus에서 실행

출처

sheldon010507-collab

sheldon010507-collab/x-agent

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

다운로드

Manus에서 실행

Content Configuration

content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production
Glob patterns: "./src/**/*.{js,jsx,ts,tsx,html}" covers nested directories
Dynamic class names like bg-${color}-500 won't be detected—use complete class names or safelist
Check production build size—if unexpectedly small, content paths are wrong

Responsive Prefixes

Mobile-first: unprefixed styles apply to all sizes, md: applies at medium AND above
sm:hidden md:block means hidden on small, visible on medium+—not "only on medium"
Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
Custom breakpoints in config override defaults—use extend.screens to add without replacing

Dark Mode

dark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle
Dark class on <html> or <body>, not on individual components
dark:bg-gray-900 only applies when ancestor has class="dark"
System preference: darkMode: 'media' uses prefers-color-scheme

State Variants

hover:, focus:, active: work as expected
group-hover: requires group class on parent—child reacts to parent hover
peer-focus: requires peer class on sibling AND sibling must come first in DOM
Stack variants: dark:hover:bg-gray-700 applies on hover in dark mode

Arbitrary Values

bg-[#1da1f2] for one-off colors—brackets for any arbitrary value
w-[calc(100%-2rem)] for calc expressions
grid-cols-[1fr_2fr_1fr] underscores for spaces in values
Arbitrary properties: [mask-type:alpha] for unsupported CSS properties

@apply Traps

@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected
Order in @apply matters unlike HTML classes—later utilities override earlier
Prefer HTML classes over @apply—easier to maintain, better tree-shaking
If you must use @apply, keep it simple: base styles only

Configuration

extend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colors
Top-level replaces defaults: colors: { brand: '#xxx' } removes all default colors
theme() function in CSS: border-color: theme('colors.gray.200')
Plugin order matters—later plugins can override earlier ones

Important Modifier

! prefix forces important: !mt-4 generates margin-top: 1rem !important
Use sparingly—usually indicates specificity battle that should be fixed
important: true in config makes ALL utilities important—avoid, breaks third-party CSS
important: '#app' scopes specificity to selector—better than global important

Common Mistakes

class="px-4 px-6" last one wins in stylesheet, not in HTML—both get applied, cascade decides
Forgetting overflow-hidden with rounded-* on parent with absolute children
h-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)
truncate needs width constraint or max-w-* to actually truncate

Performance

JIT is default since v3—generates only used classes, no purge needed
Avoid safelist with patterns like bg-*—defeats tree-shaking
@layer components for reusable component styles—proper cascade order
Large arbitrary values generate unique classes—extract to config if repeated

이 저장소의 다른 Skills

같은 저장소

x-agent

sheldon010507-collab/x-agent

X (Twitter) full-stack automation — multi-platform trend search, AI content generation, auto-posting, DM monitoring, daily reports. Use when user mentions X/Twitter ops, searching trends, writing tweets, checking DMs, or viewing reports.

2026-04-105

freeride

sheldon010507-collab/x-agent

Manages free AI models from OpenRouter for OpenClaw. Automatically ranks models by quality, configures fallbacks for rate-limit handling, and updates openclaw.json. Use when the user mentions free AI, OpenRouter, model switching, rate limits, or wants to reduce AI costs.

2026-03-275

api-designer

sheldon010507-collab/x-agent

Use when designing REST or GraphQL APIs, creating OpenAPI specifications, or planning API architecture. Invoke for resource modeling, versioning strategies, pagination patterns, error handling standards.

2026-03-245

api-dev

sheldon010507-collab/x-agent

Scaffold, test, document, and debug REST and GraphQL APIs. Use when the user needs to create API endpoints, write integration tests, generate OpenAPI specs, test with curl, mock APIs, or troubleshoot HTTP issues.

2026-03-245

database-operations

sheldon010507-collab/x-agent

Use when designing database schemas, writing migrations, optimizing SQL queries, fixing N+1 problems, creating indexes, setting up PostgreSQL, configuring EF Core, implementing caching, partitioning tables, or any database performance question.

2026-03-245

devops

sheldon010507-collab/x-agent

Automate deployments, manage infrastructure, and build reliable CI/CD pipelines.

2026-03-245

name	Tailwind CSS
description	Write Tailwind utility classes with proper responsive design, dark mode, and configuration.
metadata	{"clawdbot":{"emoji":"🌊","requires":{"bins":["npx"]},"os":["linux","darwin","win32"]}}

Content Configuration

content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production
Glob patterns: "./src/**/*.{js,jsx,ts,tsx,html}" covers nested directories
Dynamic class names like bg-${color}-500 won't be detected—use complete class names or safelist
Check production build size—if unexpectedly small, content paths are wrong

Responsive Prefixes

Mobile-first: unprefixed styles apply to all sizes, md: applies at medium AND above
sm:hidden md:block means hidden on small, visible on medium+—not "only on medium"
Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
Custom breakpoints in config override defaults—use extend.screens to add without replacing

Dark Mode

dark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle
Dark class on <html> or <body>, not on individual components
dark:bg-gray-900 only applies when ancestor has class="dark"
System preference: darkMode: 'media' uses prefers-color-scheme

State Variants

hover:, focus:, active: work as expected
group-hover: requires group class on parent—child reacts to parent hover
peer-focus: requires peer class on sibling AND sibling must come first in DOM
Stack variants: dark:hover:bg-gray-700 applies on hover in dark mode

Arbitrary Values

bg-[#1da1f2] for one-off colors—brackets for any arbitrary value
w-[calc(100%-2rem)] for calc expressions
grid-cols-[1fr_2fr_1fr] underscores for spaces in values
Arbitrary properties: [mask-type:alpha] for unsupported CSS properties

@apply Traps

@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected
Order in @apply matters unlike HTML classes—later utilities override earlier
Prefer HTML classes over @apply—easier to maintain, better tree-shaking
If you must use @apply, keep it simple: base styles only

Configuration

extend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colors
Top-level replaces defaults: colors: { brand: '#xxx' } removes all default colors
theme() function in CSS: border-color: theme('colors.gray.200')
Plugin order matters—later plugins can override earlier ones

Important Modifier

! prefix forces important: !mt-4 generates margin-top: 1rem !important
Use sparingly—usually indicates specificity battle that should be fixed
important: true in config makes ALL utilities important—avoid, breaks third-party CSS
important: '#app' scopes specificity to selector—better than global important

Common Mistakes

class="px-4 px-6" last one wins in stylesheet, not in HTML—both get applied, cascade decides
Forgetting overflow-hidden with rounded-* on parent with absolute children
h-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)
truncate needs width constraint or max-w-* to actually truncate

Performance

JIT is default since v3—generates only used classes, no purge needed
Avoid safelist with patterns like bg-*—defeats tree-shaking
@layer components for reusable component styles—proper cascade order
Large arbitrary values generate unique classes—extract to config if repeated