How to manipulate column widths in two-col slidev slide layout?

by

Summary

This postmortem addresses a common column width manipulation challenge in Slidev’s two-cols layout. The core issue is achieving asymmetric column sizing (e.g., 35% right column) without breaking the responsive grid system. Key takeaway: Slidev’s default two-cols uses fixed 50/50 splits, requiring custom Tailwind classes for width control.

Root Cause

  • Default grid implementation: Slidev’s two-cols uses grid-cols-2 (Tailwind class) creating equal-width columns
  • No built-in width parameters: Frontmatter lacks direct width configuration options
  • CSS specificity conflicts: Custom styles may override Tailwind grid classes without proper precedence handling

Why This Happens in Real Systems

  • Abstraction limitations: High-level tools (Slidev) often hide low-level CSS control
  • Design-flexibility gap: Users expect granular control over visual elements
  • Framework constraints: Presentation tools prioritize simplicity over advanced layout customization
  • Documentation gaps: Tailwind’s arbitrary value syntax ([width%]) is rarely highlighted in Slidev docs

Real-World Impact

  • Design inconsistency: Inflexible layouts compromise branding and content hierarchy
  • Developer frustration: Time wasted on CSS overrides instead of content creation
  • Reduced reusability: Custom solutions complicate template maintenance
  • Accessibility risks: Poor column sizing can hurt readability on different screen sizes

Example or Code

---
layout: two-cols
layoutClass: grid-cols-[65%_35%] gap-8
---
::right::
# Right Column (35%)
Custom-width right panel content
::left::
# Left Column (65%)
Default left panel content

How Senior Engineers Fix It

  1. Leverage Tailwind arbitrary values: Use grid-cols-[65%_35%] in layoutClass
  2. Maintain gap consistency: Preserve existing gap classes (e.g., gap-8)
  3. Test responsiveness: Verify layout behavior across viewport sizes
  4. Document custom classes: Add comments explaining non-standard grid values
  5. Fallback strategy: Provide default grid-cols-2 for older Slidev versions

Why Juniors Miss It

  • Over-reliance on defaults: Expecting built-in width parameters that don’t exist
  • Tailwind knowledge gap: Unfamiliarity with arbitrary value syntax ([...])
  • Documentation tunnel vision: Focusing on Slidev basics instead of Tailwind integration
  • CSS precedence misunderstanding: Assuming custom styles automatically override grid classes
  • Tool-specific assumptions: Treating Slidev as a fully-featured layout editor rather than a presentation layer

Leave a Comment