pinkpixel-dev GPUI Styling
This skill covers styling GPUI elements using Tailwind-like utility methods.
Overview
GPUI provides chainable methods similar to Tailwind CSS:
- Sizing:
.w(),.h(),.size_full() - Flexbox:
.flex(),.flex_col(),.items_center(),.justify_center() - Spacing:
.p(),.m(),.gap() - Colors:
.bg(),.text_color(),.border_color() - Borders:
.border(),.rounded()
Sizing
Width and Height
use gpui::*;
div()
.w(px(200.0)) // Fixed width
.h(px(100.0)) // Fixed height
.w_full() // Width: 100%
.h_full() // Height: 100%
.size_full() // Width & Height: 100%
Relative Units
div()
.w(relative(0.5)) // 50% of parent
.h(relative(1.0)) // 100% of parent
Min/Max Sizes
div()
.min_w(px(100.0))
.max_w(px(500.0))
.min_h(px(50.0))
.max_h(px(300.0))
Flexbox Layout
Flex Direction
div()
.flex() // Enable flexbox
.flex_row() // Horizontal (default)
.flex_col() // Vertical
// Short forms (from gpui-component)
div()
.v_flex() // flex + flex_col
.h_flex() // flex + flex_row
Alignment
div()
.flex()
.items_start() // Align items to start
.items_center() // Center items
.items_end() // Align items to end
.items_stretch() // Stretch items
.justify_start() // Justify to start
.justify_center() // Center justify
.justify_end() // Justify to end
.justify_between() // Space between
.justify_around() // Space around
Flex Properties
div()
.flex_1() // flex: 1 (grow to fill)
.flex_grow() // Allow growing
.flex_shrink() // Allow shrinking
.flex_none() // Don't grow or shrink
.flex_wrap() // Wrap items
Spacing
Padding
div()
.p(px(16.0)) // All sides
.p_1() // 4px (0.25rem)
.p_2() // 8px (0.5rem)
.p_4() // 16px (1rem)
.p_6() // 24px (1.5rem)
.p_8() // 32px (2rem)
.px(px(16.0)) // Horizontal padding
.py(px(16.0)) // Vertical padding
.px_4() // Horizontal 16px
.py_2() // Vertical 8px
.pt(px(8.0)) // Top padding
.pr(px(8.0)) // Right padding
.pb(px(8.0)) // Bottom padding
.pl(px(8.0)) // Left padding
Margin
div()
.m(px(16.0)) // All sides
.m_4() // 16px
.mx(px(16.0)) // Horizontal margin
.my(px(16.0)) // Vertical margin
.mx_4() // Horizontal 16px
.mt(px(8.0)) // Top margin
.mr(px(8.0)) // Right margin
.mb(px(8.0)) // Bottom margin
.ml(px(8.0)) // Left margin
Gap
div()
.flex()
.flex_col()
.gap(px(16.0)) // Gap between children
.gap_1() // 4px
.gap_2() // 8px
.gap_4() // 16px
.gap_6() // 24px
Colors
Background Colors
use gpui::*;
div()
.bg(rgb(0x3b82f6)) // Hex color
.bg(rgb(59, 130, 246)) // RGB
.bg(rgba(59, 130, 246, 0.5)) // RGBA with alpha
.bg(hsla(0.6, 0.8, 0.6, 1.0)) // HSLA
Text Colors
div()
.text_color(rgb(0xffffff))
.text_color(rgba(255, 255, 255, 0.9))
Border Colors
div()
.border_color(rgb(0x4a4a4a))
Borders
Border Width
div()
.border() // 1px all sides
.border_1() // 1px
.border_2() // 2px
.border_t() // Top border
.border_r() // Right border
.border_b() // Bottom border
.border_l() // Left border
Border Radius
div()
.rounded(px(4.0)) // Custom radius
.rounded_sm() // Small radius
.rounded_md() // Medium radius
.rounded_lg() // Large radius
.rounded_full() // Fully rounded (circle/pill)
Typography
Font Sizes
div()
.text_xs() // Extra small
.text_sm() // Small
.text_base() // Base size (default)
.text_lg() // Large
.text_xl() // Extra large
.text_2xl() // 2x extra large
.text_3xl() // 3x extra large
Font Weight
div()
.font_normal() // Normal weight
.font_medium() // Medium weight
.font_semibold() // Semibold
.font_bold() // Bold
Text Alignment
div()
.text_left()
.text_center()
.text_right()
Cursor
div()
.cursor_pointer() // Pointer cursor on hover
.cursor_default() // Default cursor
.cursor_text() // Text cursor
Hover States
div()
.bg(rgb(0x3b82f6))
.hover(|style| {
style.bg(rgb(0x2563eb))
})
Visibility
div()
.visible()
.invisible()
Common Patterns
Card Component
div()
.p_6()
.bg(rgb(0x1a1a1a))
.rounded_lg()
.border_1()
.border_color(rgb(0x2a2a2a))
.flex()
.flex_col()
.gap_4()
Button
div()
.px_6()
.py_3()
.bg(rgb(0x3b82f6))
.text_color(rgb(0xffffff))
.rounded_md()
.cursor_pointer()
.font_semibold()
.hover(|style| {
style.bg(rgb(0x2563eb))
})
Input Field
div()
.w_full()
.px_3()
.py_2()
.bg(rgb(0x1a1a1a))
.border_1()
.border_color(rgb(0x4a4a4a))
.rounded_md()
.text_base()
Navbar
div()
.w_full()
.h(px(64.0))
.px_6()
.bg(rgb(0x1a1a1a))
.flex()
.flex_row()
.items_center()
.justify_between()
.border_b_1()
.border_color(rgb(0x2a2a2a))
Centered Container
div()
.flex()
.items_center()
.justify_center()
.size_full()
Grid Layout
div()
.flex()
.flex_wrap()
.gap_4()
.children((0..12).map(|i| {
div()
.w(px(200.0))
.h(px(150.0))
.bg(rgb(0x3b82f6))
.rounded_md()
}))
Color Utilities
Common Colors
// Grays
rgb(0x1a1a1a) // Dark gray
rgb(0x2a2a2a) // Medium dark gray
rgb(0x4a4a4a) // Medium gray
rgb(0x9ca3af) // Light gray
rgb(0xf3f4f6) // Very light gray
// Blues
rgb(0x3b82f6) // Primary blue
rgb(0x2563eb) // Darker blue
rgb(0x60a5fa) // Lighter blue
// Greens
rgb(0x22c55e) // Success green
rgb(0x16a34a) // Darker green
// Reds
rgb(0xef4444) // Error red
rgb(0xdc2626) // Darker red
// Yellows
rgb(0xf59e0b) // Warning yellow
HSLA Colors
// More flexible color manipulation
hsla(0.0, 0.0, 0.1, 1.0) // Dark gray
hsla(0.6, 0.8, 0.5, 1.0) // Blue
hsla(0.33, 0.7, 0.5, 1.0) // Green
hsla(0.0, 0.8, 0.6, 1.0) // Red
hsla(0.15, 0.9, 0.5, 1.0) // Yellow/Orange
Theme System
Constant Colors
// In theme.rs
pub const BG_PRIMARY: Hsla = hsla(0.0, 0.0, 0.05, 1.0);
pub const BG_SECONDARY: Hsla = hsla(0.0, 0.0, 0.1, 1.0);
pub const TEXT_PRIMARY: Hsla = hsla(0.0, 0.0, 0.9, 1.0);
pub const TEXT_SECONDARY: Hsla = hsla(0.0, 0.0, 0.6, 1.0);
pub const ACCENT: Hsla = hsla(0.6, 0.8, 0.5, 1.0);
// Usage
div()
.bg(theme::BG_PRIMARY)
.text_color(theme::TEXT_PRIMARY)
Best Practices
- Use spacing scale: Stick to
.p_1(),.p_2(),.p_4(), etc. for consistency - Define color constants: Create a theme module with color constants
- Use HSLA for theming: Easier to adjust lightness/saturation
- Combine utilities: Chain methods for concise styling
- Extract common styles: Create reusable components for repeated patterns
Summary
- Use
.size_full()for full width/height - Use
.v_flex()for vertical layouts,.h_flex()for horizontal - Use spacing utilities
.p_4(),.gap_2()for consistent spacing - Use
.bg(),.text_color()for colors - Chain methods for concise styling
- Use
.hover()for interactive states
References
- GPUI Documentation
- Tailwind CSS - Similar utility concepts