diff --git a/examples/tailwind_actix/end2end/tests/example.spec.ts b/examples/tailwind_actix/end2end/tests/example.spec.ts index f52c8f1a78..17e641527f 100644 --- a/examples/tailwind_actix/end2end/tests/example.spec.ts +++ b/examples/tailwind_actix/end2end/tests/example.spec.ts @@ -1,7 +1,7 @@ import { test, expect } from "@playwright/test"; -test("should see the welcome message", async ({ page }) => { +test("homepage has title 'Leptos + Tailwindcss'", async ({ page }) => { await page.goto("http://localhost:3000/"); - await expect(page.locator("h2")).toHaveText("Welcome to Leptos with Tailwind"); + await expect(page).toHaveTitle("Leptos + Tailwindcss"); }); diff --git a/examples/tailwind_actix/src/app.rs b/examples/tailwind_actix/src/app.rs index 58832c0465..f95a30ed21 100644 --- a/examples/tailwind_actix/src/app.rs +++ b/examples/tailwind_actix/src/app.rs @@ -22,24 +22,29 @@ pub fn App() -> impl IntoView { #[component] fn Home() -> impl IntoView { - let (count, set_count) = signal(0); + let (value, set_value) = signal(0); + // thanks to https://tailwindcomponents.com/component/blue-buttons-example for the showcase layout view! { -
-

"Welcome to Leptos with Tailwind"

-

"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."

- + + <main> + <div class="bg-gradient-to-tl from-blue-800 to-blue-500 text-white font-mono flex flex-col min-h-screen"> + <div class="flex flex-row-reverse flex-wrap m-auto"> + <button on:click=move |_| set_value.update(|value| *value += 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white"> + "+" + </button> + <button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white"> + {value} + </button> + <button + on:click=move |_| set_value.update(|value| *value -= 1) + class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white" + class:invisible=move || {value.get() < 1} + > + "-" + </button> + </div> + </div> </main> } } diff --git a/examples/tailwind_actix/tailwind.config.js b/examples/tailwind_actix/tailwind.config.js index e741353466..a691adb072 100644 --- a/examples/tailwind_actix/tailwind.config.js +++ b/examples/tailwind_actix/tailwind.config.js @@ -1,7 +1,10 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: { + content: { files: ["*.html", "./src/**/*.rs"], + transform: { + rs: (content) => content.replace(/(?:^|\s)class:/g, ' '), + }, }, theme: { extend: {}, diff --git a/examples/tailwind_axum/end2end/tests/example.spec.ts b/examples/tailwind_axum/end2end/tests/example.spec.ts index a461f351a1..17e641527f 100644 --- a/examples/tailwind_axum/end2end/tests/example.spec.ts +++ b/examples/tailwind_axum/end2end/tests/example.spec.ts @@ -1,9 +1,7 @@ import { test, expect } from "@playwright/test"; -test("homepage has title and links to intro page", async ({ page }) => { +test("homepage has title 'Leptos + Tailwindcss'", async ({ page }) => { await page.goto("http://localhost:3000/"); - await expect(page).toHaveTitle("Welcome to Leptos"); - - await expect(page.locator("h1")).toHaveText("Welcome to Leptos!"); + await expect(page).toHaveTitle("Leptos + Tailwindcss"); }); diff --git a/examples/tailwind_axum/src/app.rs b/examples/tailwind_axum/src/app.rs index 37bbb685cc..d9d7aee2bd 100644 --- a/examples/tailwind_axum/src/app.rs +++ b/examples/tailwind_axum/src/app.rs @@ -54,7 +54,11 @@ fn Home() -> impl IntoView { <button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white"> {value} </button> - <button on:click=move |_| set_value.update(|value| *value -= 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white"> + <button + on:click=move |_| set_value.update(|value| *value -= 1) + class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white" + class:invisible=move || {value.get() < 1} + > "-" </button> </div> diff --git a/examples/tailwind_axum/tailwind.config.js b/examples/tailwind_axum/tailwind.config.js index 40cda499bb..a691adb072 100644 --- a/examples/tailwind_axum/tailwind.config.js +++ b/examples/tailwind_axum/tailwind.config.js @@ -1,9 +1,13 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["*.html", "./src/**/*.rs",], + content: { + files: ["*.html", "./src/**/*.rs"], + transform: { + rs: (content) => content.replace(/(?:^|\s)class:/g, ' '), + }, + }, theme: { extend: {}, }, plugins: [], } - diff --git a/examples/tailwind_csr/end2end/tests/example.spec.ts b/examples/tailwind_csr/end2end/tests/example.spec.ts index 4a05f086a4..dbfb1a3b5a 100644 --- a/examples/tailwind_csr/end2end/tests/example.spec.ts +++ b/examples/tailwind_csr/end2end/tests/example.spec.ts @@ -1,9 +1,7 @@ import { test, expect } from "@playwright/test"; -test("homepage has title and links to intro page", async ({ page }) => { +test("homepage has title 'Leptos + Tailwindcss'", async ({ page }) => { await page.goto("http://localhost:8080/"); - await expect(page).toHaveTitle("Leptos • Counter with Tailwind"); - - await expect(page.locator("h2")).toHaveText("Welcome to Leptos with Tailwind"); + await expect(page).toHaveTitle("Leptos + Tailwindcss"); }); diff --git a/examples/tailwind_csr/src/app.rs b/examples/tailwind_csr/src/app.rs index e584f2bf67..9f74232e8d 100644 --- a/examples/tailwind_csr/src/app.rs +++ b/examples/tailwind_csr/src/app.rs @@ -22,24 +22,29 @@ pub fn App() -> impl IntoView { #[component] fn Home() -> impl IntoView { - let (count, set_count) = signal(0); + let (value, set_value) = signal(0); + // thanks to https://tailwindcomponents.com/component/blue-buttons-example for the showcase layout view! { - <div class="my-0 mx-auto max-w-3xl text-center"> - <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2> - <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p> - <button - class="bg-amber-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg" - on:click=move |_| set_count.update(|count| *count += 1) - > - "Something's here | " - {move || if count.get() == 0 { - "Click me!".to_string() - } else { - count.get().to_string() - }} - " | Some more text" - </button> - </div> + <Title text="Leptos + Tailwindcss"/> + <main> + <div class="bg-gradient-to-tl from-blue-800 to-blue-500 text-white font-mono flex flex-col min-h-screen"> + <div class="flex flex-row-reverse flex-wrap m-auto"> + <button on:click=move |_| set_value.update(|value| *value += 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white"> + "+" + </button> + <button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white"> + {value} + </button> + <button + on:click=move |_| set_value.update(|value| *value -= 1) + class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white" + class:invisible=move || {value.get() < 1} + > + "-" + </button> + </div> + </div> + </main> } } diff --git a/examples/tailwind_csr/tailwind.config.js b/examples/tailwind_csr/tailwind.config.js index e741353466..a691adb072 100644 --- a/examples/tailwind_csr/tailwind.config.js +++ b/examples/tailwind_csr/tailwind.config.js @@ -1,7 +1,10 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: { + content: { files: ["*.html", "./src/**/*.rs"], + transform: { + rs: (content) => content.replace(/(?:^|\s)class:/g, ' '), + }, }, theme: { extend: {},