Communitygithub.com

tailwindcss-docs

Tailwind CSS v4 の公式ドキュメントに準拠した最新のプラクティスを提供します。Tailwind CSS v4 に関わるあらゆるタスク（小さなものも含む）で使用してください。v3 の習慣が v4 で静かに壊れることが多いためです。

tailwindcss-docs とは？

このスキルは、Tailwind CSS v4.x の公式ドキュメント（https://tailwindcss.com/docs）に基づき、v3 から変更された設定方法、ユーティリティクラス、デフォルト値、および推奨パターンを網羅しています。v4 では設定を CSS で行い（JavaScript の設定ファイルは不要）、多くの v3 の習慣がそのまま使えなくなります。各主張の末尾には参照元のドキュメントページが明記されており、信頼性が高いです。Vite、PostCSS、CLI などのセットアップ手順、`@theme` によるテーマカスタマイズ、クラスセレクタベースのダークモード実装、v3 からの移行手順（`npx @tailwindcss/upgrade` を使用）など、実践的な内容が含まれています。また、変更されたデフォルト（ボーダーカラー、リング、シャドウスケールなど）や新しいシンタックス（CSS 変数ショートハンド、important 修飾子、バリアントスタッキング順序）についても詳しく説明しています。

対応~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 ファーストのセットアップ、意外なデフォルト、名称変更されたユーティリティ、ドキュメントが推奨するパターン）を保持しています。各リファレンスファイルの主張の末尾には、その主張の出典となるページが記載されています。

ナビゲーション方法

  1. 以下のルールを読んでください。これらは v4 で壊れる最も頻繁な v3 の習慣を捉えています。
  2. 末尾の表から、タスクに一致するリファレンスファイルを 1 つ開いてください。
  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 ファースト、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.md表示、位置、inset、z-index、columns、flex、grid、配置と -safe 配置
references/spacing-and-sizing.mdパディング、マージン、スペース、幅、高さ、サイズ、コンテナスケール、ビューポート単位、論理サイズ
references/typography.mdフォント、フォントサイズと行の高さ、文字間隔、テキストラップ、オーバーフローラップ、装飾、コンテンツ
references/backgrounds-and-borders.mdグラデーション、背景画像、サイズと位置、半径、ボーダー幅と色、アウトライン
references/effects-and-filters.mdシャドウ、リング、テキストシャドウ、不透明度、ブレンドモード、マスク、フィルターとバックドロップフィルター
references/transitions-transforms-tables.mdトランジション、ディスクリートトランジション、アニメーション、回転、スケール、移動、3D、ズーム、テーブル
references/interactivity-and-svg.mdカラースキーム、フィールドサイジング、スクロールバー、スクロールスナップ、カーソル、will-change、SVG の fill と stroke、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