Tailprint Builder

TailPrint Builder

TailPrint delivers the BlueprintJS visual aesthetic using only Tailwind CSS. No BlueprintJS dependency. Target: professional ERP, IoT monitoring, accounting, and warehouse management interfaces.

Core Aesthetic Rules — Never Break

• Corner radius: rounded-tp (3px) — never rounded-lg, rounded-xl, rounded-full on controls
• Control height: h-[30px] for inputs/selects, h-7 for buttons
• Data cells: always font-tp-mono tabular-nums
• Nav items: transition-none — zero animation
• Shadows: inset-style (shadow-tp-input, shadow-tp-button, shadow-tp-card)
• Font: IBM Plex Sans for UI, IBM Plex Mono for data

Root Layout

// Holy Grail: sidebar + header + main
<div className="flex h-screen bg-tp-bg font-tp-sans">
  <Sidebar />
  <div className="flex-1 flex flex-col overflow-hidden">
    <TopHeader />
    <main className="flex-1 overflow-auto p-4">
      {children}
    </main>
  </div>
</div>

Density Target

25 rows × 8 columns visible at 1080p without scrolling. Achieve via:

• h-8 table headers
• py-1 table rows (not py-3)
• text-tp-base (13px) in cells, not 16px+

Anti-Patterns

• DON'T use rounded-lg — breaks Blueprint DNA
• DON'T use animation/transition on sidebar nav items
• DON'T use text-base (16px) for table cells — use text-tp-base (13px)
• DON'T import BlueprintJS — this system is dependency-free
• DON'T use useClient for layout components — keep them server-side
• DON'T skip tabular-nums on numeric data — columns will misalign

Companion Files

Read these on demand — only when the task requires it: