Skip to content

Migrate to Tailwind 4 #115

@benzsevern

Description

Track the Tailwind 3 → 4 migration.

Spec: docs/superpowers/specs/2026-05-28-tailwind-4-migration-design.md

TL;DR

Tailwind 4 is a major architectural rewrite (CSS-first config, new @tailwindcss/postcss, dropped/renamed utilities). CI was green on the dependabot PR (#110) but misleadingly so — CI doesn't build the playground, which is the only thing using Tailwind. The library itself ships no CSS to consumers, so this is contained to dev tooling.

Scope (6 files, all dev-only)

  • tailwind.config.ts (root) — delete (not in published files, was aspirational).
  • playground/tailwind.config.js — replaced by Tailwind 4's CSS-first config.
  • playground/postcss.config.js — switch to @tailwindcss/postcss, drop autoprefixer (now bundled).
  • playground/src/index.css — replace 3× @tailwind directives with @import "tailwindcss";.
  • package.json (root devDeps) — bump tailwind, add @tailwindcss/postcss, drop standalone autoprefixer.
  • Codemod for renamed utilities (bg-opacity-*, flex-grow-*, etc.) in playground/src/*.tsx.

Verification

The /#gallery view from #88 is the canonical visual-diff reference — every chart in every vibe, every brand kit, every texture tier on one page. Spot-check it before and after; CI lib/mcp gates are unaffected.

See spec for the phased plan, full codemod target list, and risks.

(Closes-out point for the dependabot PR #110, which is being closed as superseded by this tracking issue.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions