Add opacity modifier.

Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md

@@ -171,7 +171,7 @@ Tailwind utility | Slipstream modifier
 :----------------|:-------------------
 [Box Shadow](https://tailwindcss.com/docs/box-shadow) | ``View/shadow(color:radius:condition:)``
 [Box Shadow Color](https://tailwindcss.com/docs/box-shadow-color) | ``View/shadow(color:radius:condition:)
-[Opacity](https://tailwindcss.com/docs/opacity) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Opacity](https://tailwindcss.com/docs/opacity) | ``View/opacity(_:condition:)``
 [Mix Blend Mode](https://tailwindcss.com/docs/mix-blend-mode) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Background Blend Mode](https://tailwindcss.com/docs/background-blend-mode) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 

Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md

@@ -56,6 +56,7 @@ Slipstream implementations of Tailwind CSS's utility classes.
 ### Effects
 
 - <doc:Effects-Shadow>
+- ``View/opacity(_:condition:)``
 
 ### Filters
 

Sources/Slipstream/TailwindCSS/Effects/View+opacity.swift

@@ -0,0 +1,45 @@
+extension View {
+  /// Sets the opacity of the view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [opacity](https://tailwindcss.com/docs/opacity) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func opacity(_ opacity: Double, condition: Condition? = nil
+  ) -> some View {
+    return modifier(TailwindClassModifier(
+      add: "opacity-" + Self.opacityToTailwindOpacityClass(opacity: opacity),
+      condition: condition)
+    )
+  }
+
+  /// Maps an opacity to the closest Tailwind CSS opacity class.
+  ///
+  /// - Parameter opacity: The opacity to be mapped.
+  /// - Returns: The Tailwind CSS opacity class.
+  private static func opacityToTailwindOpacityClass(opacity: Double) -> String {
+    let mapping: [(name: String, opacity: Double)] = [
+      ("0",   0.00),
+      ("5",   0.05),
+      ("10",  0.10),
+      ("15",  0.15),
+      ("20",  0.20),
+      ("25",  0.25),
+      ("30",  0.30),
+      ("35",  0.35),
+      ("40",  0.40),
+      ("45",  0.45),
+      ("50",  0.50),
+      ("55",  0.55),
+      ("60",  0.60),
+      ("65",  0.65),
+      ("70",  0.70),
+      ("75",  0.75),
+      ("80",  0.80),
+      ("85",  0.85),
+      ("90",  0.90),
+      ("95",  0.95),
+      ("100",  1.00),
+    ]
+    let closestClass = mapping.min { abs($0.opacity - opacity) < abs($1.opacity - opacity) }
+    return closestClass?.name ?? "0"
+  }
+}

Tests/SlipstreamTests/TailwindCSS/Effects/OpacityTests.swift

@@ -0,0 +1,29 @@
+import Testing
+
+import Slipstream
+
+struct OpacityTests {
+  @Test func opacities() throws {
+    try #expect(renderHTML(Div {}.opacity(0.00)) == #"<div class="opacity-0"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.05)) == #"<div class="opacity-5"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.10)) == #"<div class="opacity-10"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.15)) == #"<div class="opacity-15"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.20)) == #"<div class="opacity-20"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.25)) == #"<div class="opacity-25"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.30)) == #"<div class="opacity-30"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.35)) == #"<div class="opacity-35"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.40)) == #"<div class="opacity-40"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.45)) == #"<div class="opacity-45"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.50)) == #"<div class="opacity-50"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.55)) == #"<div class="opacity-55"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.60)) == #"<div class="opacity-60"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.65)) == #"<div class="opacity-65"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.70)) == #"<div class="opacity-70"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.75)) == #"<div class="opacity-75"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.80)) == #"<div class="opacity-80"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.85)) == #"<div class="opacity-85"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.90)) == #"<div class="opacity-90"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(0.95)) == #"<div class="opacity-95"></div>"#)
+    try #expect(renderHTML(Div {}.opacity(1.00)) == #"<div class="opacity-100"></div>"#)
+  }
+}