|
6 | 6 | ## Scope |
7 | 7 |
|
8 | 8 | - Technology : Tailwind CSS |
9 | | -- Versions : v3.4-v4 |
10 | | -- Languages : CSS,HTML,JavaScript |
| 9 | +- Versions : v3.4.x (stable, JIT, JS-config) AND v4.0.x (Oxide engine in Rust, CSS-first `@theme` config) |
| 10 | +- Languages : CSS, HTML, JavaScript |
11 | 11 | - Prefix : tailwind |
12 | 12 | - License : MIT |
13 | 13 |
|
14 | | -## Identified Topics (raw, pre-research) |
| 14 | +## Mission |
15 | 15 |
|
16 | | -TODO : fill via Phase 1 step 3.5 brainstorm. Group by category. |
| 16 | +Deterministic Claude skills covering Tailwind CSS utility-first methodology, v3-to-v4 migration, configuration patterns, variant system, responsive design, dark mode, plugin authorship, JIT engine, build integration, and the tailwind-merge interop pattern needed for shadcn/ui contexts. |
17 | 17 |
|
18 | | -### Core |
| 18 | +## Identified Topics (raw, pre-research) |
19 | 19 |
|
20 | | -- ... |
| 20 | +### Core |
| 21 | +- core-architecture : utility-first philosophy, Oxide engine vs JIT, design tokens, content scanning |
| 22 | +- core-design-system : spacing scale, color scale (default + P3 in v4), type scale, breakpoints |
| 23 | +- core-v3-vs-v4 : breaking changes overview, engine differences, config-location swap, default behaviors |
21 | 24 |
|
22 | 25 | ### Syntax |
23 | | - |
24 | | -- ... |
| 26 | +- syntax-utility-classes : base utility patterns (spacing, color, typography, layout, flexbox, grid) |
| 27 | +- syntax-variants : hover/focus/active/disabled, group-*, peer-*, aria-*, data-*, supports-* |
| 28 | +- syntax-responsive : mobile-first breakpoints, sm/md/lg/xl/2xl, container queries (`@container` in v4) |
| 29 | +- syntax-dark-mode : `dark:` variant, class strategy vs media strategy, v4 `@variant` selector |
| 30 | +- syntax-arbitrary-values : `bg-[#1da1f2]`, `w-[calc(100%-2rem)]`, modifier-arbitrary, type hints |
| 31 | +- syntax-state-modifiers : first/last/odd/even, before/after, placeholder, file, marker, selection |
| 32 | +- syntax-pseudo-elements : `::before`, `::after`, content utilities |
25 | 33 |
|
26 | 34 | ### Implementation |
27 | | - |
28 | | -- ... |
| 35 | +- impl-config-v3 : `tailwind.config.js` (theme, extend, content, plugins, presets) |
| 36 | +- impl-config-v4 : CSS-first `@theme`, `@source`, `@plugin`, `@utility`, `@variant` directives |
| 37 | +- impl-build-vite : `@tailwindcss/vite` plugin (v4) or PostCSS (v3), HMR, content config |
| 38 | +- impl-build-postcss : `postcss.config.js`, autoprefixer pairing, production purge |
| 39 | +- impl-build-cli : standalone `tailwindcss` CLI for non-Node builds |
| 40 | +- impl-build-nextjs : App Router integration, RSC compatibility, fonts pipeline |
| 41 | +- impl-build-astro : `@astrojs/tailwind` vs Vite plugin, scoped vs global |
| 42 | +- impl-plugins-official : `@tailwindcss/typography`, `@tailwindcss/forms`, `@tailwindcss/container-queries`, `@tailwindcss/aspect-ratio` |
| 43 | +- impl-plugins-custom : `plugin()` API, `addUtilities`, `addComponents`, `matchUtilities`, theme access |
| 44 | +- impl-apply-directive : `@apply` use cases vs anti-patterns, component classes, `@layer` placement |
| 45 | +- impl-tailwind-merge : `tailwind-merge` for class deduplication (shadcn/ui pattern), `clsx` interop |
| 46 | +- impl-migration-v3-v4 : automated upgrade tool, manual breaking changes, dual-version strategy |
29 | 47 |
|
30 | 48 | ### Errors |
31 | | - |
32 | | -- ... |
| 49 | +- errors-utility-soup : long class lists, when to extract components vs accept utility-soup, lint patterns |
| 50 | +- errors-build-failures : content path misses, JIT not picking classes, dynamic class detection failure |
| 51 | +- errors-purge-issues : production CSS missing classes, safelist usage, dynamic class anti-patterns |
| 52 | +- errors-specificity : `@apply` ordering, `@layer` conflicts, important-modifier `!`, plugin-order |
| 53 | +- errors-v4-migration : common upgrade pitfalls, deprecated utilities, color-format changes |
33 | 54 |
|
34 | 55 | ### Agents |
35 | | - |
36 | | -- ... |
| 56 | +- agents-validator : cross-skill consistency checker, classname linter, anti-pattern detector |
37 | 57 |
|
38 | 58 | ## Estimated Skill Count |
39 | 59 |
|
40 | | -TODO |
| 60 | +| Category | Estimated | |
| 61 | +|----------|-----------| |
| 62 | +| core | 3 | |
| 63 | +| syntax | 7 | |
| 64 | +| impl | 13 | |
| 65 | +| errors | 5 | |
| 66 | +| agents | 1 | |
| 67 | +| **Total** | **~29** | |
| 68 | + |
| 69 | +Final count adjusted after Phase 2 research (merges/drops/splits in Refinement Decisions table). |
| 70 | + |
| 71 | +## Cross-Package Boundaries |
| 72 | + |
| 73 | +- **shadcn/ui** (companion pkg) : Tailwind is required dependency. Skills here MUST stay tech-agnostic for utility patterns. shadcn-specific class composition lives in shadcn pkg, but `tailwind-merge` usage lives here (utility-level tool). |
| 74 | +- **frontend-design** (companion pkg) : design-system thinking + visual aesthetics live there. Token-level scale definitions live here. |
| 75 | +- **Vite** (companion pkg) : Vite-plugin setup mentioned in impl-build-vite, but deep Vite config patterns live in Vite pkg. Skill here covers Tailwind side only. |
| 76 | + |
| 77 | +## Open Questions for Phase 2 |
| 78 | + |
| 79 | +1. Does v4.0 still support `tailwind.config.js` for back-compat, or CSS-first only? |
| 80 | +2. Container queries : v4 built-in vs v3 plugin behavior differences? |
| 81 | +3. `@apply` deprecation status in v4? |
| 82 | +4. Color format defaults : v4 OKLCH vs v3 HSL/RGB? |
| 83 | +5. Plugin API stability v3 → v4? |
| 84 | +6. Migration tool coverage : what does it auto-fix vs manual? |
41 | 85 |
|
42 | 86 | ## Next : Phase 2 Deep Research |
43 | 87 |
|
44 | | -After this raw masterplan is committed, dispatch research-agent per topic-cluster to produce `docs/research/vooronderzoek-tailwind.md`. |
| 88 | +Dispatch research-agent to produce `docs/research/vooronderzoek-tailwind.md` (>=2000 words, WebFetch-verified against SOURCES.md URLs, Newly Discovered Sub-Topics section). |
0 commit comments