Add alignItems modifier.

Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FlexboxAndGrid/FlexboxAndGrid-AlignItems.md

@@ -0,0 +1,13 @@
+# Align items
+
+Utilities for controlling how flex and grid views are positioned along a container's cross axis.
+
+## Topics
+
+### Modifiers
+
+- ``View/alignItems(_:condition:)``
+
+### Supporting types
+
+- ``AlignItems``

Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSS-Classes.md

@@ -16,6 +16,7 @@ Slipstream implementations of Tailwind CSS's classes.
 - <doc:FlexboxAndGrid-FlexDirection>
 - <doc:FlexboxAndGrid-FlexGap>
 - <doc:FlexboxAndGrid-JustifyContent>
+- <doc:FlexboxAndGrid-AlignItems>
 
 ### Spacing
 

Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+alignItems.swift

@@ -0,0 +1,91 @@
+/// Constants that specify how flex and grid views are positioned along a container's cross axis
+///
+/// - SeeAlso: Tailwind CSS' [`align items`](https://tailwindcss.com/docs/align-items) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum AlignItems: String {
+  /// Stretches views to fill the container’s cross axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌───────────────────┐
+  /// │ ┌───┐ ┌───┐ ┌───┐ │
+  /// │ │   │ │   │ │   │ │
+  /// │ │   │ │   │ │   │ │
+  /// │ │   │ │   │ │   │ │
+  /// │ └───┘ └───┘ └───┘ │
+  /// └───────────────────┘
+  /// ```
+  case stretch
+
+  /// Aligns views to the start of the container’s cross axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌───────────────────┐
+  /// │ ┌───┐ ┌───┐ ┌───┐ │
+  /// │ └───┘ │   │ │   │ │
+  /// │       │   │ └───┘ │
+  /// │       └───┘       │
+  /// └───────────────────┘
+  /// ```
+  case start
+
+  /// Aligns views along the center of the container’s cross axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌───────────────────┐
+  /// │       ┌───┐       │
+  /// │       │   │ ┌───┐ │
+  /// │ ┌───┐ │   │ │   │ │
+  /// │ └───┘ │   │ │   │ │
+  /// │       │   │ └───┘ │
+  /// │       └───┘       │
+  /// └───────────────────┘
+  /// ```
+  case center
+
+  /// Aligns views to the end of the container’s cross axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌───────────────────┐
+  /// │       ┌───┐       │
+  /// │       │   │       │
+  /// │       │   │ ┌───┐ │
+  /// │ ┌───┐ │   │ │   │ │
+  /// │ └───┘ └───┘ └───┘ │
+  /// └───────────────────┘
+  /// ```
+  case end
+
+  /// Aligns views along the container’s cross axis such
+  /// that all of their baselines align.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌───────────────────┐
+  /// │       ┌───┐ ┌───┐ │
+  /// │ ┌───┐ │   │ │   │ │
+  /// │ │ 1 │ │ 2 │ │ 3 │ │
+  /// │ │   │ │   │ └───┘ │
+  /// │ └───┘ └───┘       │
+  /// └───────────────────┘
+  /// ```
+  case baseline
+}
+
+extension View {
+  /// Controls how flex and grid views are positioned along a container's cross axis.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`align items`](https://tailwindcss.com/docs/align-items) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func alignItems(_ alignItems: AlignItems, condition: Condition? = nil) -> some View {
+    return modifier(TailwindClassModifier(add: "items-" + alignItems.rawValue, condition: condition))
+  }
+}

Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+justifyContent.swift

@@ -1,6 +1,6 @@
 /// Constants that specify how flex and grid views are positioned along a container's main axis.
 ///
-/// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation.
+/// - SeeAlso: Tailwind CSS' [`justify content`](https://tailwindcss.com/docs/justify-content) documentation.
 @available(iOS 17.0, macOS 14.0, *)
 public enum JustifyContent: String {
   /// Packs content items in their default position as if no

Tests/SlipstreamTests/Sites/CatalogSiteTests.swift

@@ -51,6 +51,7 @@ private struct CatalogSite: View {
               .display(.hidden)
           }
           .flexGap(.x, width: 2)
+          .alignItems(.baseline)
           .justifyContent(.center)
         }
         .border(.black, width: 4, edges: .bottom)
@@ -81,7 +82,7 @@ struct CatalogSiteTests {
    <br />world!
    <a href="/about">About</a>
    <a href="/home">Home</a>
-   <div class="flex flex-col gap-x-0.5 justify-center">
+   <div class="flex flex-col gap-x-0.5 items-baseline justify-center">
     <div class="flex flex-row gap-x-2.5">
      <h1 class="text-xl font-mono font-bold text-start">Heading 1</h1>
      <h2 class="text-3xl text-center">Heading 2</h2>

Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/AlignItemsTests.swift

@@ -0,0 +1,12 @@
+import Testing
+import Slipstream
+
+struct AlignItemsTests {
+  @Test func enumeration() throws {
+    try #expect(renderHTML(Div {}.alignItems(.stretch)) == #"<div class="items-stretch"></div>"#)
+    try #expect(renderHTML(Div {}.alignItems(.start)) == #"<div class="items-start"></div>"#)
+    try #expect(renderHTML(Div {}.alignItems(.center)) == #"<div class="items-center"></div>"#)
+    try #expect(renderHTML(Div {}.alignItems(.end)) == #"<div class="items-end"></div>"#)
+    try #expect(renderHTML(Div {}.alignItems(.baseline)) == #"<div class="items-baseline"></div>"#)
+  }
+}