Add items-first-baseline and items-last-baseline utilities - v3

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#baseline
tailwindlabs · Jun 23, 2024 · 3f62621 · 3f62621
1 parent a61e5aa
commit 3f62621
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -1325,6 +1325,8 @@ export let corePlugins = {
       '.items-end': { 'align-items': 'flex-end' },
       '.items-center': { 'align-items': 'center' },
       '.items-baseline': { 'align-items': 'baseline' },
+      '.items-first-baseline': { 'align-items': 'first baseline' },
+      '.items-last-baseline': { 'align-items': 'last baseline' },
       '.items-stretch': { 'align-items': 'stretch' },
     })
   },

diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
@@ -312,6 +312,12 @@
 .items-start {
   align-items: flex-start;
 }
+.items-first-baseline {
+  align-items: first baseline;
+}
+.items-last-baseline {
+  align-items: last baseline;
+}
 .justify-center {
   justify-content: center;
 }
@@ -525,7 +531,7 @@
 }
 .font-sans {
   font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-     Segoe UI Symbol, Noto Color Emoji;
+    Segoe UI Symbol, Noto Color Emoji;
 }
 .text-2xl {
   font-size: 1.5rem;

diff --git a/tests/raw-content.test.js b/tests/raw-content.test.js
@@ -10,6 +10,8 @@ it('raw content', () => {
           <div class="sr-only"></div>
           <div class="content-center"></div>
           <div class="items-start"></div>
+          <div class="items-first-baseline"></div>
+          <div class="items-last-baseline"></div>
           <div class="self-end"></div>
           <div class="animate-none"></div>
           <div class="animate-spin"></div>