Utility function that let's you define a bevy_ui Style component with tailwindcss inspired syntax.
If you are already familiar with tailwind classes just use them and it will probably work. As long as you only use the layout related classes. Not all features are supported, for example, bevy currently only supports flexbox. If you don't know tailwind but know bevy I'd recommend using the search in the tailwind docs which will give you a class that will probably work. It's not actually tailwind, just based on the same principles so plenty of things might not behave as expected.
Reference: https://tailwindcss.com
The basic idea is that each Style property has a simple short-hand value that can be used to compose more complex styles. The parameter is simply a space separated string of those short-hand.
This is the button example in bevy 0.8
```rust use bevy::prelude::*;
fn system(mut commands: Commands, assetserver: AssetServer) { commands .spawn(ButtonBundle { style: Style { size: Size::new(Val::Px(150.0), Val::Px(65.0)), // center button margin: UiRect::all(Val::Auto), // horizontally center child text justifycontent: JustifyContent::Center, // vertically center child text alignitems: AlignItems::Center, ..default() }, backgroundcolor: Color::RED.into(), ..default() }) .withchildren(|parent| { parent.spawn(TextBundle::fromsection( "Button", TextStyle { font: assetserver.load("fonts/FiraSans-Bold.ttf"), fontsize: 40.0, color: Color::rgb(0.9, 0.9, 0.9), }, )); }); } ```
The same example using bevyuistyled
```rust use bevy::prelude::*; use bevyuistyled::styled;
fn system(mut commands: Commands, assetserver: AssetServer) { commands .spawn(ButtonBundle { // This will return a Style component that is identical to the one above style: styled!("w-150 h-65 m-auto justify-center items-center"), backgroundcolor: Color::RED.into(), ..default() }) .withchildren(|parent| { parent.spawn(TextBundle::fromsection( "Button", TextStyle { font: assetserver.load("fonts/FiraSans-Bold.ttf"), fontsize: 40.0, color: Color::rgb(0.9, 0.9, 0.9), }, )); }); }
```
Some of those utilities support passing a numerical value. Numbers are parse as f32 so you can pass it any valid f32. If you use a fraction, it will compute the value as a percentage and clamp it to 100%.
```rust use bevyuistyled::styled;
styled!("m-50"); // a 50px margin styled!("m-1.5"); // a 1.5px margin styled!("m-1/2"); // a 1/2 margin. Any fraction will be converted to a percentage and clamped to 100% styled!("m-50%"); // a 50% margin styled!("m-auto"); // a Val::Auto margin ```
Warning: In tailwind, decimal values are used to represent em values. Since bevy only supports percent and pixels I simply evaluate it as a pixel value. I don't know how bevy interprets a 0.5 pixel.
I also created a colors module that contains the default colors from tailwind. Unlike tailwind these aren't easily customizable, but you can just use const CUSTOM_COLOR: Color to do that. This is just to have some basic color to get you started.
If you don't like repeating the same classes multiple time, you can easily just store the output of the macro in a variable and use it whenever you want to duplicate a style.
```rust use bevy::prelude::*; use bevyuistyled::styled;
const GLOBAL_STYLE: Style = styled!("w-full h-full justify-center"); ```
| bevy | bevyuistyled | | ---- | -------------- | | 0.3 | 0.10 | | 0.2 | 0.9 |