feat: add Tailwind CSS v4 export support#45
Merged
Conversation
Adds a `--format tailwind` export that emits a CSS `@theme { ... }`
block using Tailwind v4's native CSS-variable token namespaces
(--color-*, --font-*, --text-*, --leading-*, --tracking-*,
--font-weight-*, --radius-*, --spacing-*).
The previous v3 JSON output is preserved under the explicit
`--format tailwind-v3` name. Since the project is pre-1.0 (0.1.1),
renaming `tailwind` to mean 'latest' follows the convention most
tooling uses for unversioned names.
New module: packages/cli/src/linter/tailwind/v4/
- spec.ts — types and Zod schema for v4 theme data
- handler.ts — DesignSystemState → v4 theme data
- serialize.ts — v4 theme data → CSS @theme string
Tests: 17 new tests (handler + serializer + fixture).
Collaborator
|
Hey @sbrsubuvga! Thank you for this contribution. The only change I want to make is by making the the v3 option still the default due it being a breaking change. I'll address this in a follow up though. |
davideast
approved these changes
May 2, 2026
davideast
added a commit
that referenced
this pull request
May 2, 2026
…64) Rename export format flags to avoid 'Tailwind CSS' product name confusion and restore backwards compatibility: - css-tailwind: Tailwind v4 CSS @theme block (new) - json-tailwind: Tailwind v3 theme.extend JSON - tailwind: backwards-compatible alias for json-tailwind The output-first naming (css-*, json-*) tells the user what they'll get before which tool it targets. Bare 'tailwind' preserves existing behavior (JSON output), preventing a breaking change from PR #45. Updates README.md export section and interop docs to reflect new naming.
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
2 participants
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.
Fixed : #19
Adds a
--format tailwindexport that emits a CSS@theme { ... }block using Tailwind v4's native CSS-variable token namespaces (--color-, --font-, --text-, --leading-, --tracking-, --font-weight-, --radius-, --spacing-).The previous v3 JSON output is preserved under the explicit
--format tailwind-v3name. Since the project is pre-1.0 (0.1.1), renamingtailwindto mean 'latest' follows the convention most tooling uses for unversioned names.New module: packages/cli/src/linter/tailwind/v4/
Tests: 17 new tests (handler + serializer + fixture).