Add ability to specify custom color names for background.

Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift

@@ -92,6 +92,27 @@ extension View {
     modifier(TailwindClassModifier(add: "bg-\(color.toTailwindColorClass())", condition: condition))
   }
 
+  /// Sets the background color to a specific name.
+  ///
+  /// To use custom colors, add them to your tailwind.config.js `theme.extend.colors` property:
+  ///
+  /// ```js
+  /// theme: {
+  ///   extend: {
+  ///     colors: {
+  ///       'sidecar-gray': '#262625',
+  ///     },
+  ///   }
+  /// }
+  /// ```
+  ///
+  /// - SeeAlso: Tailwind CSS' [background color](https://tailwindcss.com/docs/background-color) documentation.
+  /// - SeeAlso: Tailwind CSS' [customizing colors](https://tailwindcss.com/docs/customizing-colors) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func background(_ color: String, condition: Condition? = nil) -> some View {
+    modifier(TailwindClassModifier(add: "bg-" + color, condition: condition))
+  }
+
   /// Sets the background material of the view.
   ///
   /// - SeeAlso: Tailwind CSS' [backdrop blur](https://tailwindcss.com/docs/backdrop-blur) documentation.

Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift

@@ -24,6 +24,10 @@ struct BackgroundImageTests {
     try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(20))) == #"<div class="bg-cyan-500"></div>"#)
   }
 
+  @Test func customColor() throws {
+    try #expect(renderHTML(Div {}.background("my-dark")) == #"<div class="bg-my-dark"></div>"#)
+  }
+
   // MARK: - Image backgrounds
 
   @Test func justURL() throws {