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;
+@import "tailwindcss";
-@tailwind components;
+@source "./src/**/*.{rs,html,css}";
-@tailwind utilities;

examples/tailwind/README.md

@@ -5,3 +5,5 @@ This example shows how an app might be styled with TailwindCSS.
 ## Running
 
 Our [Tailwind](https://dioxuslabs.com/learn/0.6/cookbook/tailwind) guide explains how to setup and run Dioxus-Tailwind projects.
+
+Note that in Dioxus 0.7, the Tailwind watcher is initialized automatically if a `tailwind.css` file is find in your app's root.

examples/tailwind/src/main.rs

@@ -25,7 +25,7 @@ fn app() -> Element {
                         a { class: "mr-5 hover:text-white", "Third Link" }
                         a { class: "mr-5 hover:text-white", "Fourth Link" }
                     }
-                    button { class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
+                    button { class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-hidden hover:bg-gray-700 rounded-sm text-base mt-4 md:mt-0",
                         "Button"
                         RightArrowIcon {}
                     }
@@ -34,7 +34,7 @@ fn app() -> Element {
 
             section { class: "text-gray-400 bg-gray-900 body-font",
                 div { class: "container mx-auto flex px-5 py-24 md:flex-row flex-col items-center",
-                    div { class: "lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center",
+                    div { class: "lg:grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center",
                         h1 { class: "title-font sm:text-4xl text-3xl mb-4 font-medium text-white",
                             br { class: "hidden lg:inline-block" }
                             "Dioxus Sneak Peek"
@@ -46,17 +46,17 @@ fn app() -> Element {
                             on mobile and embedded platforms."
                         }
                         div { class: "flex justify-center",
-                            button { class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg",
+                            button { class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-hidden hover:bg-indigo-600 rounded-sm text-lg",
                                 "Learn more"
                             }
-                            button { class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg",
+                            button { class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-hidden hover:bg-gray-700 hover:text-white rounded-sm text-lg",
                                 "Build an app"
                             }
                         }
                     }
                     div { class: "lg:max-w-lg lg:w-full md:w-1/2 w-5/6",
                         img {
-                            class: "object-cover object-center rounded",
+                            class: "object-cover object-center rounded-sm",
                             src: "https://i.imgur.com/oK6BLtw.png",
                             referrerpolicy: "no-referrer",
                             alt: "hero",

examples/tailwind/tailwind.config.js

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  mode: "all",
-  content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

examples/tailwind/tailwind.css

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