"Welcome to Leptos with Tailwind"
+"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."
+ +diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md index 935a01411..8088bd3d6 100644 --- a/docs/book/src/SUMMARY.md +++ b/docs/book/src/SUMMARY.md @@ -27,7 +27,7 @@ - [Params and Queries](./router/18_params_and_queries.md) - [``](./router/19_a.md) - [`
`](./router/20_form.md) -- [Interlude: Styling — CSS, Tailwind, Style.rs, and more]() +- [Interlude: Styling](./interlude_styling.md) - [Server Side Rendering](./ssr/README.md) - [The Life of a Page Load](./ssr/21_life_cycle.md) - [Models of SSR]() diff --git a/docs/book/src/interlude_styling.md b/docs/book/src/interlude_styling.md new file mode 100644 index 000000000..767a01284 --- /dev/null +++ b/docs/book/src/interlude_styling.md @@ -0,0 +1,112 @@ +# Interlude: Styling + +Anyone creating a website or application soon runs into the question of styling. For a small app, a single CSS file is probably plenty to style your user interface. But as an application grows, many developers find that plain CSS becomes increasingly hard to manage. + +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. + +## TailwindCSS: Utility-first CSS + +[TailwindCSS](https://tailwindcss.com/) is a popular utility-first CSS library. It allows you to style your application by using inline utility classes, with a custom CLI tool that scans your files for Tailwind class names and bundles the necessary CSS. + +This allows you to write components like this: + +```rust +#[component] +fn Home(cx: Scope) -> impl IntoView { + let (count, set_count) = create_signal(cx, 0); + + view! { cx, +"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."
+ +