Guides
How to Install in Leptos SSR (Actix, Axum or Spin)
Before you start, you should have already generated your Leptos application with one of the following templates:
- github.com/leptos-rs/start
- github.com/leptos-rs/start-axum
- github.com/leptos-rs/start-spin
Add the following lines to your Cargo.toml file:
[build-dependencies]
# ···
leptos-bulma = { version = "0.6.0", default-features = false, features = ["build-script"] }

[dependencies]
# ···
leptos-bulma = "0.6.0"

[features]
# ···
ssr = [
    # ···
    "leptos-bulma/ssr"
]
Then add the following code to your build.rs file:
fn main() {
    // ···
    leptos_bulma::build("./style");
}
Use leptos-bulma.scss in your stylesheet:
@use "leptos-bulma.scss";
And finally, add leptos-bulma.scss to your .gitignore file:
/style/leptos-bulma.scss
How to Install in Leptos CSR (Trunk)
In case you generated your Leptos application with the following template:
- github.com/leptos-rs/start-trunk
Add the following line to your Cargo.toml file:
[dependencies]
# ···
leptos-bulma = { version = "0.6.0, features = ["build-script"] }
Then create a file in the pathsrc/bin/build-leptos-bulma.rs and add the following code:
fn main() {
    // ···
    leptos_bulma::build("./style");
}
Run the following command to generate the leptos-bulma.scss file:
cargo run --bin build-leptos-bulma
Modify your index.html with the following lines:
<!-- Add leptos-bulma.scss -->
<link data-trunk rel="scss" rel="stylesheet" href="style/leptos-bulma.scss"/>
<!-- Since you added another binary, you should modify the following line and add the default target name -->
<link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs data-target-name="<PACKAGE-NAME>"/>
Optionally you can add the following lines to your Trunk.toml, but be aware that the directorystyle will be ignored from watch:
[watch]
# ···
ignore = ["style"]

[[hooks]]
stage = "pre_build"
command = "cargo"
command_arguments = ["run", "--bin", "build-leptos-bulma"]
And finally, add leptos-bulma.scss to your .gitignore file:
/style/leptos-bulma.scss
Customization
Customize with Sass
You can overwrite Bulma’s Sass variables with your own values by using the with in your stylesheet:
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

@use "leptos-bulma.scss" with (
    $grey-dark: $brown,
    $grey-light: $beige-light,
    $primary: $purple,
    $link: $pink,
    $control-border-width: 2px,
    $input-shadow: none
);
To check the available variables, go to: bulma.io/documentation/customize/list-of-sass-variables.