Implement the full suite of Tailwind CSS modifiers

[jverkoey]

Layout

• Aspect Ratio
• Container
• Columns
• Break After
• Break Before
• Break Inside
• Box Decoration Break
• Box Sizing
• Display
• Floats
• Clear
• Isolation
• Object Fit
• Object Position
• Overflow
• Overscroll Behavior
• Position
• Top / Right / Bottom / Left
• Visibility
• Z-Index

Flexbox & Grid

• Flex Basis
• Flex Direction
• Flex Wrap
• Flex
• Flex Grow
• Flex Shrink
• Order
• Grid Template Columns
• Grid Column Start / End
• Grid Template Rows
• Grid Row Start / End
• Grid Auto Flow
• Grid Auto Columns
• Grid Auto Rows
• Gap
• Justify Content
• Justify Items
• Justify Self
• Align Content
• Align Items
• Align Self
• Place Content
• Place Items
• Place Self

Spacing

• Padding
• Margin
• Space Between

Sizing

• Width
• Min-Width
• Max-Width
• Height
• Min-Height
• Max-Height
• Size

Typography

• Font Family
• Font Size
• Font Smoothing
• Font Style
• Font Weight
• Font Variant Numeric
• Letter Spacing
• Line Clamp
• Line Height
• List Style Image
• List Style Position
• List Style Type
• Text Align
• Text Color
• Text Decoration
• Text Decoration Color
• Text Decoration Style
• Text Decoration Thickness
• Text Underline Offset
• Text Transform
• Text Overflow
• Text Wrap
• Text Indent
• Vertical Align
• Whitespace
• Word Break
• Hyphens
• Content

Backgrounds

• Background Attachment
• Background Clip
• Background Color
• Background Origin
• Background Position
• Background Repeat
• Background Size
• Background Image
• Gradient Color Stops

Borders

• Border Radius
• Border Width
• Border Color
• Border Style
• Divide Width
• Divide Color
• Divide Style
• Outline Width
• Outline Color
• Outline Style
• Outline Offset
• Ring Width
• Ring Color
• Ring Offset Width
• Ring Offset Color

Effects

• Box Shadow
• Box Shadow Color
• Opacity
• Mix Blend Mode
• Background Blend Mode

Filters

• Blur
• Brightness
• Contrast
• Drop Shadow
• Grayscale
• Hue Rotate
• Invert
• Saturate
• Sepia
• Backdrop Blur
• Backdrop Brightness
• Backdrop Contrast
• Backdrop Grayscale
• Backdrop Hue Rotate
• Backdrop Invert
• Backdrop Opacity
• Backdrop Saturate
• Backdrop Sepia

Tables

• Border Collapse
• Border Spacing
• Table Layout
• Caption Side

Transitions & Animation

• Transition Property
• Transition Duration
• Transition Timing Function
• Transition Delay
• Animation

Transforms

• Scale
• Rotate
• Translate
• Skew
• Transform Origin

Interactivity

• Accent Color
• Appearance
• Cursor
• Caret Color
• Pointer Events
• Resize
• Scroll Behavior
• Scroll Margin
• Scroll Padding
• Scroll Snap Align
• Scroll Snap Stop
• Scroll Snap Type
• Touch Action
• User Select
• Will Change

SVG

• Fill
• Stroke
• Stroke Width

[Avinashshiyani]

Can you specify More ? @jverkoey

[jverkoey]

I'll be adding an example PR for some of these modifiers shortly :)

[jverkoey]

@Avinashshiyani #55 is a PR that adds support for Tailwind CSS' text-align classes.

The basic workflow behind adding support for each of the classes in this list is:

1. Open the Tailwind CSS documentation page. In this case, text-align. Notice the grouping of this class under "Typography".
2. Look at the different classes and match them to a SwiftUI equivalent. In this case, TextAlignment
3. Add a new .swift file in Sources/Slipstream/TailwindCSS within the right sub-directory. For text-align, we want to put it in the Typography folder.
4. Define a View modifier function. Most modifiers will look something like this:

extension View {
  /// Control the alignment of text.
  ///
  /// - Parameter alignment: Text alignment to be applied to text within the modified view.
  public func textAlignment(_ alignment: TextAlignment) -> some View {
    return self.modifier(ClassModifier(add: "text-" + alignment.rawValue))
  }
}

5. Define any enum types needed for the modifier. It's typically best to make the enum conform to the String type so that you can easily convert it to its string representation. In the text-align case, we created a TextAlignment enum like so:

/// Constants that specify the visual alignment of the text.
public enum TextAlignment: String {
  /// Aligns text to the left edge of the text container in
  /// left-to-right (LTR) languages, and to the right edge
  /// in right-to-left (RTL) languages..
  case leading = "start"

  /// Aligns text to the center of the text container.
  case center

  /// Aligns text to the right edge of the text container in
  /// left-to-right (LTR) languages, and to the left edge
  /// in right-to-left (RTL) languages..
  case trailing = "end"

  /// Text will fill the container, adding spacing between words as needed.
  case justify
}

6. Add an example of this modifier to Tests/SlipstreamTests/Sites/CatalogSiteTests.swift, which is meant to have an exhaustive catalog of all of Slipstream's views + modifiers.
7. Add a unit test to Tests/SlipstreamTests. The text-align tests looked like this:

import Testing

import Slipstream

struct TextAlignmentTests {
  @Test func alignments() throws {
    try #expect(renderHTML(Div {}.textAlignment(.leading)) == #"<div class="text-start"></div>"#)
    try #expect(renderHTML(Div {}.textAlignment(.center)) == #"<div class="text-center"></div>"#)
    try #expect(renderHTML(Div {}.textAlignment(.trailing)) == #"<div class="text-end"></div>"#)
    try #expect(renderHTML(Div {}.textAlignment(.justify)) == #"<div class="text-justify"></div>"#)
  }
}

[jverkoey]

@Avinashshiyani #60 might be an easier issue to take on because it requires fewer moving parts.