1use crate::{
2 self as gpui, hsla, point, px, relative, rems, AbsoluteLength, AlignItems, CursorStyle,
3 DefiniteLength, Fill, FlexDirection, FontWeight, Hsla, JustifyContent, Length, Position,
4 SharedString, StyleRefinement, Visibility, WhiteSpace,
5};
6use crate::{BoxShadow, TextStyleRefinement};
7use smallvec::{smallvec, SmallVec};
8use taffy::style::{Display, Overflow};
9
10/// A trait for elements that can be styled.
11/// Use this to opt-in to a CSS-like styling API.
12pub trait Styled: Sized {
13 /// Returns a reference to the style memory of this element.
14 fn style(&mut self) -> &mut StyleRefinement;
15
16 gpui_macros::style_helpers!();
17
18 /// Set the z-index of this element.
19 fn z_index(mut self, z_index: u16) -> Self {
20 self.style().z_index = Some(z_index);
21 self
22 }
23
24 /// Sets the position of the element to `relative`.
25 /// [Docs](https://tailwindcss.com/docs/position)
26 fn relative(mut self) -> Self {
27 self.style().position = Some(Position::Relative);
28 self
29 }
30
31 /// Sets the position of the element to `absolute`.
32 /// [Docs](https://tailwindcss.com/docs/position)
33 fn absolute(mut self) -> Self {
34 self.style().position = Some(Position::Absolute);
35 self
36 }
37
38 /// Sets the display type of the element to `block`.
39 /// [Docs](https://tailwindcss.com/docs/display)
40 fn block(mut self) -> Self {
41 self.style().display = Some(Display::Block);
42 self
43 }
44
45 /// Sets the display type of the element to `flex`.
46 /// [Docs](https://tailwindcss.com/docs/display)
47 fn flex(mut self) -> Self {
48 self.style().display = Some(Display::Flex);
49 self
50 }
51
52 /// Sets the visibility of the element to `visible`.
53 /// [Docs](https://tailwindcss.com/docs/visibility)
54 fn visible(mut self) -> Self {
55 self.style().visibility = Some(Visibility::Visible);
56 self
57 }
58
59 /// Sets the visibility of the element to `hidden`.
60 /// [Docs](https://tailwindcss.com/docs/visibility)
61 fn invisible(mut self) -> Self {
62 self.style().visibility = Some(Visibility::Hidden);
63 self
64 }
65
66 /// Sets the behavior of content that overflows the container to be hidden.
67 /// [Docs](https://tailwindcss.com/docs/overflow#hiding-content-that-overflows)
68 fn overflow_hidden(mut self) -> Self {
69 self.style().overflow.x = Some(Overflow::Hidden);
70 self.style().overflow.y = Some(Overflow::Hidden);
71 self
72 }
73
74 /// Sets the behavior of content that overflows the container on the X axis to be hidden.
75 /// [Docs](https://tailwindcss.com/docs/overflow#hiding-content-that-overflows)
76 fn overflow_x_hidden(mut self) -> Self {
77 self.style().overflow.x = Some(Overflow::Hidden);
78 self
79 }
80
81 /// Sets the behavior of content that overflows the container on the Y axis to be hidden.
82 /// [Docs](https://tailwindcss.com/docs/overflow#hiding-content-that-overflows)
83 fn overflow_y_hidden(mut self) -> Self {
84 self.style().overflow.y = Some(Overflow::Hidden);
85 self
86 }
87
88 /// Set the cursor style when hovering over this element
89 fn cursor(mut self, cursor: CursorStyle) -> Self {
90 self.style().mouse_cursor = Some(cursor);
91 self
92 }
93
94 /// Sets the cursor style when hovering an element to `default`.
95 /// [Docs](https://tailwindcss.com/docs/cursor)
96 fn cursor_default(mut self) -> Self {
97 self.style().mouse_cursor = Some(CursorStyle::Arrow);
98 self
99 }
100
101 /// Sets the cursor style when hovering an element to `pointer`.
102 /// [Docs](https://tailwindcss.com/docs/cursor)
103 fn cursor_pointer(mut self) -> Self {
104 self.style().mouse_cursor = Some(CursorStyle::PointingHand);
105 self
106 }
107
108 /// Sets cursor style when hovering over an element to `text`.
109 /// [Docs](https://tailwindcss.com/docs/cursor)
110 fn cursor_text(mut self) -> Self {
111 self.style().mouse_cursor = Some(CursorStyle::IBeam);
112 self
113 }
114
115 /// Sets cursor style when hovering over an element to `move`.
116 /// [Docs](https://tailwindcss.com/docs/cursor)
117 fn cursor_move(mut self) -> Self {
118 self.style().mouse_cursor = Some(CursorStyle::ClosedHand);
119 self
120 }
121
122 /// Sets cursor style when hovering over an element to `not-allowed`.
123 /// [Docs](https://tailwindcss.com/docs/cursor)
124 fn cursor_not_allowed(mut self) -> Self {
125 self.style().mouse_cursor = Some(CursorStyle::OperationNotAllowed);
126 self
127 }
128
129 /// Sets cursor style when hovering over an element to `context-menu`.
130 /// [Docs](https://tailwindcss.com/docs/cursor)
131 fn cursor_context_menu(mut self) -> Self {
132 self.style().mouse_cursor = Some(CursorStyle::ContextualMenu);
133 self
134 }
135
136 /// Sets cursor style when hovering over an element to `crosshair`.
137 /// [Docs](https://tailwindcss.com/docs/cursor)
138 fn cursor_crosshair(mut self) -> Self {
139 self.style().mouse_cursor = Some(CursorStyle::Crosshair);
140 self
141 }
142
143 /// Sets cursor style when hovering over an element to `vertical-text`.
144 /// [Docs](https://tailwindcss.com/docs/cursor)
145 fn cursor_vertical_text(mut self) -> Self {
146 self.style().mouse_cursor = Some(CursorStyle::IBeamCursorForVerticalLayout);
147 self
148 }
149
150 /// Sets cursor style when hovering over an element to `alias`.
151 /// [Docs](https://tailwindcss.com/docs/cursor)
152 fn cursor_alias(mut self) -> Self {
153 self.style().mouse_cursor = Some(CursorStyle::DragLink);
154 self
155 }
156
157 /// Sets cursor style when hovering over an element to `copy`.
158 /// [Docs](https://tailwindcss.com/docs/cursor)
159 fn cursor_copy(mut self) -> Self {
160 self.style().mouse_cursor = Some(CursorStyle::DragCopy);
161 self
162 }
163
164 /// Sets cursor style when hovering over an element to `no-drop`.
165 /// [Docs](https://tailwindcss.com/docs/cursor)
166 fn cursor_no_drop(mut self) -> Self {
167 self.style().mouse_cursor = Some(CursorStyle::OperationNotAllowed);
168 self
169 }
170
171 /// Sets cursor style when hovering over an element to `grab`.
172 /// [Docs](https://tailwindcss.com/docs/cursor)
173 fn cursor_grab(mut self) -> Self {
174 self.style().mouse_cursor = Some(CursorStyle::OpenHand);
175 self
176 }
177
178 /// Sets cursor style when hovering over an element to `grabbing`.
179 /// [Docs](https://tailwindcss.com/docs/cursor)
180 fn cursor_grabbing(mut self) -> Self {
181 self.style().mouse_cursor = Some(CursorStyle::ClosedHand);
182 self
183 }
184
185 /// Sets cursor style when hovering over an element to `col-resize`.
186 /// [Docs](https://tailwindcss.com/docs/cursor)
187 fn cursor_col_resize(mut self) -> Self {
188 self.style().mouse_cursor = Some(CursorStyle::ResizeLeftRight);
189 self
190 }
191
192 /// Sets cursor style when hovering over an element to `row-resize`.
193 /// [Docs](https://tailwindcss.com/docs/cursor)
194 fn cursor_row_resize(mut self) -> Self {
195 self.style().mouse_cursor = Some(CursorStyle::ResizeUpDown);
196 self
197 }
198
199 /// Sets cursor style when hovering over an element to `n-resize`.
200 /// [Docs](https://tailwindcss.com/docs/cursor)
201 fn cursor_n_resize(mut self) -> Self {
202 self.style().mouse_cursor = Some(CursorStyle::ResizeUp);
203 self
204 }
205
206 /// Sets cursor style when hovering over an element to `e-resize`.
207 /// [Docs](https://tailwindcss.com/docs/cursor)
208 fn cursor_e_resize(mut self) -> Self {
209 self.style().mouse_cursor = Some(CursorStyle::ResizeRight);
210 self
211 }
212
213 /// Sets cursor style when hovering over an element to `s-resize`.
214 /// [Docs](https://tailwindcss.com/docs/cursor)
215 fn cursor_s_resize(mut self) -> Self {
216 self.style().mouse_cursor = Some(CursorStyle::ResizeDown);
217 self
218 }
219
220 /// Sets cursor style when hovering over an element to `w-resize`.
221 /// [Docs](https://tailwindcss.com/docs/cursor)
222 fn cursor_w_resize(mut self) -> Self {
223 self.style().mouse_cursor = Some(CursorStyle::ResizeLeft);
224 self
225 }
226
227 /// Sets the whitespace of the element to `normal`.
228 /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
229 fn whitespace_normal(mut self) -> Self {
230 self.text_style()
231 .get_or_insert_with(Default::default)
232 .white_space = Some(WhiteSpace::Normal);
233 self
234 }
235
236 /// Sets the whitespace of the element to `nowrap`.
237 /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
238 fn whitespace_nowrap(mut self) -> Self {
239 self.text_style()
240 .get_or_insert_with(Default::default)
241 .white_space = Some(WhiteSpace::Nowrap);
242 self
243 }
244
245 /// Sets the flex direction of the element to `column`.
246 /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
247 fn flex_col(mut self) -> Self {
248 self.style().flex_direction = Some(FlexDirection::Column);
249 self
250 }
251
252 /// Sets the flex direction of the element to `column-reverse`.
253 /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
254 fn flex_col_reverse(mut self) -> Self {
255 self.style().flex_direction = Some(FlexDirection::ColumnReverse);
256 self
257 }
258
259 /// Sets the flex direction of the element to `row`.
260 /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
261 fn flex_row(mut self) -> Self {
262 self.style().flex_direction = Some(FlexDirection::Row);
263 self
264 }
265
266 /// Sets the flex direction of the element to `row-reverse`.
267 /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
268 fn flex_row_reverse(mut self) -> Self {
269 self.style().flex_direction = Some(FlexDirection::RowReverse);
270 self
271 }
272
273 /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
274 /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
275 fn flex_1(mut self) -> Self {
276 self.style().flex_grow = Some(1.);
277 self.style().flex_shrink = Some(1.);
278 self.style().flex_basis = Some(relative(0.).into());
279 self
280 }
281
282 /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
283 /// [Docs](https://tailwindcss.com/docs/flex#auto)
284 fn flex_auto(mut self) -> Self {
285 self.style().flex_grow = Some(1.);
286 self.style().flex_shrink = Some(1.);
287 self.style().flex_basis = Some(Length::Auto);
288 self
289 }
290
291 /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
292 /// [Docs](https://tailwindcss.com/docs/flex#initial)
293 fn flex_initial(mut self) -> Self {
294 self.style().flex_grow = Some(0.);
295 self.style().flex_shrink = Some(1.);
296 self.style().flex_basis = Some(Length::Auto);
297 self
298 }
299
300 /// Sets the element to prevent a flex item from growing or shrinking.
301 /// [Docs](https://tailwindcss.com/docs/flex#none)
302 fn flex_none(mut self) -> Self {
303 self.style().flex_grow = Some(0.);
304 self.style().flex_shrink = Some(0.);
305 self
306 }
307
308 /// Sets the initial size of flex items for this element.
309 /// [Docs](https://tailwindcss.com/docs/flex-basis)
310 fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
311 self.style().flex_basis = Some(basis.into());
312 self
313 }
314
315 /// Sets the element to allow a flex item to grow to fill any available space.
316 /// [Docs](https://tailwindcss.com/docs/flex-grow)
317 fn flex_grow(mut self) -> Self {
318 self.style().flex_grow = Some(1.);
319 self
320 }
321
322 /// Sets the element to allow a flex item to shrink if needed.
323 /// [Docs](https://tailwindcss.com/docs/flex-shrink)
324 fn flex_shrink(mut self) -> Self {
325 self.style().flex_shrink = Some(1.);
326 self
327 }
328
329 /// Sets the element to prevent a flex item from shrinking.
330 /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
331 fn flex_shrink_0(mut self) -> Self {
332 self.style().flex_shrink = Some(0.);
333 self
334 }
335
336 /// Sets the element to align flex items to the start of the container's cross axis.
337 /// [Docs](https://tailwindcss.com/docs/align-items#start)
338 fn items_start(mut self) -> Self {
339 self.style().align_items = Some(AlignItems::FlexStart);
340 self
341 }
342
343 /// Sets the element to align flex items to the end of the container's cross axis.
344 /// [Docs](https://tailwindcss.com/docs/align-items#end)
345 fn items_end(mut self) -> Self {
346 self.style().align_items = Some(AlignItems::FlexEnd);
347 self
348 }
349
350 /// Sets the element to align flex items along the center of the container's cross axis.
351 /// [Docs](https://tailwindcss.com/docs/align-items#center)
352 fn items_center(mut self) -> Self {
353 self.style().align_items = Some(AlignItems::Center);
354 self
355 }
356
357 /// Sets the element to justify flex items along the container's main axis
358 /// such that there is an equal amount of space between each item.
359 /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
360 fn justify_between(mut self) -> Self {
361 self.style().justify_content = Some(JustifyContent::SpaceBetween);
362 self
363 }
364
365 /// Sets the element to justify flex items along the center of the container's main axis.
366 /// [Docs](https://tailwindcss.com/docs/justify-content#center)
367 fn justify_center(mut self) -> Self {
368 self.style().justify_content = Some(JustifyContent::Center);
369 self
370 }
371
372 /// Sets the element to justify flex items against the start of the container's main axis.
373 /// [Docs](https://tailwindcss.com/docs/justify-content#start)
374 fn justify_start(mut self) -> Self {
375 self.style().justify_content = Some(JustifyContent::Start);
376 self
377 }
378
379 /// Sets the element to justify flex items against the end of the container's main axis.
380 /// [Docs](https://tailwindcss.com/docs/justify-content#end)
381 fn justify_end(mut self) -> Self {
382 self.style().justify_content = Some(JustifyContent::End);
383 self
384 }
385
386 /// Sets the element to justify items along the container's main axis such
387 /// that there is an equal amount of space on each side of each item.
388 /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
389 fn justify_around(mut self) -> Self {
390 self.style().justify_content = Some(JustifyContent::SpaceAround);
391 self
392 }
393
394 /// Sets the background color of the element.
395 fn bg<F>(mut self, fill: F) -> Self
396 where
397 F: Into<Fill>,
398 Self: Sized,
399 {
400 self.style().background = Some(fill.into());
401 self
402 }
403
404 /// Sets the border color of the element.
405 fn border_color<C>(mut self, border_color: C) -> Self
406 where
407 C: Into<Hsla>,
408 Self: Sized,
409 {
410 self.style().border_color = Some(border_color.into());
411 self
412 }
413
414 /// Sets the box shadow of the element.
415 /// [Docs](https://tailwindcss.com/docs/box-shadow)
416 fn shadow(mut self, shadows: SmallVec<[BoxShadow; 2]>) -> Self {
417 self.style().box_shadow = Some(shadows);
418 self
419 }
420
421 /// Clears the box shadow of the element.
422 /// [Docs](https://tailwindcss.com/docs/box-shadow)
423 fn shadow_none(mut self) -> Self {
424 self.style().box_shadow = Some(Default::default());
425 self
426 }
427
428 /// Sets the box shadow of the element.
429 /// [Docs](https://tailwindcss.com/docs/box-shadow)
430 fn shadow_sm(mut self) -> Self {
431 self.style().box_shadow = Some(smallvec::smallvec![BoxShadow {
432 color: hsla(0., 0., 0., 0.05),
433 offset: point(px(0.), px(1.)),
434 blur_radius: px(2.),
435 spread_radius: px(0.),
436 }]);
437 self
438 }
439
440 /// Sets the box shadow of the element.
441 /// [Docs](https://tailwindcss.com/docs/box-shadow)
442 fn shadow_md(mut self) -> Self {
443 self.style().box_shadow = Some(smallvec![
444 BoxShadow {
445 color: hsla(0.5, 0., 0., 0.1),
446 offset: point(px(0.), px(4.)),
447 blur_radius: px(6.),
448 spread_radius: px(-1.),
449 },
450 BoxShadow {
451 color: hsla(0., 0., 0., 0.1),
452 offset: point(px(0.), px(2.)),
453 blur_radius: px(4.),
454 spread_radius: px(-2.),
455 }
456 ]);
457 self
458 }
459
460 /// Sets the box shadow of the element.
461 /// [Docs](https://tailwindcss.com/docs/box-shadow)
462 fn shadow_lg(mut self) -> Self {
463 self.style().box_shadow = Some(smallvec![
464 BoxShadow {
465 color: hsla(0., 0., 0., 0.1),
466 offset: point(px(0.), px(10.)),
467 blur_radius: px(15.),
468 spread_radius: px(-3.),
469 },
470 BoxShadow {
471 color: hsla(0., 0., 0., 0.1),
472 offset: point(px(0.), px(4.)),
473 blur_radius: px(6.),
474 spread_radius: px(-4.),
475 }
476 ]);
477 self
478 }
479
480 /// Sets the box shadow of the element.
481 /// [Docs](https://tailwindcss.com/docs/box-shadow)
482 fn shadow_xl(mut self) -> Self {
483 self.style().box_shadow = Some(smallvec![
484 BoxShadow {
485 color: hsla(0., 0., 0., 0.1),
486 offset: point(px(0.), px(20.)),
487 blur_radius: px(25.),
488 spread_radius: px(-5.),
489 },
490 BoxShadow {
491 color: hsla(0., 0., 0., 0.1),
492 offset: point(px(0.), px(8.)),
493 blur_radius: px(10.),
494 spread_radius: px(-6.),
495 }
496 ]);
497 self
498 }
499
500 /// Sets the box shadow of the element.
501 /// [Docs](https://tailwindcss.com/docs/box-shadow)
502 fn shadow_2xl(mut self) -> Self {
503 self.style().box_shadow = Some(smallvec![BoxShadow {
504 color: hsla(0., 0., 0., 0.25),
505 offset: point(px(0.), px(25.)),
506 blur_radius: px(50.),
507 spread_radius: px(-12.),
508 }]);
509 self
510 }
511
512 /// Get the text style that has been configured on this element.
513 fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
514 let style: &mut StyleRefinement = self.style();
515 &mut style.text
516 }
517
518 /// Set the text color of this element, this value cascades to it's child elements.
519 fn text_color(mut self, color: impl Into<Hsla>) -> Self {
520 self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
521 self
522 }
523
524 /// Set the font weight of this element, this value cascades to it's child elements.
525 fn font_weight(mut self, weight: FontWeight) -> Self {
526 self.text_style()
527 .get_or_insert_with(Default::default)
528 .font_weight = Some(weight);
529 self
530 }
531
532 /// Set the background color of this element, this value cascades to it's child elements.
533 fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
534 self.text_style()
535 .get_or_insert_with(Default::default)
536 .background_color = Some(bg.into());
537 self
538 }
539
540 /// Set the text size of this element, this value cascades to it's child elements.
541 fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
542 self.text_style()
543 .get_or_insert_with(Default::default)
544 .font_size = Some(size.into());
545 self
546 }
547
548 /// Set the text size to 'extra small',
549 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
550 fn text_xs(mut self) -> Self {
551 self.text_style()
552 .get_or_insert_with(Default::default)
553 .font_size = Some(rems(0.75).into());
554 self
555 }
556
557 /// Set the text size to 'small',
558 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
559 fn text_sm(mut self) -> Self {
560 self.text_style()
561 .get_or_insert_with(Default::default)
562 .font_size = Some(rems(0.875).into());
563 self
564 }
565
566 /// Reset the text styling for this element and it's children.
567 fn text_base(mut self) -> Self {
568 self.text_style()
569 .get_or_insert_with(Default::default)
570 .font_size = Some(rems(1.0).into());
571 self
572 }
573
574 /// Set the text size to 'large',
575 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
576 fn text_lg(mut self) -> Self {
577 self.text_style()
578 .get_or_insert_with(Default::default)
579 .font_size = Some(rems(1.125).into());
580 self
581 }
582
583 /// Set the text size to 'extra large',
584 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
585 fn text_xl(mut self) -> Self {
586 self.text_style()
587 .get_or_insert_with(Default::default)
588 .font_size = Some(rems(1.25).into());
589 self
590 }
591
592 /// Set the text size to 'extra-extra large',
593 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
594 fn text_2xl(mut self) -> Self {
595 self.text_style()
596 .get_or_insert_with(Default::default)
597 .font_size = Some(rems(1.5).into());
598 self
599 }
600
601 /// Set the text size to 'extra-extra-extra large',
602 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
603 fn text_3xl(mut self) -> Self {
604 self.text_style()
605 .get_or_insert_with(Default::default)
606 .font_size = Some(rems(1.875).into());
607 self
608 }
609
610 /// Remove the text decoration on this element, this value cascades to it's child elements.
611 fn text_decoration_none(mut self) -> Self {
612 self.text_style()
613 .get_or_insert_with(Default::default)
614 .underline = None;
615 self
616 }
617
618 /// Set the color for the underline on this element
619 fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
620 let style = self.text_style().get_or_insert_with(Default::default);
621 let underline = style.underline.get_or_insert_with(Default::default);
622 underline.color = Some(color.into());
623 self
624 }
625
626 /// Set the underline to a solid line
627 fn text_decoration_solid(mut self) -> Self {
628 let style = self.text_style().get_or_insert_with(Default::default);
629 let underline = style.underline.get_or_insert_with(Default::default);
630 underline.wavy = false;
631 self
632 }
633
634 /// Set the underline to a wavy line
635 fn text_decoration_wavy(mut self) -> Self {
636 let style = self.text_style().get_or_insert_with(Default::default);
637 let underline = style.underline.get_or_insert_with(Default::default);
638 underline.wavy = true;
639 self
640 }
641
642 /// Set the underline to be 0 thickness, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
643 fn text_decoration_0(mut self) -> Self {
644 let style = self.text_style().get_or_insert_with(Default::default);
645 let underline = style.underline.get_or_insert_with(Default::default);
646 underline.thickness = px(0.);
647 self
648 }
649
650 /// Set the underline to be 1px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
651 fn text_decoration_1(mut self) -> Self {
652 let style = self.text_style().get_or_insert_with(Default::default);
653 let underline = style.underline.get_or_insert_with(Default::default);
654 underline.thickness = px(1.);
655 self
656 }
657
658 /// Set the underline to be 2px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
659 fn text_decoration_2(mut self) -> Self {
660 let style = self.text_style().get_or_insert_with(Default::default);
661 let underline = style.underline.get_or_insert_with(Default::default);
662 underline.thickness = px(2.);
663 self
664 }
665
666 /// Set the underline to be 4px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
667 fn text_decoration_4(mut self) -> Self {
668 let style = self.text_style().get_or_insert_with(Default::default);
669 let underline = style.underline.get_or_insert_with(Default::default);
670 underline.thickness = px(4.);
671 self
672 }
673
674 /// Set the underline to be 8px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
675 fn text_decoration_8(mut self) -> Self {
676 let style = self.text_style().get_or_insert_with(Default::default);
677 let underline = style.underline.get_or_insert_with(Default::default);
678 underline.thickness = px(8.);
679 self
680 }
681
682 /// Change the font on this element and it's children.
683 fn font(mut self, family_name: impl Into<SharedString>) -> Self {
684 self.text_style()
685 .get_or_insert_with(Default::default)
686 .font_family = Some(family_name.into());
687 self
688 }
689
690 /// Set the line height on this element and it's children.
691 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
692 self.text_style()
693 .get_or_insert_with(Default::default)
694 .line_height = Some(line_height.into());
695 self
696 }
697
698 /// Draw a debug border around this element.
699 #[cfg(debug_assertions)]
700 fn debug(mut self) -> Self {
701 self.style().debug = Some(true);
702 self
703 }
704
705 /// Draw a debug border on all conforming elements below this element.
706 #[cfg(debug_assertions)]
707 fn debug_below(mut self) -> Self {
708 self.style().debug_below = Some(true);
709 self
710 }
711}