> Modern utility-first CSS with CSS-native configuration. --- ## 1. Tailwind v4 Architecture ### What Changed from v3 | v3 (Legacy) | v4 (Current) | |-------------|--------------| | `tailwind.config.js` | CSS-based `@theme` directive | | PostCSS plugin | Oxide engine (10x faster) | | JIT mode | Native, always-on | | Plugin system | CSS-native features | | `@apply` directive | Still works, discouraged | ### v4 Core Concepts | Concept | Description | |---------|-------------| | **CSS-first** | Configuration in CSS, not JavaScript | | **Oxide Engine** | Rust-based compiler, much faster | | **Native Nesting** | CSS nesting without PostCSS | | **CSS Variables** | All tokens exposed as `--*` vars | --- ## 2. CSS-Based Configuration ### Theme Definition ``` @theme { /* Colors - use semantic names */ --color-primary: oklch(0.7 0.15 250); --color-surface: oklch(0.98 0 0); --color-surface-dark: oklch(0.15 0 0); /* Spacing scale */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; /* Typography */ --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; } ``` ### When to Extend vs Override | Action | Use When | |--------|----------| | **Extend** | Adding new values alongside defaults | | **Override** | Replacing default scale entirely | | **Semantic tokens** | Project-specific naming (primary, surface) | --- ## 3. Container Queries (v4 Native) ### Breakpoint vs Container | Type | Responds To | |------|-------------| | **Breakpoint** (`md:`) | Viewport width | | **Container** (`@container`) | Parent element width | ### Container Query Usage | Pattern | Classes | |---------|---------| | Define container | `@container` on parent |
Philosophy
Skillora では、スキルを売る人も買う人も同じコミュニティにいます。 気に入った作者の新作やアップデートを追いかけたり、自分も出品して還元を受け取ったり。 好きなクリエイターをフォローして、発見と応援をひとつの場所で。
購入後にターミナルで実行してください。
正規購入者にはインストールコマンド再実行で最新版が配信されます。
継続的な価値を提供します
Skilloraのスキルはライセンス認証で保護されており、定期的にアップデートされます。スクリーンショットやコピーでは最新版を受け取れず、バグ修正や新機能の恩恵も得られません。正規購入者には常に最新バージョンが自動配信されます。
利用規約を確認 →—
評価なし
まだレビューがありません。最初のレビューを書いてみましょう。
Free
無料で導入共有する
SNS・リンクで広める
Tailwind Patterns — AIの使い方が変わるスキル
Tailwind CSS v4 patterns. CSS-first config, container queries, design tokens.
https://skillora.jp/skills/tailwind-patterns
この作者の他のスキル