Skip to main content

tw

Macro tw 

Source
tw!() { /* proc-macro */ }
Expand description

This macro allows you to create or mutate bevy UI component(s) with TailwindCSS classes and clsx object syntax. To create components, you can pass a string of TailwindCSS classes or an object of TailwindCSS classes.

use bevy_tailwind::tw;

let bundle: (BackgroundColor, Node) = tw!("bg-white w-full h-full");
let bundle: (BackgroundColor, Node) = tw!("h-full w-full", {
   "bg-white p-6": true,
})

To mutate component, you can pass an expression as the first argument. The expression either returns an owned value or a mutable reference to the component. You can only one component at a time. The macro will return whatever the expression returns.

use bevy_tailwind::tw;

let node: Node = tw!(get_node(), "w-full h-full", {
  "p-6": true,
});

let node: &mut Node = tw!(&mut node, "m-10");

To mutate multiple components, you can use the entity syntax. The syntax is same as component mutation but with the leading @ symbol and the expression must return EntityMut.

use bevy_tailwind::tw;

fn my_system(mut query: Query<EntityMut, With<Node>>) {
    for mut entity in query.iter_mut() {
      tw!(@ &mut entity, "p-1");
   }
}