feat: update examples to tailwind v4 (#3943)

* feat: update examples to tailwind v4

---------

Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>

example-projects/ecommerce-site/README.md

@@ -6,13 +6,14 @@ This example app is a fullstack web application leveraging the [FakeStoreAPI](ht
 
 # Development
 
-1. Run the following commands to serve the application (see the tailwind example in the main Dioxus repo for more detailed information about setting up tailwind):
+1. Run the following commands to serve the application:
 
 ```bash
-npx tailwindcss -i ./tailwind.css -o ./public/tailwind.css --watch
 dx serve
 ```
 
+Note that in Dioxus 0.7, the Tailwind watcher is initialized automatically if a `tailwind.css` file is find in your app's root.
+
 # Status
 
 This is a work in progress. The following features are currently implemented:

example-projects/ecommerce-site/src/components/nav.rs

@@ -35,7 +35,7 @@ pub fn nav() -> Element {
                             }
                         }
                     }
-                    a { class: "flex-shrink-0 xl:mx-auto text-3xl font-bold font-heading",
+                    a { class: "shrink-0 xl:mx-auto text-3xl font-bold font-heading",
                         href: "/",
                         img { class: "h-9",
                             width: "auto",
@@ -121,7 +121,7 @@ pub fn nav() -> Element {
                             }
                         }
                     }
-                    input { class: "block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none",
+                    input { class: "block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-hidden",
                         r#type: "search",
                         placeholder: "Search",
                     }

example-projects/ecommerce-site/src/components/product_page.rs

@@ -101,7 +101,7 @@ pub fn product_page(product_id: ReadOnlySignal<usize>) -> Element {
                                             onclick: move |_| quantity += 1,
                                             icons::icon_2 {}
                                         }
-                                        input { class: "w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-none rounded-md",
+                                        input { class: "w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-hidden rounded-md",
                                             placeholder: "1",
                                             r#type: "number",
                                             value: "{quantity}",

example-projects/ecommerce-site/tailwind.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  mode: "all",
-  content: [
-    // include all rust, html and css files in the src directory
-    "./src/**/*.{rs,html,css}",
-    // include all html files in the output (dist) directory
-    "./dist/**/*.html",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

example-projects/ecommerce-site/tailwind.css

@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@source "./src/**/*.{rs,html,css}";