mirrors/leptos-book
1
0
Fork 0
mirror of https://github.com/leptos-rs/book.git synced 2025-12-27 10:01:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #192 from ryykdev/patch-6

Browse Source 
Update interlude_styling.md
This commit is contained in:
Greg Johnston
2025-06-12 16:53:17 -04:00
committed by GitHub
parent e055fa68e4 0d408fb1fe
commit d81e6b2b41
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/interlude_styling.md
View File

@@ -4,7 +4,21 @@ Anyone creating a website or application soon runs into the question of styling.
Some frontend frameworks (like Angular, Vue, and Svelte) provide built-in ways to scope your CSS to particular components, making it easier to manage styles across a whole application without styles meant to modify one small component having a global effect. Other frameworks (like React or Solid) don’t provide built-in CSS scoping, but rely on libraries in the ecosystem to do it for them. Leptos is in this latter camp: the framework itself has no opinions about CSS at all, but provides a few tools and primitives that allow others to build styling libraries.
Here are a few different approaches to styling your Leptos app, other than plain CSS.
Here are a few different approaches to styling your Leptos app, starting with plain CSS.
## Plain CSS
### Client-Side Rendering with Trunk
`trunk` can be used to bundle CSS files and images with your site. To do this, you can add them as Trunk assets by defining them in your `index.html` in the `<head>`. For example, to add a CSS file located at `style.css` you can add the tag `<link data-trunk rel="css" href="./style.css"/>`.
You can find more information in the Trunk documentation for [assets](https://trunkrs.dev/assets/).
### Server-Side Rendering with `cargo-leptos`
The `cargo-leptos` templates are configured by default to use SASS to bundle CSS files and output them at `/pkg/{project_name}.css`. If you want to load additional CSS files, you can do so either by importing them into that `style.scss` file, or by adding them to the `public` directory. (A file at `public/foo.css`, for example, is served at `/foo.css`.)
To load stylesheets in a component, you can use the [`Stylesheet`](https://docs.rs/leptos_meta/latest/leptos_meta/fn.Stylesheet.html) component.
## TailwindCSS: Utility-first CSS