Communitygithub.com

tailwindcss-docs

Tailwind CSS v4의 최신 실무 지식을 공식 문서를 기반으로 제공합니다. Tailwind CSS v4를 사용하는 모든 작업에 활용하세요. v3의 습관이 v4에서 조용히 깨지는 경우가 많기 때문에, 작은 작업에서도 사용하는 것이 좋습니다.

tailwindcss-docs란 무엇인가요?

이 스킬은 Tailwind CSS v4.x에 대한 포괄적인 지침을 제공합니다. v4는 CSS-first 설정, 변경된 기본값, 이름이 변경된 유틸리티 클래스 등 v3와 크게 다른 점이 많습니다. Vite, PostCSS, CLI 등 다양한 빌드 도구와의 통합 방법을 다루며, @theme, @utility, @custom-variant, @apply, @reference, @source와 같은 새로운 CSS 기반 설정 방법을 설명합니다. 또한, 기존 v3 프로젝트를 v4로 마이그레이션하는 방법(tailwind.config.js, @tailwind 지시문, darkMode 클래스, safelist, bg-opacity 등)과 다크 모드 구현, 테마 커스터마이징 등 실무에서 필요한 모든 내용을 포함하고 있습니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/quentin-autret/claude-skills/tree/main/skills/tailwindcss-docs
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Tailwind CSS v4

이 스킬은 https://tailwindcss.com/docs 에 문서화된 Tailwind CSS v4.x를 다룹니다. v4는 JavaScript가 아닌 CSS로 구성되며, 많은 v3 클래스 이름과 기본값이 변경되었습니다. 이 스킬은 습관과 다른 점, 즉 CSS-first 설정, 예상치 못한 기본값, 이름이 변경된 유틸리티 및 문서에서 권장하는 패턴을 다룹니다. 참조 파일의 각 주장은 출처 페이지로 끝납니다.

탐색 방법

  1. 아래 규칙을 읽으세요. v4에서 깨지는 가장 빈번한 v3 습관을 잡아냅니다.
  2. 마지막 표에서 작업과 일치하는 참조 파일 하나를 여세요.
  3. 프로젝트에 tailwind.config.js, @tailwind 지시문 또는 v3 클래스 이름이 있거나, v3 습관이 있을 수 있는 코드를 검토할 때는 먼저 references/upgrade-from-v3.md를 읽으세요. 기본 마이그레이션 경로는 새 브랜치에서 npx @tailwindcss/upgrade를 실행한 후, diff를 검토하고 브라우저에서 테스트하는 것입니다. https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool

빠른 시작 (CSS-first, Vite)

npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({ plugins: [tailwindcss()] })

/* app.css */
@import "tailwindcss";

@theme {
  --color-midnight: #121063;
  --font-display: "Oswald", sans-serif;
}

@custom-variant dark (&:where(.dark, .dark *));

가장 중요한 규칙

설정 및 구성

테마 및 사용자 정의 CSS

클래스 구문

변경된 기본값

클래스를 사용한 다크 모드

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

// 페이지가 렌더링되기 전에 <head>에 인라인으로 추가
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);

localStorage.theme = "dark" 또는 "light"로 설정하고, localStorage.removeItem("theme")로 시스템 설정을 따르도록 합니다. https://tailwindcss.com/docs/dark-mode#with-system-theme-support

참조 파일

파일읽어야 할 때
references/installation-and-frameworks.mdTailwind 설치, Vite, PostCSS 또는 CLI 선택, 프레임워크별 단계, CSS 모듈, 편집기 도구
references/upgrade-from-v3.mdv3 프로젝트 마이그레이션, v3 클래스 이름 또는 구성이 있는 코드 검토
references/utilities-and-variants.md클래스 작성: 임의 값, 충돌, 상태 변형, group 및 peer, 반응형, 컨테이너 쿼리, 다크 모드
references/theme-and-colors.md색상, 글꼴, 중단점, 간격, 애니메이션, 테마 네임스페이스 추가 또는 재정의
references/custom-styles.md기본 스타일, Preflight, 컴포넌트 클래스, @utility, 함수형 유틸리티, @custom-variant, @variant
references/directives-and-source-detection.md@apply, @reference, --alpha(), --spacing(), @config, @plugin, @source, 가져오기 옵션(prefix, important, source)
references/layout-flexbox-grid.mddisplay, position, inset, z-index, columns, flex, grid, 정렬 및 -safe 정렬
references/spacing-and-sizing.mdpadding, margin, space, width, height, size, container scale, viewport 단위, 논리적 크기
references/typography.md글꼴, 글꼴 크기 및 줄 높이, 자간, 텍스트 줄 바꿈, 오버플로우 줄 바꿈, 장식, content
references/backgrounds-and-borders.md그라데이션, 배경 이미지, 크기 및 위치, 반경, 테두리 너비 및 색상, 아웃라인
references/effects-and-filters.md그림자, 링, 텍스트 그림자, 불투명도, 혼합 모드, 마스크, 필터 및 배경 필터
references/transitions-transforms-tables.md전환, 불연속 전환, 애니메이션, 회전, 크기 조절, 이동, 3D, 확대/축소, 테이블
references/interactivity-and-svg.md색상 구성표, 필드 크기 조정, 스크롤바, 스크롤 스냅, 커서, will-change, SVG 채우기 및 획, forced colors

Individual skills in this repo

This repo contains 16 individual skills — each has its own dedicated page.

eslint-docs

Teaches current ESLint 10 practices drawn from the official documentation. Use when writing, reviewing or fixing an eslint.config.js (flat config, defineConfig, files, ignores, globalIgnores, extends, languageOptions, globals, parsers, processors), configuring ESLint rules and severities, disable comments and inline config, running the CLI in CI (--fix, --cache, --quiet, --max-warnings, bulk suppressions, formatters, feature flags, MCP server), writing custom rules (meta, schema, fixes, suggestions, selectors, scope, code paths) and testing them with RuleTester, building plugins, shareable configs, custom parsers, processors or formatters, using the Node.js API (ESLint, Linter), or migrating to ESLint 9 or 10 from eslintrc. Triggers on eslint, eslint.config.js, flat config, .eslintrc, .eslintignore, @eslint/js, js/recommended, eslint-disable, no-unused-vars, no-restricted-imports, no-restricted-syntax, RuleTester, eslint-plugin, eslint-config, FlatCompat, context.getScope is not a function, ESLint 10.

grafana-cloud-docs

Grafana Cloud pitfalls, defaults, limits and current patterns from the Grafana, Mimir, Loki and Tempo docs, each tied to its docs URL. Use when sending OpenTelemetry data to Grafana Cloud, writing PromQL, LogQL or TraceQL, controlling cardinality and cost, designing alert rules, routing notifications, provisioning alerting, building Synthetic Monitoring checks, using the /apis dashboard API, choosing access policy tokens or service accounts, or migrating off API keys, the Loki Exporter and legacy /api routes.

javascript-docs

Teaches current JavaScript (ECMAScript) practice drawn from the MDN JavaScript documentation. Use when writing, reviewing or fixing modern JavaScript, choosing a built-in API, or replacing a deprecated pattern. Covers equality and coercion, let/const and the temporal dead zone, strict mode, ASI, functions, classes and private fields, objects, prototypes, Proxy, Reflect, Symbol, eval, operators (??, ?., spread, BigInt arithmetic), statements, Promise, async/await, Promise.try, iterators and iterator helpers, generators, using/await using, DisposableStack, WeakRef, Array (toSorted, at, groupBy, fromAsync), Map, Set methods, WeakMap, strings and Unicode, encodeURIComponent, RegExp (v flag, RegExp.escape, lastIndex), Number, Math, BigInt, JSON (rawJSON, revivers), typed arrays, ArrayBuffer, base64, SharedArrayBuffer, Atomics, Temporal, Date, Intl (DateTimeFormat, NumberFormat, Collator, Segmenter, PluralRules), errors (cause, Error.isError), ES modules, import attributes, import.meta, dynamic import.

next-intl-docs

Teaches current next-intl 4 practices for internationalizing Next.js apps, drawn from the official documentation. Use when setting up next-intl with the App Router, writing i18n/request.ts, adding a [locale] segment with defineRouting, createMiddleware in proxy.ts (formerly middleware.ts), building locale switchers with createNavigation, translating with useTranslations or getTranslations, passing messages to NextIntlClientProvider, writing ICU messages (plurals, select, rich text), formatting dates, numbers and lists with useFormatter, translating metadata, Server Actions, Route Handlers, localized 404 and error pages, static rendering with next/root-params, type-safe messages through AppConfig, testing with Jest, Vitest, Storybook, or extracting inline messages with useExtracted. Triggers on next-intl, useTranslations, getTranslations, NextIntlClientProvider, getRequestConfig, i18n routing, locale prefix, localePrefix, NEXT_LOCALE, hreflang, setRequestLocale, ICU messages, App Router internationalization.

nodejs-docs

Teaches Node.js practice drawn from the official Node.js API documentation, with pitfalls, surprising defaults, deprecations and replacements, each backed by its nodejs.org URL. Use when writing, reviewing, debugging or upgrading Node.js code, or choosing a built-in module (fs, crypto, streams, http, process, CLI flags, node:test, ESM/CommonJS, package.json exports, TypeScript type stripping, child_process, worker_threads, node:sqlite, deprecations).

playwright-docs

Pitfalls, surprising defaults and recommended patterns of Playwright Test for JavaScript and TypeScript, distilled from the official docs. Use when writing, reviewing, debugging or configuring Playwright tests (@playwright/test, playwright.config.ts, npx playwright test), including flaky tests, locators (getByRole, filter, strict mode), web-first assertions (expect, toHaveText, toBeVisible, expect.poll, toPass), fixtures, storageState authentication, project dependencies, timeouts, retries, network mocking (page.route, routeFromHAR, routeWebSocket), API testing, clock, aria snapshots, toHaveScreenshot, axe accessibility scans, traces, UI mode, reporters, CI, Docker, sharding, test locks, component testing with stories and mount, codegen, Playwright MCP, playwright-cli and migration from Puppeteer, Protractor, Testing Library or older Playwright versions.

postgresql-docs

Pitfalls, surprising defaults, PostgreSQL 18 changes and recommended patterns from the official PostgreSQL 18 documentation, each backed by its postgresql.org URL. Use when writing or reviewing PostgreSQL SQL, schema design, migrations and ALTER TABLE locks, indexes, transactions, isolation levels and retries, locking, upsert and MERGE, COPY, JSONB, timestamptz, generated and identity columns, partitioning, EXPLAIN, vacuum, roles, row-level security, PL/pgSQL, full-text search, connection settings, and upgrades to PostgreSQL 18.

react-docs

Writes, reviews and upgrades React 19.3 code from the official react.dev documentation. Use when writing components and Hooks, removing unnecessary useEffect calls, fixing Effect dependencies with useEffectEvent, building forms with Actions (useActionState, useOptimistic, useFormStatus, form action), using Server Components, 'use client', 'use server' and Server Functions, Suspense, use(), useTransition, useDeferredValue, ViewTransition, Activity, adopting React Compiler and eslint-plugin-react-hooks, deciding on useMemo, useCallback and memo, server rendering and hydration (createRoot, hydrateRoot, renderToPipeableStream, prerender), or migrating from React 18 (forwardRef, Context.Provider, ReactDOM.render, propTypes, defaultProps). Triggers on React, JSX, hooks, useState, useEffect, useRef, useContext, Server Components, RSC, Actions, React Compiler, Strict Mode, hydration mismatch, React 19 upgrade.

rust-std-docs

Gives current guidance from the official Rust standard library docs (std 1.99.1 stable) on pitfalls, panics, platform differences, discouraged APIs and newer stable replacements. Use when writing, reviewing or refactoring Rust code that uses std, especially collections (Vec, HashMap, BTreeMap, BinaryHeap, entry, extract_if, sort), Option/Result/error handling (expect, ?, Error, ExitCode, panic), iterators (collect, flatten, Peekable, try_fold), Box/Rc/RefCell/Cow/Pin/mem::take, Arc/Mutex/RwLock/OnceLock/LazyLock/thread::scope/mpsc/Condvar/atomics, String/str/fmt/format!/OsString/CString, io/fs/path (BufWriter, OpenOptions, PathBuf::join), process/env/net/time (Command, set_var, TcpStream, Instant, Duration), From/TryFrom/AsRef/Ord/Drop/Deref/Clone, and unsafe raw pointers, MaybeUninit, transmute, NonNull or integer overflow and float ordering.

socketio-docs

Builds, configures and debugs Socket.IO 4.8 servers and clients from the official Socket.IO v4 documentation. Use when writing a Node.js Socket.IO server (Express, Fastify, Koa, Bun, uWebSockets.js) or a socket.io-client app, emitting events with acknowledgements, timeout() and emitWithAck, broadcasting to rooms and namespaces, authenticating in middleware with the auth option, configuring CORS, reverse proxies and sticky sessions, scaling with the Redis, Redis Streams, Postgres, MongoDB or Cluster adapter, enabling connection state recovery and delivery guarantees, tuning reconnection, writing tests, troubleshooting connection issues, or migrating from Socket.IO v2 or v3. Triggers on Socket.IO, socket.io, socket.io-client, io(), new Server, emit, emitWithAck, acknowledgements, rooms, namespaces, broadcast, io.use, middleware, CORS, Redis adapter, sticky sessions, connection state recovery, reconnection, connect_error, Session ID unknown. Not for plain WebSocket servers such as ws without Socket.IO.

tauri-docs

Tauri 2 apps, tauri.conf.json, capabilities and permissions, commands and invoke, events and channels, plugins, bundling, signing and the updater, migration from Tauri 1. Guides Tauri 2 work from the official v2 documentation, including scopes, managed state, plugin authoring, CSP and the isolation pattern, testing and debugging, Linux, Windows and macOS packages, and mobile and store releases. Use when writing or reviewing a Tauri 2 app, adding a plugin or a capability, fixing a "not allowed" or "forbidden path" error, wiring IPC between Rust and the webview, packaging, signing or publishing a desktop or mobile build, or upgrading a Tauri 1 or 2.0 beta project.

tokio-docs

Gives current guidance from the official tokio documentation (tokio 1.54.1) on async Rust pitfalls, cancel safety, blocking code, surprising defaults and deprecated APIs. Use when writing, reviewing or debugging async Rust code that uses tokio, especially the runtime (#[tokio::main], #[tokio::test], Builder, enable_all, block_on, current_thread, LocalRuntime, shutdown, feature flags), tasks (spawn, JoinHandle, JoinSet, abort, spawn_blocking, block_in_place, LocalSet, spawn_local, task_local), select!, join!, try_join!, cancellation and graceful shutdown, sync primitives (Mutex across .await, RwLock, Semaphore, Notify, OnceCell), channels (mpsc backpressure, oneshot, broadcast lag, watch), time (sleep, interval, MissedTickBehavior, timeout, paused time, start_paused), I/O and networking (AsyncReadExt, BufWriter flush, split, io::copy, framing, TcpListener, TcpStream, UdpSocket), tokio::fs, process (Command, kill_on_drop, Child), signals (ctrl_c, Windows console events) and Windows named pipes.

typescript-docs

Configures, writes and upgrades TypeScript 6.0 code and tsconfig.json from the official TypeScript documentation. Use when upgrading from TypeScript 5.x to 6.0 (strict, types, rootDir, baseUrl, moduleResolution node, target es5, outFile, esModuleInterop), choosing module and moduleResolution, writing package.json exports and imports, fixing ESM and CommonJS interop, enabling verbatimModuleSyntax or erasableSyntaxOnly, setting up project references and tsc --build, writing .d.ts files, checking JavaScript with JSDoc, or debugging narrowing, generics, mapped types, decorators and enums. Triggers on TypeScript, tsc, tsconfig, TS5112, ignoreDeprecations, nodenext, bundler, .d.ts, @ts-check, TypeScript 6 upgrade.

typesense-docs

Pitfalls, surprising defaults and recommended patterns of the Typesense search engine, distilled from the official docs. Use when designing a Typesense collection schema, writing search parameters (q, query_by, filter_by, sort_by, facet_by, group_by), tuning typo tolerance and ranking, building vector, semantic or hybrid search, conversational RAG or natural language search, creating API keys and scoped search keys for multi-tenancy, indexing and import (JSONL, upsert, emplace, dirty_values), syncing from a primary database, reindexing through aliases, managing synonyms (synonym sets), curation sets and stopwords, joins, analytics rules and query suggestions, InstantSearch, migrating from Algolia, or running, clustering, backing up and upgrading a Typesense server.

vite-docs

Teaches current Vite 8 practices drawn from the official documentation. Use when writing or fixing a vite.config, migrating from Vite 7 (Rolldown and Oxc replacing Rollup and esbuild), configuring the dev server, proxy or HMR, handling import.meta.env and modes, tuning the production build, library mode, SSR, writing a Vite plugin, using the HMR or JavaScript API, or the Environment API. Triggers on vite.config, defineConfig, rolldownOptions, import.meta.env, loadEnv, optimizeDeps, ssrLoadModule, ModuleRunner, this.environment, upgrade to Vite 8.

vitest-docs

Teaches current Vitest 5 practices drawn from the official documentation. Use when writing, reviewing or fixing Vitest tests (test, describe, expect, test.for, fixtures with test.extend, hooks, snapshots), mocking with vi (vi.fn, vi.spyOn, vi.mock, vi.when, fake timers, stubGlobal, stubEnv), configuring vitest.config or projects, choosing an environment or pool, filtering and running tests in CI, measuring coverage with v8 or istanbul, debugging slow or flaky suites, testing components in browser mode with Playwright, or migrating from Jest, Mocha or Vitest 4. Triggers on vitest, vi.mock, vi.fn, vitest.config, toMatchSnapshot, expect.poll, coverage thresholds, browser mode, @vitest/browser-playwright, jsdom, happy-dom, migrate Jest to Vitest, upgrade Vitest 5.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community