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