Skip to content

Delete tailwind.config.ts and migrate to CSS-native declarations#1964

Merged
kmcginnes merged 1 commit into
mainfrom
delete-tailwind-config
Jul 16, 2026
Merged

Delete tailwind.config.ts and migrate to CSS-native declarations#1964
kmcginnes merged 1 commit into
mainfrom
delete-tailwind-config

Conversation

@kmcginnes

@kmcginnes kmcginnes commented Jul 16, 2026

Copy link
Copy Markdown
Collaborator

Description

Eliminates the JS config file entirely by migrating all its remaining contents to Tailwind v4 CSS-native declarations. After this, index.css is the single source of truth for all styling tokens, utilities, and theme values — no JS config, no @config directive.

What moved:

  • Logo gradient, max-width, keyframes/animations → @theme block
  • content-auto/hidden/visible → @utility declarations
  • intrinsic-size-* → functional @utility with --spacing(--value(integer))
  • Semantic z-index scale → @utility declarations (z-index has no theme namespace in v4)
  • data-open/data-closed → @custom-variant (Radix's data-state convention)
  • transition-width → transition-[width] (native arbitrary value syntax)

What was dropped (native in v4):

  • extend.aria.invalid — built-in aria-invalid: variant
  • extend.data.open/closed — replaced by @custom-variant above
  • fontFamily — Tailwind default sans renders same system font (Nunito Sans was never loaded)

Verified working: production build compiles all custom utilities into output CSS, all 2178 tests pass.

How to read

  1. tailwind.config.ts (deleted) — everything here moved somewhere else
  2. index.css — the new home: @custom-variant, @theme, and @utility blocks
  3. CollapsibleSidebar.tsxtransition-widthtransition-[width]
  4. vite.config.ts — remove stale coverage exclusion
  5. design.md — update migration banner and source-of-truth section

Validation

  • pnpm checks passes
  • pnpm test passes (2178 tests)
  • pnpm build passes — verified custom utilities (content-visibility, contain-intrinsic-size, z-index, logo-gradient, animations) all appear in compiled CSS output

Related Issues

Check List

  • I confirm that my contribution is made under the terms of the Apache 2.0 license.
  • I have verified pnpm checks passes with no errors.
  • I have verified pnpm test passes with no failures.
  • I have covered new added functionality with unit tests if necessary.
  • I have updated documentation if necessary.

Base automatically changed from font-weight-migration to main July 16, 2026 21:45
Migrate all remaining JS config contents to Tailwind v4 CSS:

- Logo gradient, max-width, keyframes, animations → @theme block
- content-auto/hidden/visible → static @Utility declarations
- intrinsic-size-* → functional @Utility with --spacing/--value
- z-index semantic scale → @Utility declarations
- data-open/data-closed → @custom-variant (Radix convention)
- transition-width → transition-[width] (arbitrary value)

Drop without replacement (native in v4):
- extend.aria.invalid (built-in aria-invalid: variant)
- extend.data.open/closed (replaced by @custom-variant above)
- fontFamily (Tailwind default sans stack renders same system font)

Also removes the @config directive from index.css and the coverage
exclusion from vite.config.ts.
@kmcginnes
kmcginnes force-pushed the delete-tailwind-config branch from ecfef8c to 3a9dec2 Compare July 16, 2026 21:46
@kmcginnes
kmcginnes marked this pull request as ready for review July 16, 2026 23:30
@kmcginnes
kmcginnes merged commit 4fc90f3 into main Jul 16, 2026
6 checks passed
@kmcginnes
kmcginnes deleted the delete-tailwind-config branch July 16, 2026 23:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Delete tailwind.config.ts and migrate to CSS-native declarations

1 participant