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 `ew-resize`.
180 /// [Docs](https://tailwindcss.com/docs/cursor)
181 fn cursor_ew_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 `ns-resize`.
187 /// [Docs](https://tailwindcss.com/docs/cursor)
188 fn cursor_ns_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 `col-resize`.
194 /// [Docs](https://tailwindcss.com/docs/cursor)
195 fn cursor_col_resize(mut self) -> Self {
196 self.style().mouse_cursor = Some(CursorStyle::ResizeColumn);
197 self
198 }
199
200 /// Sets cursor style when hovering over an element to `row-resize`.
201 /// [Docs](https://tailwindcss.com/docs/cursor)
202 fn cursor_row_resize(mut self) -> Self {
203 self.style().mouse_cursor = Some(CursorStyle::ResizeRow);
204 self
205 }
206
207 /// Sets cursor style when hovering over an element to `n-resize`.
208 /// [Docs](https://tailwindcss.com/docs/cursor)
209 fn cursor_n_resize(mut self) -> Self {
210 self.style().mouse_cursor = Some(CursorStyle::ResizeUp);
211 self
212 }
213
214 /// Sets cursor style when hovering over an element to `e-resize`.
215 /// [Docs](https://tailwindcss.com/docs/cursor)
216 fn cursor_e_resize(mut self) -> Self {
217 self.style().mouse_cursor = Some(CursorStyle::ResizeRight);
218 self
219 }
220
221 /// Sets cursor style when hovering over an element to `s-resize`.
222 /// [Docs](https://tailwindcss.com/docs/cursor)
223 fn cursor_s_resize(mut self) -> Self {
224 self.style().mouse_cursor = Some(CursorStyle::ResizeDown);
225 self
226 }
227
228 /// Sets cursor style when hovering over an element to `w-resize`.
229 /// [Docs](https://tailwindcss.com/docs/cursor)
230 fn cursor_w_resize(mut self) -> Self {
231 self.style().mouse_cursor = Some(CursorStyle::ResizeLeft);
232 self
233 }
234
235 /// Sets the whitespace of the element to `normal`.
236 /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
237 fn whitespace_normal(mut self) -> Self {
238 self.text_style()
239 .get_or_insert_with(Default::default)
240 .white_space = Some(WhiteSpace::Normal);
241 self
242 }
243
244 /// Sets the whitespace of the element to `nowrap`.
245 /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
246 fn whitespace_nowrap(mut self) -> Self {
247 self.text_style()
248 .get_or_insert_with(Default::default)
249 .white_space = Some(WhiteSpace::Nowrap);
250 self
251 }
252
253 /// Sets the flex direction of the element to `column`.
254 /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
255 fn flex_col(mut self) -> Self {
256 self.style().flex_direction = Some(FlexDirection::Column);
257 self
258 }
259
260 /// Sets the flex direction of the element to `column-reverse`.
261 /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
262 fn flex_col_reverse(mut self) -> Self {
263 self.style().flex_direction = Some(FlexDirection::ColumnReverse);
264 self
265 }
266
267 /// Sets the flex direction of the element to `row`.
268 /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
269 fn flex_row(mut self) -> Self {
270 self.style().flex_direction = Some(FlexDirection::Row);
271 self
272 }
273
274 /// Sets the flex direction of the element to `row-reverse`.
275 /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
276 fn flex_row_reverse(mut self) -> Self {
277 self.style().flex_direction = Some(FlexDirection::RowReverse);
278 self
279 }
280
281 /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
282 /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
283 fn flex_1(mut self) -> Self {
284 self.style().flex_grow = Some(1.);
285 self.style().flex_shrink = Some(1.);
286 self.style().flex_basis = Some(relative(0.).into());
287 self
288 }
289
290 /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
291 /// [Docs](https://tailwindcss.com/docs/flex#auto)
292 fn flex_auto(mut self) -> Self {
293 self.style().flex_grow = Some(1.);
294 self.style().flex_shrink = Some(1.);
295 self.style().flex_basis = Some(Length::Auto);
296 self
297 }
298
299 /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
300 /// [Docs](https://tailwindcss.com/docs/flex#initial)
301 fn flex_initial(mut self) -> Self {
302 self.style().flex_grow = Some(0.);
303 self.style().flex_shrink = Some(1.);
304 self.style().flex_basis = Some(Length::Auto);
305 self
306 }
307
308 /// Sets the element to prevent a flex item from growing or shrinking.
309 /// [Docs](https://tailwindcss.com/docs/flex#none)
310 fn flex_none(mut self) -> Self {
311 self.style().flex_grow = Some(0.);
312 self.style().flex_shrink = Some(0.);
313 self
314 }
315
316 /// Sets the initial size of flex items for this element.
317 /// [Docs](https://tailwindcss.com/docs/flex-basis)
318 fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
319 self.style().flex_basis = Some(basis.into());
320 self
321 }
322
323 /// Sets the element to allow a flex item to grow to fill any available space.
324 /// [Docs](https://tailwindcss.com/docs/flex-grow)
325 fn flex_grow(mut self) -> Self {
326 self.style().flex_grow = Some(1.);
327 self
328 }
329
330 /// Sets the element to allow a flex item to shrink if needed.
331 /// [Docs](https://tailwindcss.com/docs/flex-shrink)
332 fn flex_shrink(mut self) -> Self {
333 self.style().flex_shrink = Some(1.);
334 self
335 }
336
337 /// Sets the element to prevent a flex item from shrinking.
338 /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
339 fn flex_shrink_0(mut self) -> Self {
340 self.style().flex_shrink = Some(0.);
341 self
342 }
343
344 /// Sets the element to allow flex items to wrap.
345 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
346 fn flex_wrap(mut self) -> Self {
347 self.style().flex_wrap = Some(FlexWrap::Wrap);
348 self
349 }
350
351 /// Sets the element wrap flex items in the reverse direction.
352 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
353 fn flex_wrap_reverse(mut self) -> Self {
354 self.style().flex_wrap = Some(FlexWrap::WrapReverse);
355 self
356 }
357
358 /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
359 /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
360 fn flex_nowrap(mut self) -> Self {
361 self.style().flex_wrap = Some(FlexWrap::NoWrap);
362 self
363 }
364
365 /// Sets the element to align flex items to the start of the container's cross axis.
366 /// [Docs](https://tailwindcss.com/docs/align-items#start)
367 fn items_start(mut self) -> Self {
368 self.style().align_items = Some(AlignItems::FlexStart);
369 self
370 }
371
372 /// Sets the element to align flex items to the end of the container's cross axis.
373 /// [Docs](https://tailwindcss.com/docs/align-items#end)
374 fn items_end(mut self) -> Self {
375 self.style().align_items = Some(AlignItems::FlexEnd);
376 self
377 }
378
379 /// Sets the element to align flex items along the center of the container's cross axis.
380 /// [Docs](https://tailwindcss.com/docs/align-items#center)
381 fn items_center(mut self) -> Self {
382 self.style().align_items = Some(AlignItems::Center);
383 self
384 }
385
386 /// Sets the element to justify flex items along the container's main axis
387 /// such that there is an equal amount of space between each item.
388 /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
389 fn justify_between(mut self) -> Self {
390 self.style().justify_content = Some(JustifyContent::SpaceBetween);
391 self
392 }
393
394 /// Sets the element to justify flex items along the center of the container's main axis.
395 /// [Docs](https://tailwindcss.com/docs/justify-content#center)
396 fn justify_center(mut self) -> Self {
397 self.style().justify_content = Some(JustifyContent::Center);
398 self
399 }
400
401 /// Sets the element to justify flex items against the start of the container's main axis.
402 /// [Docs](https://tailwindcss.com/docs/justify-content#start)
403 fn justify_start(mut self) -> Self {
404 self.style().justify_content = Some(JustifyContent::Start);
405 self
406 }
407
408 /// Sets the element to justify flex items against the end of the container's main axis.
409 /// [Docs](https://tailwindcss.com/docs/justify-content#end)
410 fn justify_end(mut self) -> Self {
411 self.style().justify_content = Some(JustifyContent::End);
412 self
413 }
414
415 /// Sets the element to justify items along the container's main axis such
416 /// that there is an equal amount of space on each side of each item.
417 /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
418 fn justify_around(mut self) -> Self {
419 self.style().justify_content = Some(JustifyContent::SpaceAround);
420 self
421 }
422
423 /// Sets the element to pack content items in their default position as if no align-content value was set.
424 /// [Docs](https://tailwindcss.com/docs/align-content#normal)
425 fn content_normal(mut self) -> Self {
426 self.style().align_content = None;
427 self
428 }
429
430 /// Sets the element to pack content items in the center of the container's cross axis.
431 /// [Docs](https://tailwindcss.com/docs/align-content#center)
432 fn content_center(mut self) -> Self {
433 self.style().align_content = Some(AlignContent::Center);
434 self
435 }
436
437 /// Sets the element to pack content items against the start of the container's cross axis.
438 /// [Docs](https://tailwindcss.com/docs/align-content#start)
439 fn content_start(mut self) -> Self {
440 self.style().align_content = Some(AlignContent::FlexStart);
441 self
442 }
443
444 /// Sets the element to pack content items against the end of the container's cross axis.
445 /// [Docs](https://tailwindcss.com/docs/align-content#end)
446 fn content_end(mut self) -> Self {
447 self.style().align_content = Some(AlignContent::FlexEnd);
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 between each item.
453 /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
454 fn content_between(mut self) -> Self {
455 self.style().align_content = Some(AlignContent::SpaceBetween);
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 on each side of each item.
461 /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
462 fn content_around(mut self) -> Self {
463 self.style().align_content = Some(AlignContent::SpaceAround);
464 self
465 }
466
467 /// Sets the element to pack content items along the container's cross axis
468 /// such that there is an equal amount of space between each item.
469 /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
470 fn content_evenly(mut self) -> Self {
471 self.style().align_content = Some(AlignContent::SpaceEvenly);
472 self
473 }
474
475 /// Sets the element to allow content items to fill the available space along the container's cross axis.
476 /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
477 fn content_stretch(mut self) -> Self {
478 self.style().align_content = Some(AlignContent::Stretch);
479 self
480 }
481
482 /// Sets the background color of the element.
483 fn bg<F>(mut self, fill: F) -> Self
484 where
485 F: Into<Fill>,
486 Self: Sized,
487 {
488 self.style().background = Some(fill.into());
489 self
490 }
491
492 /// Sets the border color of the element.
493 fn border_color<C>(mut self, border_color: C) -> Self
494 where
495 C: Into<Hsla>,
496 Self: Sized,
497 {
498 self.style().border_color = Some(border_color.into());
499 self
500 }
501
502 /// Sets the box shadow of the element.
503 /// [Docs](https://tailwindcss.com/docs/box-shadow)
504 fn shadow(mut self, shadows: SmallVec<[BoxShadow; 2]>) -> Self {
505 self.style().box_shadow = Some(shadows);
506 self
507 }
508
509 /// Clears the box shadow of the element.
510 /// [Docs](https://tailwindcss.com/docs/box-shadow)
511 fn shadow_none(mut self) -> Self {
512 self.style().box_shadow = Some(Default::default());
513 self
514 }
515
516 /// Sets the box shadow of the element.
517 /// [Docs](https://tailwindcss.com/docs/box-shadow)
518 fn shadow_sm(mut self) -> Self {
519 self.style().box_shadow = Some(smallvec::smallvec![BoxShadow {
520 color: hsla(0., 0., 0., 0.05),
521 offset: point(px(0.), px(1.)),
522 blur_radius: px(2.),
523 spread_radius: px(0.),
524 }]);
525 self
526 }
527
528 /// Sets the box shadow of the element.
529 /// [Docs](https://tailwindcss.com/docs/box-shadow)
530 fn shadow_md(mut self) -> Self {
531 self.style().box_shadow = Some(smallvec![
532 BoxShadow {
533 color: hsla(0.5, 0., 0., 0.1),
534 offset: point(px(0.), px(4.)),
535 blur_radius: px(6.),
536 spread_radius: px(-1.),
537 },
538 BoxShadow {
539 color: hsla(0., 0., 0., 0.1),
540 offset: point(px(0.), px(2.)),
541 blur_radius: px(4.),
542 spread_radius: px(-2.),
543 }
544 ]);
545 self
546 }
547
548 /// Sets the box shadow of the element.
549 /// [Docs](https://tailwindcss.com/docs/box-shadow)
550 fn shadow_lg(mut self) -> Self {
551 self.style().box_shadow = Some(smallvec![
552 BoxShadow {
553 color: hsla(0., 0., 0., 0.1),
554 offset: point(px(0.), px(10.)),
555 blur_radius: px(15.),
556 spread_radius: px(-3.),
557 },
558 BoxShadow {
559 color: hsla(0., 0., 0., 0.1),
560 offset: point(px(0.), px(4.)),
561 blur_radius: px(6.),
562 spread_radius: px(-4.),
563 }
564 ]);
565 self
566 }
567
568 /// Sets the box shadow of the element.
569 /// [Docs](https://tailwindcss.com/docs/box-shadow)
570 fn shadow_xl(mut self) -> Self {
571 self.style().box_shadow = Some(smallvec![
572 BoxShadow {
573 color: hsla(0., 0., 0., 0.1),
574 offset: point(px(0.), px(20.)),
575 blur_radius: px(25.),
576 spread_radius: px(-5.),
577 },
578 BoxShadow {
579 color: hsla(0., 0., 0., 0.1),
580 offset: point(px(0.), px(8.)),
581 blur_radius: px(10.),
582 spread_radius: px(-6.),
583 }
584 ]);
585 self
586 }
587
588 /// Sets the box shadow of the element.
589 /// [Docs](https://tailwindcss.com/docs/box-shadow)
590 fn shadow_2xl(mut self) -> Self {
591 self.style().box_shadow = Some(smallvec![BoxShadow {
592 color: hsla(0., 0., 0., 0.25),
593 offset: point(px(0.), px(25.)),
594 blur_radius: px(50.),
595 spread_radius: px(-12.),
596 }]);
597 self
598 }
599
600 /// Get the text style that has been configured on this element.
601 fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
602 let style: &mut StyleRefinement = self.style();
603 &mut style.text
604 }
605
606 /// Set the text color of this element, this value cascades to its child elements.
607 fn text_color(mut self, color: impl Into<Hsla>) -> Self {
608 self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
609 self
610 }
611
612 /// Set the font weight of this element, this value cascades to its child elements.
613 fn font_weight(mut self, weight: FontWeight) -> Self {
614 self.text_style()
615 .get_or_insert_with(Default::default)
616 .font_weight = Some(weight);
617 self
618 }
619
620 /// Set the background color of this element, this value cascades to its child elements.
621 fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
622 self.text_style()
623 .get_or_insert_with(Default::default)
624 .background_color = Some(bg.into());
625 self
626 }
627
628 /// Set the text size of this element, this value cascades to its child elements.
629 fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
630 self.text_style()
631 .get_or_insert_with(Default::default)
632 .font_size = Some(size.into());
633 self
634 }
635
636 /// Set the text size to 'extra small',
637 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
638 fn text_xs(mut self) -> Self {
639 self.text_style()
640 .get_or_insert_with(Default::default)
641 .font_size = Some(rems(0.75).into());
642 self
643 }
644
645 /// Set the text size to 'small',
646 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
647 fn text_sm(mut self) -> Self {
648 self.text_style()
649 .get_or_insert_with(Default::default)
650 .font_size = Some(rems(0.875).into());
651 self
652 }
653
654 /// Reset the text styling for this element and its children.
655 fn text_base(mut self) -> Self {
656 self.text_style()
657 .get_or_insert_with(Default::default)
658 .font_size = Some(rems(1.0).into());
659 self
660 }
661
662 /// Set the text size to 'large',
663 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
664 fn text_lg(mut self) -> Self {
665 self.text_style()
666 .get_or_insert_with(Default::default)
667 .font_size = Some(rems(1.125).into());
668 self
669 }
670
671 /// Set the text size to 'extra large',
672 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
673 fn text_xl(mut self) -> Self {
674 self.text_style()
675 .get_or_insert_with(Default::default)
676 .font_size = Some(rems(1.25).into());
677 self
678 }
679
680 /// Set the text size to 'extra-extra large',
681 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
682 fn text_2xl(mut self) -> Self {
683 self.text_style()
684 .get_or_insert_with(Default::default)
685 .font_size = Some(rems(1.5).into());
686 self
687 }
688
689 /// Set the text size to 'extra-extra-extra large',
690 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
691 fn text_3xl(mut self) -> Self {
692 self.text_style()
693 .get_or_insert_with(Default::default)
694 .font_size = Some(rems(1.875).into());
695 self
696 }
697
698 /// Set the font style to 'non-italic',
699 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
700 fn non_italic(mut self) -> Self {
701 self.text_style()
702 .get_or_insert_with(Default::default)
703 .font_style = Some(FontStyle::Normal);
704 self
705 }
706
707 /// Set the font style to 'italic',
708 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
709 fn italic(mut self) -> Self {
710 self.text_style()
711 .get_or_insert_with(Default::default)
712 .font_style = Some(FontStyle::Italic);
713 self
714 }
715
716 /// Remove the text decoration on this element, this value cascades to its child elements.
717 fn text_decoration_none(mut self) -> Self {
718 self.text_style()
719 .get_or_insert_with(Default::default)
720 .underline = None;
721 self
722 }
723
724 /// Set the color for the underline on this element
725 fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
726 let style = self.text_style().get_or_insert_with(Default::default);
727 let underline = style.underline.get_or_insert_with(Default::default);
728 underline.color = Some(color.into());
729 self
730 }
731
732 /// Set the underline to a solid line
733 fn text_decoration_solid(mut self) -> Self {
734 let style = self.text_style().get_or_insert_with(Default::default);
735 let underline = style.underline.get_or_insert_with(Default::default);
736 underline.wavy = false;
737 self
738 }
739
740 /// Set the underline to a wavy line
741 fn text_decoration_wavy(mut self) -> Self {
742 let style = self.text_style().get_or_insert_with(Default::default);
743 let underline = style.underline.get_or_insert_with(Default::default);
744 underline.wavy = true;
745 self
746 }
747
748 /// Set the underline to be 0 thickness, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
749 fn text_decoration_0(mut self) -> Self {
750 let style = self.text_style().get_or_insert_with(Default::default);
751 let underline = style.underline.get_or_insert_with(Default::default);
752 underline.thickness = px(0.);
753 self
754 }
755
756 /// Set the underline to be 1px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
757 fn text_decoration_1(mut self) -> Self {
758 let style = self.text_style().get_or_insert_with(Default::default);
759 let underline = style.underline.get_or_insert_with(Default::default);
760 underline.thickness = px(1.);
761 self
762 }
763
764 /// Set the underline to be 2px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
765 fn text_decoration_2(mut self) -> Self {
766 let style = self.text_style().get_or_insert_with(Default::default);
767 let underline = style.underline.get_or_insert_with(Default::default);
768 underline.thickness = px(2.);
769 self
770 }
771
772 /// Set the underline to be 4px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
773 fn text_decoration_4(mut self) -> Self {
774 let style = self.text_style().get_or_insert_with(Default::default);
775 let underline = style.underline.get_or_insert_with(Default::default);
776 underline.thickness = px(4.);
777 self
778 }
779
780 /// Set the underline to be 8px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
781 fn text_decoration_8(mut self) -> Self {
782 let style = self.text_style().get_or_insert_with(Default::default);
783 let underline = style.underline.get_or_insert_with(Default::default);
784 underline.thickness = px(8.);
785 self
786 }
787
788 /// Change the font family on this element and its children.
789 fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
790 self.text_style()
791 .get_or_insert_with(Default::default)
792 .font_family = Some(family_name.into());
793 self
794 }
795
796 /// Change the font of this element and its children.
797 fn font(mut self, font: Font) -> Self {
798 let Font {
799 family,
800 features,
801 weight,
802 style,
803 } = font;
804
805 let text_style = self.text_style().get_or_insert_with(Default::default);
806 text_style.font_family = Some(family);
807 text_style.font_features = Some(features);
808 text_style.font_weight = Some(weight);
809 text_style.font_style = Some(style);
810
811 self
812 }
813
814 /// Set the line height on this element and its children.
815 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
816 self.text_style()
817 .get_or_insert_with(Default::default)
818 .line_height = Some(line_height.into());
819 self
820 }
821
822 /// Draw a debug border around this element.
823 #[cfg(debug_assertions)]
824 fn debug(mut self) -> Self {
825 self.style().debug = Some(true);
826 self
827 }
828
829 /// Draw a debug border on all conforming elements below this element.
830 #[cfg(debug_assertions)]
831 fn debug_below(mut self) -> Self {
832 self.style().debug_below = Some(true);
833 self
834 }
835}