1use crate::{
2 self as gpui, hsla, point, px, relative, rems, AbsoluteLength, AlignItems, CursorStyle,
3 DefiniteLength, Fill, FlexDirection, FlexWrap, FontWeight, Hsla, JustifyContent, Length,
4 Position, SharedString, StyleRefinement, Visibility, WhiteSpace,
5};
6use crate::{BoxShadow, TextStyleRefinement};
7use smallvec::{smallvec, SmallVec};
8use taffy::style::{AlignContent, 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 allow flex items to wrap.
337 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
338 fn flex_wrap(mut self) -> Self {
339 self.style().flex_wrap = Some(FlexWrap::Wrap);
340 self
341 }
342
343 /// Sets the element wrap flex items in the reverse direction.
344 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
345 fn flex_wrap_reverse(mut self) -> Self {
346 self.style().flex_wrap = Some(FlexWrap::WrapReverse);
347 self
348 }
349
350 /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
351 /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
352 fn flex_nowrap(mut self) -> Self {
353 self.style().flex_wrap = Some(FlexWrap::NoWrap);
354 self
355 }
356
357 /// Sets the element to align flex items to the start of the container's cross axis.
358 /// [Docs](https://tailwindcss.com/docs/align-items#start)
359 fn items_start(mut self) -> Self {
360 self.style().align_items = Some(AlignItems::FlexStart);
361 self
362 }
363
364 /// Sets the element to align flex items to the end of the container's cross axis.
365 /// [Docs](https://tailwindcss.com/docs/align-items#end)
366 fn items_end(mut self) -> Self {
367 self.style().align_items = Some(AlignItems::FlexEnd);
368 self
369 }
370
371 /// Sets the element to align flex items along the center of the container's cross axis.
372 /// [Docs](https://tailwindcss.com/docs/align-items#center)
373 fn items_center(mut self) -> Self {
374 self.style().align_items = Some(AlignItems::Center);
375 self
376 }
377
378 /// Sets the element to justify flex items along the container's main axis
379 /// such that there is an equal amount of space between each item.
380 /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
381 fn justify_between(mut self) -> Self {
382 self.style().justify_content = Some(JustifyContent::SpaceBetween);
383 self
384 }
385
386 /// Sets the element to justify flex items along the center of the container's main axis.
387 /// [Docs](https://tailwindcss.com/docs/justify-content#center)
388 fn justify_center(mut self) -> Self {
389 self.style().justify_content = Some(JustifyContent::Center);
390 self
391 }
392
393 /// Sets the element to justify flex items against the start of the container's main axis.
394 /// [Docs](https://tailwindcss.com/docs/justify-content#start)
395 fn justify_start(mut self) -> Self {
396 self.style().justify_content = Some(JustifyContent::Start);
397 self
398 }
399
400 /// Sets the element to justify flex items against the end of the container's main axis.
401 /// [Docs](https://tailwindcss.com/docs/justify-content#end)
402 fn justify_end(mut self) -> Self {
403 self.style().justify_content = Some(JustifyContent::End);
404 self
405 }
406
407 /// Sets the element to justify items along the container's main axis such
408 /// that there is an equal amount of space on each side of each item.
409 /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
410 fn justify_around(mut self) -> Self {
411 self.style().justify_content = Some(JustifyContent::SpaceAround);
412 self
413 }
414
415 /// Sets the element to pack content items in their default position as if no align-content value was set.
416 /// [Docs](https://tailwindcss.com/docs/align-content#normal)
417 fn content_normal(mut self) -> Self {
418 self.style().align_content = None;
419 self
420 }
421
422 /// Sets the element to pack content items in the center of the container's cross axis.
423 /// [Docs](https://tailwindcss.com/docs/align-content#center)
424 fn content_center(mut self) -> Self {
425 self.style().align_content = Some(AlignContent::Center);
426 self
427 }
428
429 /// Sets the element to pack content items against the start of the container's cross axis.
430 /// [Docs](https://tailwindcss.com/docs/align-content#start)
431 fn content_start(mut self) -> Self {
432 self.style().align_content = Some(AlignContent::FlexStart);
433 self
434 }
435
436 /// Sets the element to pack content items against the end of the container's cross axis.
437 /// [Docs](https://tailwindcss.com/docs/align-content#end)
438 fn content_end(mut self) -> Self {
439 self.style().align_content = Some(AlignContent::FlexEnd);
440 self
441 }
442
443 /// Sets the element to pack content items along the container's cross axis
444 /// such that there is an equal amount of space between each item.
445 /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
446 fn content_between(mut self) -> Self {
447 self.style().align_content = Some(AlignContent::SpaceBetween);
448 self
449 }
450
451 /// Sets the element to pack content items along the container's cross axis
452 /// such that there is an equal amount of space on each side of each item.
453 /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
454 fn content_around(mut self) -> Self {
455 self.style().align_content = Some(AlignContent::SpaceAround);
456 self
457 }
458
459 /// Sets the element to pack content items along the container's cross axis
460 /// such that there is an equal amount of space between each item.
461 /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
462 fn content_evenly(mut self) -> Self {
463 self.style().align_content = Some(AlignContent::SpaceEvenly);
464 self
465 }
466
467 /// Sets the element to allow content items to fill the available space along the container's cross axis.
468 /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
469 fn content_stretch(mut self) -> Self {
470 self.style().align_content = Some(AlignContent::Stretch);
471 self
472 }
473
474 /// Sets the background color of the element.
475 fn bg<F>(mut self, fill: F) -> Self
476 where
477 F: Into<Fill>,
478 Self: Sized,
479 {
480 self.style().background = Some(fill.into());
481 self
482 }
483
484 /// Sets the border color of the element.
485 fn border_color<C>(mut self, border_color: C) -> Self
486 where
487 C: Into<Hsla>,
488 Self: Sized,
489 {
490 self.style().border_color = Some(border_color.into());
491 self
492 }
493
494 /// Sets the box shadow of the element.
495 /// [Docs](https://tailwindcss.com/docs/box-shadow)
496 fn shadow(mut self, shadows: SmallVec<[BoxShadow; 2]>) -> Self {
497 self.style().box_shadow = Some(shadows);
498 self
499 }
500
501 /// Clears the box shadow of the element.
502 /// [Docs](https://tailwindcss.com/docs/box-shadow)
503 fn shadow_none(mut self) -> Self {
504 self.style().box_shadow = Some(Default::default());
505 self
506 }
507
508 /// Sets the box shadow of the element.
509 /// [Docs](https://tailwindcss.com/docs/box-shadow)
510 fn shadow_sm(mut self) -> Self {
511 self.style().box_shadow = Some(smallvec::smallvec![BoxShadow {
512 color: hsla(0., 0., 0., 0.05),
513 offset: point(px(0.), px(1.)),
514 blur_radius: px(2.),
515 spread_radius: px(0.),
516 }]);
517 self
518 }
519
520 /// Sets the box shadow of the element.
521 /// [Docs](https://tailwindcss.com/docs/box-shadow)
522 fn shadow_md(mut self) -> Self {
523 self.style().box_shadow = Some(smallvec![
524 BoxShadow {
525 color: hsla(0.5, 0., 0., 0.1),
526 offset: point(px(0.), px(4.)),
527 blur_radius: px(6.),
528 spread_radius: px(-1.),
529 },
530 BoxShadow {
531 color: hsla(0., 0., 0., 0.1),
532 offset: point(px(0.), px(2.)),
533 blur_radius: px(4.),
534 spread_radius: px(-2.),
535 }
536 ]);
537 self
538 }
539
540 /// Sets the box shadow of the element.
541 /// [Docs](https://tailwindcss.com/docs/box-shadow)
542 fn shadow_lg(mut self) -> Self {
543 self.style().box_shadow = Some(smallvec![
544 BoxShadow {
545 color: hsla(0., 0., 0., 0.1),
546 offset: point(px(0.), px(10.)),
547 blur_radius: px(15.),
548 spread_radius: px(-3.),
549 },
550 BoxShadow {
551 color: hsla(0., 0., 0., 0.1),
552 offset: point(px(0.), px(4.)),
553 blur_radius: px(6.),
554 spread_radius: px(-4.),
555 }
556 ]);
557 self
558 }
559
560 /// Sets the box shadow of the element.
561 /// [Docs](https://tailwindcss.com/docs/box-shadow)
562 fn shadow_xl(mut self) -> Self {
563 self.style().box_shadow = Some(smallvec![
564 BoxShadow {
565 color: hsla(0., 0., 0., 0.1),
566 offset: point(px(0.), px(20.)),
567 blur_radius: px(25.),
568 spread_radius: px(-5.),
569 },
570 BoxShadow {
571 color: hsla(0., 0., 0., 0.1),
572 offset: point(px(0.), px(8.)),
573 blur_radius: px(10.),
574 spread_radius: px(-6.),
575 }
576 ]);
577 self
578 }
579
580 /// Sets the box shadow of the element.
581 /// [Docs](https://tailwindcss.com/docs/box-shadow)
582 fn shadow_2xl(mut self) -> Self {
583 self.style().box_shadow = Some(smallvec![BoxShadow {
584 color: hsla(0., 0., 0., 0.25),
585 offset: point(px(0.), px(25.)),
586 blur_radius: px(50.),
587 spread_radius: px(-12.),
588 }]);
589 self
590 }
591
592 /// Get the text style that has been configured on this element.
593 fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
594 let style: &mut StyleRefinement = self.style();
595 &mut style.text
596 }
597
598 /// Set the text color of this element, this value cascades to its child elements.
599 fn text_color(mut self, color: impl Into<Hsla>) -> Self {
600 self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
601 self
602 }
603
604 /// Set the font weight of this element, this value cascades to its child elements.
605 fn font_weight(mut self, weight: FontWeight) -> Self {
606 self.text_style()
607 .get_or_insert_with(Default::default)
608 .font_weight = Some(weight);
609 self
610 }
611
612 /// Set the background color of this element, this value cascades to its child elements.
613 fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
614 self.text_style()
615 .get_or_insert_with(Default::default)
616 .background_color = Some(bg.into());
617 self
618 }
619
620 /// Set the text size of this element, this value cascades to its child elements.
621 fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
622 self.text_style()
623 .get_or_insert_with(Default::default)
624 .font_size = Some(size.into());
625 self
626 }
627
628 /// Set the text size to 'extra small',
629 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
630 fn text_xs(mut self) -> Self {
631 self.text_style()
632 .get_or_insert_with(Default::default)
633 .font_size = Some(rems(0.75).into());
634 self
635 }
636
637 /// Set the text size to 'small',
638 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
639 fn text_sm(mut self) -> Self {
640 self.text_style()
641 .get_or_insert_with(Default::default)
642 .font_size = Some(rems(0.875).into());
643 self
644 }
645
646 /// Reset the text styling for this element and its children.
647 fn text_base(mut self) -> Self {
648 self.text_style()
649 .get_or_insert_with(Default::default)
650 .font_size = Some(rems(1.0).into());
651 self
652 }
653
654 /// Set the text size to 'large',
655 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
656 fn text_lg(mut self) -> Self {
657 self.text_style()
658 .get_or_insert_with(Default::default)
659 .font_size = Some(rems(1.125).into());
660 self
661 }
662
663 /// Set the text size to 'extra large',
664 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
665 fn text_xl(mut self) -> Self {
666 self.text_style()
667 .get_or_insert_with(Default::default)
668 .font_size = Some(rems(1.25).into());
669 self
670 }
671
672 /// Set the text size to 'extra-extra large',
673 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
674 fn text_2xl(mut self) -> Self {
675 self.text_style()
676 .get_or_insert_with(Default::default)
677 .font_size = Some(rems(1.5).into());
678 self
679 }
680
681 /// Set the text size to 'extra-extra-extra large',
682 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
683 fn text_3xl(mut self) -> Self {
684 self.text_style()
685 .get_or_insert_with(Default::default)
686 .font_size = Some(rems(1.875).into());
687 self
688 }
689
690 /// Remove the text decoration on this element, this value cascades to its child elements.
691 fn text_decoration_none(mut self) -> Self {
692 self.text_style()
693 .get_or_insert_with(Default::default)
694 .underline = None;
695 self
696 }
697
698 /// Set the color for the underline on this element
699 fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
700 let style = self.text_style().get_or_insert_with(Default::default);
701 let underline = style.underline.get_or_insert_with(Default::default);
702 underline.color = Some(color.into());
703 self
704 }
705
706 /// Set the underline to a solid line
707 fn text_decoration_solid(mut self) -> Self {
708 let style = self.text_style().get_or_insert_with(Default::default);
709 let underline = style.underline.get_or_insert_with(Default::default);
710 underline.wavy = false;
711 self
712 }
713
714 /// Set the underline to a wavy line
715 fn text_decoration_wavy(mut self) -> Self {
716 let style = self.text_style().get_or_insert_with(Default::default);
717 let underline = style.underline.get_or_insert_with(Default::default);
718 underline.wavy = true;
719 self
720 }
721
722 /// Set the underline to be 0 thickness, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
723 fn text_decoration_0(mut self) -> Self {
724 let style = self.text_style().get_or_insert_with(Default::default);
725 let underline = style.underline.get_or_insert_with(Default::default);
726 underline.thickness = px(0.);
727 self
728 }
729
730 /// Set the underline to be 1px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
731 fn text_decoration_1(mut self) -> Self {
732 let style = self.text_style().get_or_insert_with(Default::default);
733 let underline = style.underline.get_or_insert_with(Default::default);
734 underline.thickness = px(1.);
735 self
736 }
737
738 /// Set the underline to be 2px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
739 fn text_decoration_2(mut self) -> Self {
740 let style = self.text_style().get_or_insert_with(Default::default);
741 let underline = style.underline.get_or_insert_with(Default::default);
742 underline.thickness = px(2.);
743 self
744 }
745
746 /// Set the underline to be 4px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
747 fn text_decoration_4(mut self) -> Self {
748 let style = self.text_style().get_or_insert_with(Default::default);
749 let underline = style.underline.get_or_insert_with(Default::default);
750 underline.thickness = px(4.);
751 self
752 }
753
754 /// Set the underline to be 8px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
755 fn text_decoration_8(mut self) -> Self {
756 let style = self.text_style().get_or_insert_with(Default::default);
757 let underline = style.underline.get_or_insert_with(Default::default);
758 underline.thickness = px(8.);
759 self
760 }
761
762 /// Change the font on this element and its children.
763 fn font(mut self, family_name: impl Into<SharedString>) -> Self {
764 self.text_style()
765 .get_or_insert_with(Default::default)
766 .font_family = Some(family_name.into());
767 self
768 }
769
770 /// Set the line height on this element and its children.
771 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
772 self.text_style()
773 .get_or_insert_with(Default::default)
774 .line_height = Some(line_height.into());
775 self
776 }
777
778 /// Draw a debug border around this element.
779 #[cfg(debug_assertions)]
780 fn debug(mut self) -> Self {
781 self.style().debug = Some(true);
782 self
783 }
784
785 /// Draw a debug border on all conforming elements below this element.
786 #[cfg(debug_assertions)]
787 fn debug_below(mut self) -> Self {
788 self.style().debug_below = Some(true);
789 self
790 }
791}