Tailwind utility rewrite

A customer pipeline page after migration.

This version keeps the same product decisions while replacing Bootstrap components and local CSS with Tailwind utilities plus a small theme extension for brand tokens.

Review dashboard Compare Bootstrap version

Quarter forecast

$284k in active deals

+18%

Win rate

42%

Response time

1.8h

72% of target

New opportunities

128

24 added this week

Expansion revenue

$96k

31% above plan

At-risk accounts

7

Needs owner follow-up

Pipeline health

Deals that need attention

Northstar Labs

Enterprise onboarding, $42k

Legal review

Bluebird Finance

Security questionnaire, $28k

Technical validation

Helio Studio

Renewal expansion, $17k

Ready to sign

Starter

For small teams validating a pipeline process.

$29/seat

  • Basic pipeline boards
  • Email sync
  • Weekly reports
Most popular

Growth

For revenue teams that need forecasting and automation.

$59/seat

  • Forecasting dashboard
  • Automation rules
  • Priority support

Scale

For distributed teams with compliance requirements.

Custom

  • Advanced permissions
  • Audit exports
  • Dedicated success manager

What this version demonstrates

Tailwind moves the design decisions closer to the markup.

The brand color, rounded cards, soft shadows, responsive spacing, and status treatments are visible in the classes or the small Tailwind theme extension instead of being split across Bootstrap and custom CSS.

Replace component classes

Map Bootstrap cards, badges, buttons, grid, and progress bars to utilities.

Promote repeated values

Keep brand colors and shadows in Tailwind config when they repeat.

Keep breakpoints explicit

Use responsive prefixes where the Bootstrap grid used columns.

Delete CSS last

Remove Bootstrap and legacy overrides after parity checks pass.