docs: add Tailwind CSS migration guide#293
Open
alexgrozav wants to merge 7 commits into
Open
Conversation
Add a new "Migration Guides" section under Getting Started with a Tailwind CSS -> Styleframe guide. Maps utilities, config, modifiers, and variant helpers (CVA) to Styleframe tokens, `_property:value` utilities, and recipes with side-by-side tables. All token/utility/modifier mappings verified against theme/src source. Closes SF-5
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Modifier factories receive no `key` param (verified against engine/core/src/tokens/modifier.ts and types/tokens.ts), so the array-key form could not emit per-breakpoint queries. Replace with one modifier per breakpoint, each closing over its own width — mirrors useDarkModifier. Also note the Step 5 recipe fragment layers on the Step 1 config. Per Étoile review.
The comparison page carried the same non-compiling `({ key })` modifier
snippet as the migration guide (inherited from engine/core/AGENTS.md,
tracked in SF-11). Replace with one modifier per breakpoint closing over
its width.
Mirror the Tooling/Integrations pattern: drop the landing page and use a folder-level .navigation.yml so Migrations renders as a group header with the Tailwind guide nested under it. Examples unchanged.
Move the migration folder to top-level 10.migration/ and add it to the gettingStarted section's folder array in sections.ts, so it renders as a group header alongside Tooling and Integrations (which are folded into the same section the same way) at /docs/getting-started/migration/tailwind. Verified in the browser: Migrations header with the Tailwind guide nested.
Add navigation.title to the page frontmatter so the sidebar entry under Migrations reads "From TailwindCSS"; page H1 and route unchanged.
Set the page title to "From TailwindCSS" and drop the redundant navigation.title so the H1 and sidebar label read the same, per Alex.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new Migration Guides section under Getting Started, with the first guide: Migrate from Tailwind CSS (closes SF-5).
The audience is the highest-intent one we have — teams already fluent in Tailwind. The guide is built around side-by-side tables mapping the vocabularies:
_property:value.hover:/dark:/disabled:→_hover:/_dark:/_disabled:, with an honest note that responsivesm:/md:prefixes are not built in (shows the custom breakpoint modifier).@theme→useDesignTokensPreset, including dark mode as a token override.recipe()anduse*Recipe.Files
apps/docs/content/docs/01.getting-started/05.migration.md— section landing (mirrors06.comparisons.md).apps/docs/content/docs/01.getting-started/05.migration/01.tailwind.md— the guide (mirrors the03.guidespattern).Verification
theme/src/values/*(spacing, fontSize, fontWeight, borderRadius, lineHeight, color, breakpoint),theme/src/utilities/*(class names incl.padding-inline/padding-block),theme/src/modifiers/*andtheme/src/presets/useModifiersPreset.ts(confirmed no built-in breakpoint modifier),engine/core/src/tokens/recipe.ts(recipe API).::note,::tip,::warning,::code-group,::card) match existing usage across the docs.@styleframe/docsis in the changesets ignore list.Handoff
Per the ticket, code samples must compile — handing the examples to Étoile to verify against the current API before this lands.
Finding (not fixing here)
While verifying, I found the published Create a Design System in 15 Minutes guide claims responsive modifiers (
_md:,_sm:–_2xl:) ship fromuseModifiersPreset. Source shows they do not (no breakpoint modifier is registered). Filing separately so it can be corrected without widening this PR.