Skip to content

Commit

Permalink
update README
Browse files Browse the repository at this point in the history
  • Loading branch information
tststs committed Oct 13, 2024
1 parent 09d36f2 commit 8fa9f35
Showing 1 changed file with 12 additions and 47 deletions.
59 changes: 12 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,14 @@ namespace Zom {
button.AddToClassList("bg-stone-950");
button.AddToClassList("border-0");

// Text alignment is implemented through a custom plugin because Unity uses a unique format for text alignment (-unity-text-align)
button.AddToClassList("text-middle-center");

// Unity doesn't support ":" as the default separator, so we use "_" instead.
// For example, use `hover_bg-white` instead of `hover:bg-white`.
button.AddToClassList("hover_bg-white");
button.AddToClassList("hover_text-black");

button.text = pair.Key;
button.RegisterCallback<ClickEvent>(ev => pair.Value());

Expand All @@ -101,52 +109,7 @@ namespace Zom {
}
```

If these files are within the configured monitored folders, the following USS file will be generated.

```css
.grow {
flex-grow: 1
}

.items-center {
align-items: center
}

.justify-center {
justify-content: center
}

.rounded-xl {
border-radius: 12px
}

.border-0 {
border-width: 0px
}

.bg-stone-950 {
background-color: #0c0a09
}

.px-3 {
padding-left: 12px;
padding-right: 12px
}

.py-2 {
padding-top: 8px;
padding-bottom: 8px
}

.text-base {
font-size: 16px;
line-height: 24px
}

.text-white {
color: #fff
}
```
If these files are within the configured monitored folders, the USS file will be generated in `Assets/TailwindCSS/tailwind.uss`.

Which results in the following UI.

Expand All @@ -156,6 +119,8 @@ Which results in the following UI.

USS supports these core plugins out of the box. However, there are some limitations with certain plugins. For example, `border-e-green-800` won't work, but `border-green-800` will. Currently, there are no converters for unsupported core plugins, but this is subject to change as the library evolves during its use in an active project. If you need a specific core plugin for your project, feel free to open an issue, and I'll do my best to make it compatible.

Properties marked as custom differ from the default Tailwind behavior. All custom properties are explained in the example.

| Property | Supported |
|--------------------------|-----------|
| accentColor ||
Expand Down Expand Up @@ -309,7 +274,7 @@ USS supports these core plugins out of the box. However, there are some limitati
| stroke ||
| strokeWidth ||
| tableLayout ||
| textAlign ||
| textAlign (custom) ||
| textColor ||
| textDecoration ||
| textDecorationColor ||
Expand Down

0 comments on commit 8fa9f35

Please sign in to comment.