diff --git a/Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift b/Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift index 8d09f33..513980c 100644 --- a/Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift +++ b/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. diff --git a/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift b/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift index 9423c8f..2b3598f 100644 --- a/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift +++ b/Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift @@ -24,6 +24,10 @@ struct BackgroundImageTests { try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(20))) == #"
"#) } + @Test func customColor() throws { + try #expect(renderHTML(Div {}.background("my-dark")) == #"
"#) + } + // MARK: - Image backgrounds @Test func justURL() throws {