feat(cli): Add new tailwind4 ui setup command

[dsthedev]

Adds a new tailwind4 ui setup command for adding the newest tailwind v4 library and updates to vite config.

[netlify]

✅ Deploy Preview for cedarjs canceled.

Name	Link
🔨 Latest commit	0b4cf1d
🔍 Latest deploy log	https://app.netlify.com/projects/cedarjs/deploys/6943a535786d2e0007046d92

[greptile-apps]

Greptile Overview

Greptile Summary

Adds a new CLI command cedar setup ui tailwind4 to configure Tailwind CSS v4 for Vite projects, including automatic package installation, Vite config manipulation, CSS directive injection, and VS Code integration.

Key Changes:

• Installs tailwindcss@^4.1.17 and @tailwindcss/vite@^4.1.17 packages
• Intelligently updates Vite config by: detecting and adding import statements, inserting tailwindcss() plugin, and converting .ts to .mts for ESM compatibility
• Injects Tailwind v4 directives (@import "tailwindcss" and dark mode variant) into index.css
• Optionally updates scaffold.css with Tailwind classes
• Configures VS Code with recommended extensions (PostCSS, Tailwind IntelliSense) and custom class attributes

Notes:

• The implementation closely mirrors the existing tailwindcss command structure
• The Vite config manipulation handles edge cases like multiline imports, empty plugin arrays, and missing config patterns

Confidence Score: 4/5

• Safe to merge with one minor style improvement recommended
• The implementation is solid and follows existing patterns in the codebase. The main issue is that VS Code extensions can be duplicated if the command runs multiple times (same issue exists in tailwindcssHandler.js). The Vite config manipulation logic is thorough and handles edge cases well. All other code follows established conventions.
• The tailwind4Handler.js file could benefit from deduplicating VS Code extensions (see inline comment)

Important Files Changed

File Analysis

Filename	Score	Overview
packages/cli/src/commands/setup/ui/libraries/tailwind4.js	5/5	Added command configuration for tailwind4 setup, follows existing patterns perfectly
packages/cli/src/commands/setup/ui/ui.js	5/5	Registered new tailwind4 command in UI setup, straightforward import and command addition
packages/cli/src/commands/setup/ui/libraries/tailwind4Handler.js	4/5	Implements Tailwind v4 setup with Vite config manipulation, VS Code integration, and CSS directive injection; contains minor style issue with extension deduplication

Sequence Diagram

sequenceDiagram
    participant User
    participant CLI
    participant tailwind4.js
    participant helpers.js
    participant tailwind4Handler.js
    participant FileSystem
    participant Yarn
    participant VSCode

    User->>CLI: cedar setup ui tailwind4
    CLI->>tailwind4.js: Parse command & options
    tailwind4.js->>helpers.js: createHandler('tailwind4')
    helpers.js->>tailwind4Handler.js: Import handler dynamically
    tailwind4Handler.js->>tailwind4Handler.js: Record telemetry
    
    alt install = true
        tailwind4Handler.js->>Yarn: Install tailwindcss@^4.1.17, @tailwindcss/vite@^4.1.17
        Yarn-->>tailwind4Handler.js: Packages installed
    end
    
    tailwind4Handler.js->>FileSystem: Check for vite.config.ts
    alt vite.config.ts exists && vite.config.mts doesn't exist
        tailwind4Handler.js->>FileSystem: Rename .ts to .mts
    end
    
    tailwind4Handler.js->>FileSystem: Read Vite config
    tailwind4Handler.js->>tailwind4Handler.js: Add tailwindcss import
    tailwind4Handler.js->>tailwind4Handler.js: Add tailwindcss() to plugins
    tailwind4Handler.js->>FileSystem: Write updated Vite config
    
    tailwind4Handler.js->>FileSystem: Read index.css
    alt Directives don't exist
        tailwind4Handler.js->>FileSystem: Prepend Tailwind directives to index.css
    end
    
    alt scaffold.css exists
        tailwind4Handler.js->>User: Prompt to override scaffold.css
        User-->>tailwind4Handler.js: Confirm/Deny
        alt User confirms
            tailwind4Handler.js->>FileSystem: Read tailwind template
            tailwind4Handler.js->>FileSystem: Write scaffold.css
        end
    end
    
    alt Using VS Code
        tailwind4Handler.js->>FileSystem: Update .vscode/extensions.json
        tailwind4Handler.js->>FileSystem: Update .vscode/settings.json
        tailwind4Handler.js->>VSCode: Check installed extensions
        VSCode-->>tailwind4Handler.js: Extension list
        tailwind4Handler.js->>User: Recommend missing extensions
    end
    
    tailwind4Handler.js-->>User: Setup complete

Loading

[greptile-apps]

Additional Comments (1)

1. packages/cli/src/commands/setup/ui/libraries/tailwind4Handler.js, line 355-361 (link)

   style: Running this command multiple times will add duplicate extensions

_{3 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}