Tailwind-style utility classes for LiveView Native.

Modifier Translation

Modifiers can easily be translated to classes.

1. Separate any arguments with a dash (-)
2. Use labels for any named arguments (key:value)

Attribute References

To reference an attribute value, use [attr(attribute-name)]:

<Group class="offset-y:[attr(offset)]" offset="5">

Complex Arguments

Complex types (such as a gradient ShapeStyle) can be provided by writing out the full syntax as an argument.

<Rectangle class="fg(LinearGradient(colors:[.red,.blue],startPoint:.leading,endPoint:.trailing))" />
<Image class="font(.system(size:70))" />

[!NOTE] Spaces cannot be used within class names.

Spaces and Underscores

To include a space in a string argument, use and underscore ['Hello,_world!']. Any underscores will be replaced with a space.

<Group class="navigationTitle-['Hello_World']">

If you need to include an underscore character, escape it with _.

<Group class="navigationTitle-['Hello_World']">

Shorthand

Some aliases are provided to make common classes easier to use.