1use crate::{
2 self as gpui, AbsoluteLength, AlignContent, AlignItems, AlignSelf, BorderStyle, CursorStyle,
3 DefiniteLength, Display, Fill, FlexDirection, FlexWrap, Font, FontFeatures, FontStyle,
4 FontWeight, GridPlacement, GridTemplate, Hsla, JustifyContent, Length, SharedString,
5 StrikethroughStyle, StyleRefinement, TemplateColumnMinSize, TextAlign, TextOverflow,
6 TextStyleRefinement, UnderlineStyle, WhiteSpace, px, relative, rems,
7};
8pub use gpui_macros::{
9 border_style_methods, box_shadow_style_methods, cursor_style_methods, margin_style_methods,
10 overflow_style_methods, padding_style_methods, position_style_methods,
11 visibility_style_methods,
12};
13const ELLIPSIS: SharedString = SharedString::new_static("…");
14
15/// A trait for elements that can be styled.
16/// Use this to opt-in to a utility CSS-like styling API.
17// gate on rust-analyzer so rust-analyzer never needs to expand this macro, it takes up to 10 seconds to expand due to inefficiencies in rust-analyzers proc-macro srv
18#[cfg_attr(
19 all(any(feature = "inspector", debug_assertions), not(rust_analyzer)),
20 gpui_macros::derive_inspector_reflection
21)]
22pub trait Styled: Sized {
23 /// Returns a reference to the style memory of this element.
24 fn style(&mut self) -> &mut StyleRefinement;
25
26 gpui_macros::style_helpers!();
27 gpui_macros::visibility_style_methods!();
28 gpui_macros::margin_style_methods!();
29 gpui_macros::padding_style_methods!();
30 gpui_macros::position_style_methods!();
31 gpui_macros::overflow_style_methods!();
32 gpui_macros::cursor_style_methods!();
33 gpui_macros::border_style_methods!();
34 gpui_macros::box_shadow_style_methods!();
35
36 /// Sets the display type of the element to `block`.
37 /// [Docs](https://tailwindcss.com/docs/display)
38 fn block(mut self) -> Self {
39 self.style().display = Some(Display::Block);
40 self
41 }
42
43 /// Sets the display type of the element to `flex`.
44 /// [Docs](https://tailwindcss.com/docs/display)
45 fn flex(mut self) -> Self {
46 self.style().display = Some(Display::Flex);
47 self
48 }
49
50 /// Sets the display type of the element to `grid`.
51 /// [Docs](https://tailwindcss.com/docs/display)
52 fn grid(mut self) -> Self {
53 self.style().display = Some(Display::Grid);
54 self
55 }
56
57 /// Sets the display type of the element to `none`.
58 /// [Docs](https://tailwindcss.com/docs/display)
59 fn hidden(mut self) -> Self {
60 self.style().display = Some(Display::None);
61 self
62 }
63
64 /// Sets the whitespace of the element to `normal`.
65 /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
66 fn whitespace_normal(mut self) -> Self {
67 self.text_style().white_space = Some(WhiteSpace::Normal);
68 self
69 }
70
71 /// Sets the whitespace of the element to `nowrap`.
72 /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
73 fn whitespace_nowrap(mut self) -> Self {
74 self.text_style().white_space = Some(WhiteSpace::Nowrap);
75 self
76 }
77
78 /// Sets the truncate overflowing text with an ellipsis (…) at the end if needed.
79 /// [Docs](https://tailwindcss.com/docs/text-overflow#ellipsis)
80 fn text_ellipsis(mut self) -> Self {
81 self.text_style().text_overflow = Some(TextOverflow::Truncate(ELLIPSIS));
82 self
83 }
84
85 /// Sets the truncate overflowing text with an ellipsis (…) at the start if needed.
86 /// Typically more adequate for file paths where the end is more important than the beginning.
87 /// Note: This doesn't exist in Tailwind CSS.
88 fn text_ellipsis_start(mut self) -> Self {
89 self.text_style().text_overflow = Some(TextOverflow::TruncateStart(ELLIPSIS));
90 self
91 }
92
93 /// Sets the text overflow behavior of the element.
94 fn text_overflow(mut self, overflow: TextOverflow) -> Self {
95 self.text_style().text_overflow = Some(overflow);
96 self
97 }
98
99 /// Set the text alignment of the element.
100 fn text_align(mut self, align: TextAlign) -> Self {
101 self.text_style().text_align = Some(align);
102 self
103 }
104
105 /// Sets the text alignment to left
106 fn text_left(mut self) -> Self {
107 self.text_align(TextAlign::Left)
108 }
109
110 /// Sets the text alignment to center
111 fn text_center(mut self) -> Self {
112 self.text_align(TextAlign::Center)
113 }
114
115 /// Sets the text alignment to right
116 fn text_right(mut self) -> Self {
117 self.text_align(TextAlign::Right)
118 }
119
120 /// Sets the truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed.
121 /// [Docs](https://tailwindcss.com/docs/text-overflow#truncate)
122 fn truncate(mut self) -> Self {
123 self.overflow_hidden().whitespace_nowrap().text_ellipsis()
124 }
125
126 /// Sets number of lines to show before truncating the text.
127 /// [Docs](https://tailwindcss.com/docs/line-clamp)
128 fn line_clamp(mut self, lines: usize) -> Self {
129 let mut text_style = self.text_style();
130 text_style.line_clamp = Some(lines);
131 self.overflow_hidden()
132 }
133
134 /// Sets the flex direction of the element to `column`.
135 /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
136 fn flex_col(mut self) -> Self {
137 self.style().flex_direction = Some(FlexDirection::Column);
138 self
139 }
140
141 /// Sets the flex direction of the element to `column-reverse`.
142 /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
143 fn flex_col_reverse(mut self) -> Self {
144 self.style().flex_direction = Some(FlexDirection::ColumnReverse);
145 self
146 }
147
148 /// Sets the flex direction of the element to `row`.
149 /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
150 fn flex_row(mut self) -> Self {
151 self.style().flex_direction = Some(FlexDirection::Row);
152 self
153 }
154
155 /// Sets the flex direction of the element to `row-reverse`.
156 /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
157 fn flex_row_reverse(mut self) -> Self {
158 self.style().flex_direction = Some(FlexDirection::RowReverse);
159 self
160 }
161
162 /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
163 /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
164 fn flex_1(mut self) -> Self {
165 self.style().flex_grow = Some(1.);
166 self.style().flex_shrink = Some(1.);
167 self.style().flex_basis = Some(relative(0.).into());
168 self
169 }
170
171 /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
172 /// [Docs](https://tailwindcss.com/docs/flex#auto)
173 fn flex_auto(mut self) -> Self {
174 self.style().flex_grow = Some(1.);
175 self.style().flex_shrink = Some(1.);
176 self.style().flex_basis = Some(Length::Auto);
177 self
178 }
179
180 /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
181 /// [Docs](https://tailwindcss.com/docs/flex#initial)
182 fn flex_initial(mut self) -> Self {
183 self.style().flex_grow = Some(0.);
184 self.style().flex_shrink = Some(1.);
185 self.style().flex_basis = Some(Length::Auto);
186 self
187 }
188
189 /// Sets the element to prevent a flex item from growing or shrinking.
190 /// [Docs](https://tailwindcss.com/docs/flex#none)
191 fn flex_none(mut self) -> Self {
192 self.style().flex_grow = Some(0.);
193 self.style().flex_shrink = Some(0.);
194 self
195 }
196
197 /// Sets the initial size of flex items for this element.
198 /// [Docs](https://tailwindcss.com/docs/flex-basis)
199 fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
200 self.style().flex_basis = Some(basis.into());
201 self
202 }
203
204 /// Sets the element to allow a flex item to grow to fill any available space.
205 /// [Docs](https://tailwindcss.com/docs/flex-grow)
206 fn flex_grow(mut self) -> Self {
207 self.style().flex_grow = Some(1.);
208 self
209 }
210
211 /// Sets the element to prevent a flex item from growing.
212 /// [Docs](https://tailwindcss.com/docs/flex-grow#dont-grow)
213 fn flex_grow_0(mut self) -> Self {
214 self.style().flex_grow = Some(0.);
215 self
216 }
217
218 /// Sets the element to allow a flex item to shrink if needed.
219 /// [Docs](https://tailwindcss.com/docs/flex-shrink)
220 fn flex_shrink(mut self) -> Self {
221 self.style().flex_shrink = Some(1.);
222 self
223 }
224
225 /// Sets the element to prevent a flex item from shrinking.
226 /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
227 fn flex_shrink_0(mut self) -> Self {
228 self.style().flex_shrink = Some(0.);
229 self
230 }
231
232 /// Sets the element to allow flex items to wrap.
233 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
234 fn flex_wrap(mut self) -> Self {
235 self.style().flex_wrap = Some(FlexWrap::Wrap);
236 self
237 }
238
239 /// Sets the element wrap flex items in the reverse direction.
240 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
241 fn flex_wrap_reverse(mut self) -> Self {
242 self.style().flex_wrap = Some(FlexWrap::WrapReverse);
243 self
244 }
245
246 /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
247 /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
248 fn flex_nowrap(mut self) -> Self {
249 self.style().flex_wrap = Some(FlexWrap::NoWrap);
250 self
251 }
252
253 /// Sets the element to align flex items to the start of the container's cross axis.
254 /// [Docs](https://tailwindcss.com/docs/align-items#start)
255 fn items_start(mut self) -> Self {
256 self.style().align_items = Some(AlignItems::FlexStart);
257 self
258 }
259
260 /// Sets the element to align flex items to the end of the container's cross axis.
261 /// [Docs](https://tailwindcss.com/docs/align-items#end)
262 fn items_end(mut self) -> Self {
263 self.style().align_items = Some(AlignItems::FlexEnd);
264 self
265 }
266
267 /// Sets the element to align flex items along the center of the container's cross axis.
268 /// [Docs](https://tailwindcss.com/docs/align-items#center)
269 fn items_center(mut self) -> Self {
270 self.style().align_items = Some(AlignItems::Center);
271 self
272 }
273
274 /// Sets the element to align flex items along the baseline of the container's cross axis.
275 /// [Docs](https://tailwindcss.com/docs/align-items#baseline)
276 fn items_baseline(mut self) -> Self {
277 self.style().align_items = Some(AlignItems::Baseline);
278 self
279 }
280
281 /// Sets the element to stretch flex items to fill the available space along the container's cross axis.
282 /// [Docs](https://tailwindcss.com/docs/align-items#stretch)
283 fn items_stretch(mut self) -> Self {
284 self.style().align_items = Some(AlignItems::Stretch);
285 self
286 }
287
288 /// Sets how this specific element is aligned along the container's cross axis.
289 /// [Docs](https://tailwindcss.com/docs/align-self#start)
290 fn self_start(mut self) -> Self {
291 self.style().align_self = Some(AlignSelf::Start);
292 self
293 }
294
295 /// Sets this element to align against the end of the container's cross axis.
296 /// [Docs](https://tailwindcss.com/docs/align-self#end)
297 fn self_end(mut self) -> Self {
298 self.style().align_self = Some(AlignSelf::End);
299 self
300 }
301
302 /// Sets this element to align against the start of the container's cross axis.
303 /// [Docs](https://tailwindcss.com/docs/align-self#start)
304 fn self_flex_start(mut self) -> Self {
305 self.style().align_self = Some(AlignSelf::FlexStart);
306 self
307 }
308
309 /// Sets this element to align against the end of the container's cross axis.
310 /// [Docs](https://tailwindcss.com/docs/align-self#end)
311 fn self_flex_end(mut self) -> Self {
312 self.style().align_self = Some(AlignSelf::FlexEnd);
313 self
314 }
315
316 /// Sets this element to align along the center of the container's cross axis.
317 /// [Docs](https://tailwindcss.com/docs/align-self#center)
318 fn self_center(mut self) -> Self {
319 self.style().align_self = Some(AlignSelf::Center);
320 self
321 }
322
323 /// Sets this element to align along the baseline of the container's cross axis.
324 /// [Docs](https://tailwindcss.com/docs/align-self#baseline)
325 fn self_baseline(mut self) -> Self {
326 self.style().align_self = Some(AlignSelf::Baseline);
327 self
328 }
329
330 /// Sets this element to stretch to fill the available space along the container's cross axis.
331 /// [Docs](https://tailwindcss.com/docs/align-self#stretch)
332 fn self_stretch(mut self) -> Self {
333 self.style().align_self = Some(AlignSelf::Stretch);
334 self
335 }
336
337 /// Sets the element to justify flex items against the start of the container's main axis.
338 /// [Docs](https://tailwindcss.com/docs/justify-content#start)
339 fn justify_start(mut self) -> Self {
340 self.style().justify_content = Some(JustifyContent::Start);
341 self
342 }
343
344 /// Sets the element to justify flex items against the end of the container's main axis.
345 /// [Docs](https://tailwindcss.com/docs/justify-content#end)
346 fn justify_end(mut self) -> Self {
347 self.style().justify_content = Some(JustifyContent::End);
348 self
349 }
350
351 /// Sets the element to justify flex items along the center of the container's main axis.
352 /// [Docs](https://tailwindcss.com/docs/justify-content#center)
353 fn justify_center(mut self) -> Self {
354 self.style().justify_content = Some(JustifyContent::Center);
355 self
356 }
357
358 /// Sets the element to justify flex items along the container's main axis
359 /// such that there is an equal amount of space between each item.
360 /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
361 fn justify_between(mut self) -> Self {
362 self.style().justify_content = Some(JustifyContent::SpaceBetween);
363 self
364 }
365
366 /// Sets the element to justify items along the container's main axis such
367 /// that there is an equal amount of space on each side of each item.
368 /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
369 fn justify_around(mut self) -> Self {
370 self.style().justify_content = Some(JustifyContent::SpaceAround);
371 self
372 }
373
374 /// Sets the element to justify items along the container's main axis such
375 /// that there is an equal amount of space around each item, but also
376 /// accounting for the doubling of space you would normally see between
377 /// each item when using justify-around.
378 /// [Docs](https://tailwindcss.com/docs/justify-content#space-evenly)
379 fn justify_evenly(mut self) -> Self {
380 self.style().justify_content = Some(JustifyContent::SpaceEvenly);
381 self
382 }
383
384 /// Sets the element to pack content items in their default position as if no align-content value was set.
385 /// [Docs](https://tailwindcss.com/docs/align-content#normal)
386 fn content_normal(mut self) -> Self {
387 self.style().align_content = None;
388 self
389 }
390
391 /// Sets the element to pack content items in the center of the container's cross axis.
392 /// [Docs](https://tailwindcss.com/docs/align-content#center)
393 fn content_center(mut self) -> Self {
394 self.style().align_content = Some(AlignContent::Center);
395 self
396 }
397
398 /// Sets the element to pack content items against the start of the container's cross axis.
399 /// [Docs](https://tailwindcss.com/docs/align-content#start)
400 fn content_start(mut self) -> Self {
401 self.style().align_content = Some(AlignContent::FlexStart);
402 self
403 }
404
405 /// Sets the element to pack content items against the end of the container's cross axis.
406 /// [Docs](https://tailwindcss.com/docs/align-content#end)
407 fn content_end(mut self) -> Self {
408 self.style().align_content = Some(AlignContent::FlexEnd);
409 self
410 }
411
412 /// Sets the element to pack content items along the container's cross axis
413 /// such that there is an equal amount of space between each item.
414 /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
415 fn content_between(mut self) -> Self {
416 self.style().align_content = Some(AlignContent::SpaceBetween);
417 self
418 }
419
420 /// Sets the element to pack content items along the container's cross axis
421 /// such that there is an equal amount of space on each side of each item.
422 /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
423 fn content_around(mut self) -> Self {
424 self.style().align_content = Some(AlignContent::SpaceAround);
425 self
426 }
427
428 /// Sets the element to pack content items along the container's cross axis
429 /// such that there is an equal amount of space between each item.
430 /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
431 fn content_evenly(mut self) -> Self {
432 self.style().align_content = Some(AlignContent::SpaceEvenly);
433 self
434 }
435
436 /// Sets the element to allow content items to fill the available space along the container's cross axis.
437 /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
438 fn content_stretch(mut self) -> Self {
439 self.style().align_content = Some(AlignContent::Stretch);
440 self
441 }
442
443 /// Sets the aspect ratio of the element.
444 /// [Docs](https://tailwindcss.com/docs/aspect-ratio)
445 fn aspect_ratio(mut self, ratio: f32) -> Self {
446 self.style().aspect_ratio = Some(ratio);
447 self
448 }
449
450 /// Sets the aspect ratio of the element to 1/1 – equal width and height.
451 /// [Docs](https://tailwindcss.com/docs/aspect-ratio)
452 fn aspect_square(mut self) -> Self {
453 self.style().aspect_ratio = Some(1.0);
454 self
455 }
456
457 /// Sets the background color of the element.
458 fn bg<F>(mut self, fill: F) -> Self
459 where
460 F: Into<Fill>,
461 Self: Sized,
462 {
463 self.style().background = Some(fill.into());
464 self
465 }
466
467 /// Sets the border style of the element.
468 fn border_dashed(mut self) -> Self {
469 self.style().border_style = Some(BorderStyle::Dashed);
470 self
471 }
472
473 /// Returns a mutable reference to the text style that has been configured on this element.
474 fn text_style(&mut self) -> &mut TextStyleRefinement {
475 let style: &mut StyleRefinement = self.style();
476 &mut style.text
477 }
478
479 /// Sets the text color of this element.
480 ///
481 /// This value cascades to its child elements.
482 fn text_color(mut self, color: impl Into<Hsla>) -> Self {
483 self.text_style().color = Some(color.into());
484 self
485 }
486
487 /// Sets the font weight of this element
488 ///
489 /// This value cascades to its child elements.
490 fn font_weight(mut self, weight: FontWeight) -> Self {
491 self.text_style().font_weight = Some(weight);
492 self
493 }
494
495 /// Sets the background color of this element.
496 ///
497 /// This value cascades to its child elements.
498 fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
499 self.text_style().background_color = Some(bg.into());
500 self
501 }
502
503 /// Sets the text size of this element.
504 ///
505 /// This value cascades to its child elements.
506 fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
507 self.text_style().font_size = Some(size.into());
508 self
509 }
510
511 /// Sets the text size to 'extra small'.
512 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
513 fn text_xs(mut self) -> Self {
514 self.text_style().font_size = Some(rems(0.75).into());
515 self
516 }
517
518 /// Sets the text size to 'small'.
519 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
520 fn text_sm(mut self) -> Self {
521 self.text_style().font_size = Some(rems(0.875).into());
522 self
523 }
524
525 /// Sets the text size to 'base'.
526 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
527 fn text_base(mut self) -> Self {
528 self.text_style().font_size = Some(rems(1.0).into());
529 self
530 }
531
532 /// Sets the text size to 'large'.
533 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
534 fn text_lg(mut self) -> Self {
535 self.text_style().font_size = Some(rems(1.125).into());
536 self
537 }
538
539 /// Sets the text size to 'extra large'.
540 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
541 fn text_xl(mut self) -> Self {
542 self.text_style().font_size = Some(rems(1.25).into());
543 self
544 }
545
546 /// Sets the text size to 'extra extra large'.
547 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
548 fn text_2xl(mut self) -> Self {
549 self.text_style().font_size = Some(rems(1.5).into());
550 self
551 }
552
553 /// Sets the text size to 'extra extra extra large'.
554 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
555 fn text_3xl(mut self) -> Self {
556 self.text_style().font_size = Some(rems(1.875).into());
557 self
558 }
559
560 /// Sets the font style of the element to italic.
561 /// [Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
562 fn italic(mut self) -> Self {
563 self.text_style().font_style = Some(FontStyle::Italic);
564 self
565 }
566
567 /// Sets the font style of the element to normal (not italic).
568 /// [Docs](https://tailwindcss.com/docs/font-style#displaying-text-normally)
569 fn not_italic(mut self) -> Self {
570 self.text_style().font_style = Some(FontStyle::Normal);
571 self
572 }
573
574 /// Sets the text decoration to underline.
575 /// [Docs](https://tailwindcss.com/docs/text-decoration-line#underling-text)
576 fn underline(mut self) -> Self {
577 let style = self.text_style();
578 style.underline = Some(UnderlineStyle {
579 thickness: px(1.),
580 ..Default::default()
581 });
582 self
583 }
584
585 /// Sets the decoration of the text to have a line through it.
586 /// [Docs](https://tailwindcss.com/docs/text-decoration-line#adding-a-line-through-text)
587 fn line_through(mut self) -> Self {
588 let style = self.text_style();
589 style.strikethrough = Some(StrikethroughStyle {
590 thickness: px(1.),
591 ..Default::default()
592 });
593 self
594 }
595
596 /// Removes the text decoration on this element.
597 ///
598 /// This value cascades to its child elements.
599 fn text_decoration_none(mut self) -> Self {
600 self.text_style().underline = None;
601 self
602 }
603
604 /// Sets the color for the underline on this element
605 fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
606 let style = self.text_style();
607 let underline = style.underline.get_or_insert_with(Default::default);
608 underline.color = Some(color.into());
609 self
610 }
611
612 /// Sets the text decoration style to a solid line.
613 /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
614 fn text_decoration_solid(mut self) -> Self {
615 let style = self.text_style();
616 let underline = style.underline.get_or_insert_with(Default::default);
617 underline.wavy = false;
618 self
619 }
620
621 /// Sets the text decoration style to a wavy line.
622 /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
623 fn text_decoration_wavy(mut self) -> Self {
624 let style = self.text_style();
625 let underline = style.underline.get_or_insert_with(Default::default);
626 underline.wavy = true;
627 self
628 }
629
630 /// Sets the text decoration to be 0px thick.
631 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
632 fn text_decoration_0(mut self) -> Self {
633 let style = self.text_style();
634 let underline = style.underline.get_or_insert_with(Default::default);
635 underline.thickness = px(0.);
636 self
637 }
638
639 /// Sets the text decoration to be 1px thick.
640 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
641 fn text_decoration_1(mut self) -> Self {
642 let style = self.text_style();
643 let underline = style.underline.get_or_insert_with(Default::default);
644 underline.thickness = px(1.);
645 self
646 }
647
648 /// Sets the text decoration to be 2px thick.
649 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
650 fn text_decoration_2(mut self) -> Self {
651 let style = self.text_style();
652 let underline = style.underline.get_or_insert_with(Default::default);
653 underline.thickness = px(2.);
654 self
655 }
656
657 /// Sets the text decoration to be 4px thick.
658 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
659 fn text_decoration_4(mut self) -> Self {
660 let style = self.text_style();
661 let underline = style.underline.get_or_insert_with(Default::default);
662 underline.thickness = px(4.);
663 self
664 }
665
666 /// Sets the text decoration to be 8px thick.
667 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
668 fn text_decoration_8(mut self) -> Self {
669 let style = self.text_style();
670 let underline = style.underline.get_or_insert_with(Default::default);
671 underline.thickness = px(8.);
672 self
673 }
674
675 /// Sets the font family of this element and its children.
676 fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
677 self.text_style().font_family = Some(family_name.into());
678 self
679 }
680
681 /// Sets the font features of this element and its children.
682 fn font_features(mut self, features: FontFeatures) -> Self {
683 self.text_style().font_features = Some(features);
684 self
685 }
686
687 /// Sets the font of this element and its children.
688 fn font(mut self, font: Font) -> Self {
689 let Font {
690 family,
691 features,
692 fallbacks,
693 weight,
694 style,
695 } = font;
696
697 let text_style = self.text_style();
698 text_style.font_family = Some(family);
699 text_style.font_features = Some(features);
700 text_style.font_weight = Some(weight);
701 text_style.font_style = Some(style);
702 text_style.font_fallbacks = fallbacks;
703
704 self
705 }
706
707 /// Sets the line height of this element and its children.
708 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
709 self.text_style().line_height = Some(line_height.into());
710 self
711 }
712
713 /// Sets the opacity of this element and its children.
714 fn opacity(mut self, opacity: f32) -> Self {
715 self.style().opacity = Some(opacity);
716 self
717 }
718
719 /// Sets the grid columns of this element.
720 fn grid_cols(mut self, cols: u16) -> Self {
721 self.style().grid_cols = Some(GridTemplate {
722 repeat: cols,
723 min_size: TemplateColumnMinSize::Zero,
724 });
725 self
726 }
727
728 /// Sets the grid columns with min-content minimum sizing.
729 /// Unlike grid_cols, it won't shrink to width 0 in AvailableSpace::MinContent constraints.
730 fn grid_cols_min_content(mut self, cols: u16) -> Self {
731 self.style().grid_cols = Some(GridTemplate {
732 repeat: cols,
733 min_size: TemplateColumnMinSize::MinContent,
734 });
735 self
736 }
737
738 /// Sets the grid columns with max-content maximum sizing for content-based column widths.
739 fn grid_cols_max_content(mut self, cols: u16) -> Self {
740 self.style().grid_cols = Some(GridTemplate {
741 repeat: cols,
742 min_size: TemplateColumnMinSize::MaxContent,
743 });
744 self
745 }
746
747 /// Sets the grid rows of this element.
748 fn grid_rows(mut self, rows: u16) -> Self {
749 self.style().grid_rows = Some(GridTemplate {
750 repeat: rows,
751 min_size: TemplateColumnMinSize::Zero,
752 });
753 self
754 }
755
756 /// Sets the column start of this element.
757 fn col_start(mut self, start: i16) -> Self {
758 let grid_location = self.style().grid_location_mut();
759 grid_location.column.start = GridPlacement::Line(start);
760 self
761 }
762
763 /// Sets the column start of this element to auto.
764 fn col_start_auto(mut self) -> Self {
765 let grid_location = self.style().grid_location_mut();
766 grid_location.column.start = GridPlacement::Auto;
767 self
768 }
769
770 /// Sets the column end of this element.
771 fn col_end(mut self, end: i16) -> Self {
772 let grid_location = self.style().grid_location_mut();
773 grid_location.column.end = GridPlacement::Line(end);
774 self
775 }
776
777 /// Sets the column end of this element to auto.
778 fn col_end_auto(mut self) -> Self {
779 let grid_location = self.style().grid_location_mut();
780 grid_location.column.end = GridPlacement::Auto;
781 self
782 }
783
784 /// Sets the column span of this element.
785 fn col_span(mut self, span: u16) -> Self {
786 let grid_location = self.style().grid_location_mut();
787 grid_location.column = GridPlacement::Span(span)..GridPlacement::Span(span);
788 self
789 }
790
791 /// Sets the row span of this element.
792 fn col_span_full(mut self) -> Self {
793 let grid_location = self.style().grid_location_mut();
794 grid_location.column = GridPlacement::Line(1)..GridPlacement::Line(-1);
795 self
796 }
797
798 /// Sets the row start of this element.
799 fn row_start(mut self, start: i16) -> Self {
800 let grid_location = self.style().grid_location_mut();
801 grid_location.row.start = GridPlacement::Line(start);
802 self
803 }
804
805 /// Sets the row start of this element to "auto"
806 fn row_start_auto(mut self) -> Self {
807 let grid_location = self.style().grid_location_mut();
808 grid_location.row.start = GridPlacement::Auto;
809 self
810 }
811
812 /// Sets the row end of this element.
813 fn row_end(mut self, end: i16) -> Self {
814 let grid_location = self.style().grid_location_mut();
815 grid_location.row.end = GridPlacement::Line(end);
816 self
817 }
818
819 /// Sets the row end of this element to "auto"
820 fn row_end_auto(mut self) -> Self {
821 let grid_location = self.style().grid_location_mut();
822 grid_location.row.end = GridPlacement::Auto;
823 self
824 }
825
826 /// Sets the row span of this element.
827 fn row_span(mut self, span: u16) -> Self {
828 let grid_location = self.style().grid_location_mut();
829 grid_location.row = GridPlacement::Span(span)..GridPlacement::Span(span);
830 self
831 }
832
833 /// Sets the row span of this element.
834 fn row_span_full(mut self) -> Self {
835 let grid_location = self.style().grid_location_mut();
836 grid_location.row = GridPlacement::Line(1)..GridPlacement::Line(-1);
837 self
838 }
839
840 /// Draws a debug border around this element.
841 #[cfg(debug_assertions)]
842 fn debug(mut self) -> Self {
843 self.style().debug = Some(true);
844 self
845 }
846
847 /// Draws a debug border on all conforming elements below this element.
848 #[cfg(debug_assertions)]
849 fn debug_below(mut self) -> Self {
850 self.style().debug_below = Some(true);
851 self
852 }
853}