Expand description
§Twill
Idiomatic Rust styling library inspired by Tailwind CSS.
§Philosophy
Takes the best ideas from Tailwind CSS:
- Design Tokens - type-safe base values (colors, spacing, sizes)
- Utility-first - composable atomic styles
- Component Variants - pre-built component variants
But implements them through Rust types instead of CSS classes.
§Features
- Type-safe - impossible to specify invalid colors or sizes
- Autocomplete - IDE suggests all available options
- Compile-time checks - style errors caught at compile time
- Composable - styles can be combined and reused
- Multi-backend - CSS, egui, iced, slint support
§Quick Start
use twill::{Style, Color, Scale, Spacing, Padding, BorderRadius, ToCss};
// Create a button style
let button_style = Style::new()
.padding(Padding::symmetric(Spacing::S2, Spacing::S4))
.bg(Color::blue(Scale::S500))
.text_color(Color::slate(Scale::S50))
.rounded(BorderRadius::Md)
.to_css();
// Result: "padding: 0.5rem 1rem; background-color: #3b82f6; color: #f8fafc; border-radius: 0.375rem"§Components
use twill::{Button, ToCss};
// Create a primary button
let btn = Button::primary().lg().to_css();
// Create an outline button
let btn = Button::outline().sm().to_css();Re-exports§
pub use traits::ComputeValue;pub use traits::Merge;pub use traits::ToCss;pub use tokens::AnimationToken;pub use tokens::BorderRadius;pub use tokens::BorderStyle;pub use tokens::BorderWidth;pub use tokens::Color;pub use tokens::ColorFamily;pub use tokens::ColorValue;pub use tokens::Container;pub use tokens::DivideWidth;pub use tokens::DropShadow;pub use tokens::Easing;pub use tokens::FontFamily;pub use tokens::FontSize;pub use tokens::FontWeight;pub use tokens::InsetShadow;pub use tokens::LetterSpacing;pub use tokens::LineHeight;pub use tokens::MotionDefaults;pub use tokens::OutlineStyle;pub use tokens::Percentage;pub use tokens::RingWidth;pub use tokens::Scale;pub use tokens::SemanticColor;pub use tokens::SemanticThemeVars;pub use tokens::Shadow;pub use tokens::Spacing;pub use tokens::SpecialColor;pub use tokens::TextAlign;pub use tokens::TextDecoration;pub use tokens::TextOverflow;pub use tokens::TextShadow as TextShadowToken;pub use tokens::TextTransform;pub use tokens::TransitionDuration;pub use tokens::WhiteSpace;pub use tokens::WordBreak;pub use utilities::AlignItems;pub use utilities::AlignSelf;pub use utilities::Display;pub use utilities::FlexContainer;pub use utilities::FlexDirection;pub use utilities::FlexWrap;pub use utilities::GridContainer;pub use utilities::GridTemplate;pub use utilities::Height;pub use utilities::JustifyContent;pub use utilities::Margin;pub use utilities::Overflow;pub use utilities::Padding;pub use utilities::Position;pub use utilities::SizeConstraints;pub use utilities::Width;pub use utilities::ZIndex;pub use style::Style;pub use components::Button;pub use components::ButtonSize;pub use components::ButtonVariant;