메뉴
Tailwind CSS v4 syntax and v3→v4 migration reference. Use when the user mentions 'Tailwind v4', 'upgrade Tailwind', @theme, @utility, or @import 'tailwindcss', or is working in a project whose config indicates v4.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Control Obsidian notes from the terminal via the `obsidian` app CLI, with `notesmd-cli` as a headless fallback. Covers CRUD, search, vault structure (orphans, backlinks, unresolved links), tasks, properties, Bases, and plugin dev. Use when the user mentions Obsidian CLI, notesmd-cli, or shell automation of vault notes.
Create analytical archival summaries of AI conversations, capturing intellectual journeys, key insights, and technical logs. Use when archiving, saving, or documenting a chat session.
Create well-formatted commits with conventional commit messages. Use when user asks to commit, wants to commit changes, or needs help with commit messages.
Create a topic note grouping related notes under a common theme, with automatic backlinking to source notes. Triggers: 'group these under a topic', 'create topic note for [[A]], [[B]], [[C]]'.
Analyze file content and propose intelligent renames using context-aware naming conventions. Date-prefixed for transactional/periodic documents, content-first for creative works. Use for organizing files, cleaning up downloads, or standardizing filenames.
Help with templates/snippets for the Obsidian Templater plugin. Use to help generate Obsidian templates from natural language, understand and debug existing tp.* snippets, and adapt vault notes and workflows to Templater when users mention Templater, tp.*, templater syntax.
| name | use-tailwind-v4 |
| description | Tailwind CSS v4 syntax and v3→v4 migration reference. Use when the user mentions 'Tailwind v4', 'upgrade Tailwind', @theme, @utility, or @import 'tailwindcss', or is working in a project whose config indicates v4. |
/* v4 import (replaces @tailwind directives) */
@import "tailwindcss";
/* Custom utilities (replaces @layer utilities) */
@utility tab-4 {
tab-size: 4;
}
/* Loading JS config (if still needed) */
@config "../../tailwind.config.js";
v4 exposes all theme values as CSS variables. Prefer these over theme():
background-color: var(--color-red-500);
font-family: var(--font-sans);
| v3 | v4 | Notes |
|---|---|---|
shadow-sm | shadow-xs | Scale shifted |
shadow | shadow-sm | Scale shifted |
drop-shadow-sm | drop-shadow-xs | Scale shifted |
drop-shadow | drop-shadow-sm | Scale shifted |
blur-sm | blur-xs | Scale shifted |
blur | blur-sm | Scale shifted |
backdrop-blur-sm | backdrop-blur-xs | Scale shifted |
backdrop-blur | backdrop-blur-sm | Scale shifted |
rounded-sm | rounded-xs | Scale shifted |
rounded | rounded-sm | Scale shifted |
outline-none | outline-hidden | outline-none now sets outline-style: none |
ring | ring-3 | Default changed from 3px to 1px |
<!-- v3: opacity utilities -->
<div class="bg-black bg-opacity-50">
<!-- v4: opacity modifiers -->
<div class="bg-black/50">
Also: flex-shrink-* → shrink-*, flex-grow-* → grow-*, overflow-ellipsis → text-ellipsis
| What | v3 Default | v4 Default |
|---|---|---|
| Border color | gray-200 | currentColor |
| Ring width | 3px | 1px |
| Ring color | blue-500 | currentColor |
| Button cursor | pointer | default |
Changed from right-to-left to left-to-right:
<!-- v3 -->
<ul class="first:*:pt-0">
<!-- v4 -->
<ul class="*:first:pt-0">
<!-- v3: square brackets -->
<div class="bg-[--brand-color]">
<!-- v4: parentheses -->
<div class="bg-(--brand-color)">
<!-- v4 prefixes are at the start, like variants -->
<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
For project migrations, run the automated upgrade tool:
npx @tailwindcss/upgrade
Requires Node.js 20+. Run in a new branch and review changes.
For complete migration details (PostCSS/Vite/CLI config, custom utilities, framework-specific issues), see references/upgrade-guide.md.