From ec55497173875b8b6d99de9a1bf044847254a06b Mon Sep 17 00:00:00 2001
From: igor_przybysz <i.przybysz@mdbootstrap.com>
Date: Wed, 26 Jul 2023 12:27:34 +0200
Subject: [PATCH] Integration pages - fix code indentation in snippets

---
 .../standard/integrations/angular/index.html  |  16 +--
 .../standard/integrations/django/index.html   |  24 ++--
 .../standard/integrations/express/index.html  |  16 +--
 .../standard/integrations/laravel/index.html  |  12 +-
 .../standard/integrations/next/index.html     |  14 +-
 .../standard/integrations/nuxt/index.html     |  12 +-
 .../standard/integrations/react/index.html    | 134 +++++++++---------
 .../standard/integrations/remix/index.html    | 117 ++++++++-------
 .../standard/integrations/solid/index.html    |  14 +-
 .../standard/integrations/svelte/index.html   |  14 +-
 .../docs/standard/integrations/vue/index.html |  14 +-
 11 files changed, 199 insertions(+), 188 deletions(-)

diff --git a/site/content/docs/standard/integrations/angular/index.html b/site/content/docs/standard/integrations/angular/index.html
index 27926b125..06b58ac67 100644
--- a/site/content/docs/standard/integrations/angular/index.html
+++ b/site/content/docs/standard/integrations/angular/index.html
@@ -153,21 +153,21 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
         module.exports = {
-        content: [
+          content: [
             "./src/**/*.{html,ts}",
             "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
+          ],
+          theme: {
             extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -198,7 +198,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "index.html" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="HTML" >}}
+    {{< twsnippet/code active=true lang="HTML" >}}
     <link
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
       rel="stylesheet" />
diff --git a/site/content/docs/standard/integrations/django/index.html b/site/content/docs/standard/integrations/django/index.html
index c2e258d60..f7f19db4a 100644
--- a/site/content/docs/standard/integrations/django/index.html
+++ b/site/content/docs/standard/integrations/django/index.html
@@ -161,8 +161,8 @@ <h2 class="text-lg font-bold">Step 5</h2>
         {{< twsnippet/code active=true lang="python" >}}
           TE_URL = 'node_modules/'
           STATICFILES_DIRS = [
-              BASE_DIR / "static",
-              BASE_DIR.parent / "node_modules",
+            BASE_DIR / "static",
+            BASE_DIR.parent / "node_modules",
           ]
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -202,8 +202,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.js</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.js" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
           /** @type {import('tailwindcss').Config} */
@@ -268,7 +268,7 @@ <h2 class="text-lg font-bold">Step 5</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "home.html" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="HTML" >}}
+    {{< twsnippet/code active=true lang="HTML" >}}
     <link href="{% static 'output.css' %}" rel="stylesheet" />
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
@@ -283,7 +283,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "home.html" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="HTML" >}}
+    {{< twsnippet/code active=true lang="HTML" >}}
     <script
       src="{% static 'tw-elements/dist/js/tw-elements.umd.min.js' %}"
       type="text/javascript"></script>
@@ -320,7 +320,7 @@ <h2 class="text-lg font-bold">Step 8</h2>
         from django.shortcuts import render
 
         def home_view(request):
-            return render(request, "pages/home.html", {})
+          return render(request, "pages/home.html", {})
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
   </div>
@@ -341,16 +341,14 @@ <h2 class="text-lg font-bold">Step 9</h2>
         from . import views
 
         urlpatterns = [
-            path("", views.home_view),
-            path('admin/', admin.site.urls),
+          path("", views.home_view),
+          path('admin/', admin.site.urls),
         ]
 
         if settings.DEBUG:
-            from django.conf.urls.static import static
-            urlpatterns += static(settings.STATIC_URL,
-                                  document_root=settings.STATIC_ROOT)
-            urlpatterns += static(settings.TE_URL,
-                                  document_root=settings.STATIC_ROOT)
+          from django.conf.urls.static import static
+          urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+          urlpatterns += static(settings.TE_URL, document_root=settings.STATIC_ROOT)
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
   </div>
diff --git a/site/content/docs/standard/integrations/express/index.html b/site/content/docs/standard/integrations/express/index.html
index 192359e31..ee0b6199b 100644
--- a/site/content/docs/standard/integrations/express/index.html
+++ b/site/content/docs/standard/integrations/express/index.html
@@ -165,19 +165,19 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
           /** @type {import('tailwindcss').Config} */
           module.exports = {
-          content: [
-            "./public/**/*.{html,js,css}",
-            "./src/**/*.{html,js,css}",
-            "./node_modules/tw-elements/dist/js/**/*.js",
-          ],
-          darkMode: "class",
-          plugins: [require("tw-elements/dist/plugin.cjs")]
+            content: [
+              "./public/**/*.{html,js,css}",
+              "./src/**/*.{html,js,css}",
+              "./node_modules/tw-elements/dist/js/**/*.js",
+            ],
+            darkMode: "class",
+            plugins: [require("tw-elements/dist/plugin.cjs")]
           }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
diff --git a/site/content/docs/standard/integrations/laravel/index.html b/site/content/docs/standard/integrations/laravel/index.html
index 4e6b425ad..e3004a8dc 100644
--- a/site/content/docs/standard/integrations/laravel/index.html
+++ b/site/content/docs/standard/integrations/laravel/index.html
@@ -115,8 +115,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
           /** @type {import('tailwindcss').Config} */
@@ -126,12 +126,12 @@ <h2 class="text-lg font-bold">Step 2</h2>
             "./resources/**/*.js",
             "./resources/**/*.vue",
             "./node_modules/tw-elements/dist/js/**/*.js"
-          ],
-          theme: {
+            ],
+            theme: {
               extend: {},
-          },
-          darkMode: "class",
-          plugins: [require("tw-elements/dist/plugin.cjs")]
+            },
+            darkMode: "class",
+            plugins: [require("tw-elements/dist/plugin.cjs")]
           }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
diff --git a/site/content/docs/standard/integrations/next/index.html b/site/content/docs/standard/integrations/next/index.html
index 7be92477d..f45c21c7e 100644
--- a/site/content/docs/standard/integrations/next/index.html
+++ b/site/content/docs/standard/integrations/next/index.html
@@ -168,13 +168,13 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
         module.exports = {
-        content: [
+          content: [
             "./app/**/*.{js,ts,jsx,tsx}",
             "./pages/**/*.{js,ts,jsx,tsx}",
             "./components/**/*.{js,ts,jsx,tsx}",
@@ -183,12 +183,12 @@ <h2 class="text-lg font-bold">Step 2</h2>
             // Or if using `src` directory:
             "./src/**/*.{js,ts,jsx,tsx}",
             "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
+          ],
+          theme: {
             extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
diff --git a/site/content/docs/standard/integrations/nuxt/index.html b/site/content/docs/standard/integrations/nuxt/index.html
index aa970b60e..25a5c3b29 100644
--- a/site/content/docs/standard/integrations/nuxt/index.html
+++ b/site/content/docs/standard/integrations/nuxt/index.html
@@ -141,8 +141,8 @@ <h2 class="text-lg font-bold">Step 3</h2>
     <code>tailwind.config.js</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.js" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
@@ -155,12 +155,12 @@ <h2 class="text-lg font-bold">Step 3</h2>
             "./nuxt.config.{js,ts}",
             "./app.vue",
             "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
+          ],
+          theme: {
             extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
diff --git a/site/content/docs/standard/integrations/react/index.html b/site/content/docs/standard/integrations/react/index.html
index 2fda23f0c..5b49344c5 100644
--- a/site/content/docs/standard/integrations/react/index.html
+++ b/site/content/docs/standard/integrations/react/index.html
@@ -482,22 +482,22 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.js</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "tailwind.config.js" "" "mobile">}}
+    {{< twsnippet/wrapper "tailwind.config.js" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
         module.exports = {
-        content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx}",
-        "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
-        extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          content: [
+            "./index.html",
+            "./src/**/*.{js,ts,jsx,tsx}",
+            "./node_modules/tw-elements/dist/js/**/*.js"
+          ],
+          theme: {
+            extend: {},
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
           {{< /twsnippet/wrapper >}}
@@ -554,34 +554,37 @@ <h2 class="text-lg font-bold">Step 6</h2>
     <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.jsx" "" "mobile">}}
-      {{< twsnippet/code active=true lang="jsx" >}}
-        import React, { useEffect } from "react";
-        import { Datepicker, Input, initTE } from "tw-elements";
+    {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="jsx" >}}
+    import React, { useEffect } from "react";
+    import { Datepicker, Input, initTE } from "tw-elements";
 
-        const App = () => {
-        useEffect(() => {
+    const App = () => {
+      useEffect(() => {
         initTE({ Datepicker, Input });
-        }, []);
-
-        return (
-    <div
-      className="relative mb-3"
-      data-te-datepicker-init
-      data-te-input-wrapper-init>
-      <input
-        type="text"
-        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
-        placeholder="Select a date" />
-      <label
-        htmlFor="floatingInput"
-        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
-        >Select a date</label
-      >
-    </div>
-    ); }; export default App;
+      }, []);
+
+      return (
+        <div
+          className="relative mb-3"
+          data-te-datepicker-init
+          data-te-input-wrapper-init>
+          <input
+            type="text"
+            className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+            placeholder="Select a date" />
+          <label
+            htmlFor="floatingInput"
+            className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+            >Select a date</label
+          >
+        </div>
+      ); 
+    }; 
+    
+    export default App;
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
@@ -611,41 +614,44 @@ <h2 class="text-lg font-bold">Step 1</h2>
     lifecycle hook.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.jsx" "" "mobile">}}
+    {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
     {{< twsnippet/code active=true lang="jsx" >}}
-        import { useEffect } from "react";
-        import { Datepicker, Input } from "tw-elements";
+    import { useEffect } from "react";
+    import { Datepicker, Input } from "tw-elements";
 
-        const App = () => {
-        useEffect(() => {
+    const App = () => {
+      useEffect(() => {
         const myInput = new Input(document.getElementById("myDatepicker"));
         const options = {
-        format: "dd-mm-yyyy",
+          format: "dd-mm-yyyy",
         };
         const myDatepicker = new te.Datepicker(
-        document.getElementById("myDatepicker"),
-        options
+          document.getElementById("myDatepicker"),
+          options
         );
-        }, []);
-
-        return (
-    <div
-      className="relative mb-3"
-      data-te-datepicker-init
-      data-te-input-wrapper-init>
-      <input
-        type="text"
-        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
-        placeholder="Select a date" />
-      <label
-        for="floatingInput"
-        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
-        >Select a date</label
-      >
-    </div>
-    ); }; export default App;
+      }, []);
+
+      return (
+        <div
+          className="relative mb-3"
+          data-te-datepicker-init
+          data-te-input-wrapper-init>
+          <input
+            type="text"
+            className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+            placeholder="Select a date" />
+          <label
+            for="floatingInput"
+            className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+            >Select a date</label
+          >
+        </div>
+      ); 
+    }; 
+    
+    export default App;
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
diff --git a/site/content/docs/standard/integrations/remix/index.html b/site/content/docs/standard/integrations/remix/index.html
index 5eafa9ccd..b282f8733 100644
--- a/site/content/docs/standard/integrations/remix/index.html
+++ b/site/content/docs/standard/integrations/remix/index.html
@@ -134,21 +134,21 @@ <h2 class="text-lg font-bold">Step 3</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
         module.exports = {
-        content: [
+          content: [
             "./app/**/*.{js,jsx,ts,tsx}"
             "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
+          ],
+          theme: {
             extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -214,34 +214,37 @@ <h2 class="text-lg font-bold">Step 6</h2>
     Initialize <code>initTE</code> in a lifecycle method.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="jsx" >}}
-        import { useEffect } from "react";
-        import { Datepicker, Input, initTE } from "tw-elements";
+    {{< twsnippet/code active=true lang="jsx" >}}
+    import { useEffect } from "react";
+    import { Datepicker, Input, initTE } from "tw-elements";
         
-        const MyDatepicker = () => {
-          useEffect(() => {
-            initTE({ Datepicker, Input });
-          }, []);
+    const MyDatepicker = () => {
+      useEffect(() => {
+        initTE({ Datepicker, Input });
+      }, []);
         
-          return (
-    <div
-      class="relative mb-3"
-      data-te-datepicker-init
-      data-te-input-wrapper-init>
-      <input
-        type="text"
-        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
-        placeholder="Select a date" />
-      <label
-        htmlFor="floatingInput"
-        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary">
-        Select a date
-      </label>
-    </div>
-    ); }; export default MyDatepicker;
+      return (
+        <div
+          class="relative mb-3"
+          data-te-datepicker-init
+          data-te-input-wrapper-init>
+          <input
+            type="text"
+            className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+            placeholder="Select a date" />
+          <label
+            htmlFor="floatingInput"
+            className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary">
+            Select a date
+          </label>
+        </div>
+      ); 
+    }; 
+    
+    export default MyDatepicker;
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
@@ -264,19 +267,20 @@ <h2 class="text-lg font-bold">Step 8</h2>
     wrapping it into <code>ClientOnly</code> element.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="jsx" >}}
-      import { ClientOnly } from "remix-utils";
-      import MyDatepicker from "./components/MyDatepicker.client";
-
-      ...
-      export default function App() {
-        return (
-          ...
-    <ClientOnly fallback="{null}">{() => <MyDatepicker />}</ClientOnly>
-    ); }
+    {{< twsnippet/code active=true lang="jsx" >}}
+    import { ClientOnly } from "remix-utils";
+    import MyDatepicker from "./components/MyDatepicker.client";
+
+    ...
+    export default function App() {
+      return (
+        ...
+        <ClientOnly fallback="{null}">{() => <MyDatepicker />}</ClientOnly>
+      ); 
+    }
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
@@ -306,8 +310,8 @@ <h2 class="text-lg font-bold">Step 1</h2>
     lifecycle hook.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
     {{< twsnippet/code active=true lang="jsx" >}}
     import { useEffect } from "react";
@@ -326,18 +330,21 @@ <h2 class="text-lg font-bold">Step 1</h2>
       }, []);
     
       return (
-    <div className="relative mb-3" id="myDatepicker">
-      <input
-        type="text"
-        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
-        placeholder="Select a date" />
-      <label
-        htmlFor="floatingInput"
-        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary">
-        Select a date
-      </label>
-    </div>
-    ); }; export default MyDatepicker;
+        <div className="relative mb-3" id="myDatepicker">
+          <input
+            type="text"
+            className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+            placeholder="Select a date" />
+          <label
+            htmlFor="floatingInput"
+            className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary">
+            Select a date
+          </label>
+        </div>
+      ); 
+    }; 
+    
+    export default MyDatepicker;
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
diff --git a/site/content/docs/standard/integrations/solid/index.html b/site/content/docs/standard/integrations/solid/index.html
index 1a66353c5..28e11b372 100644
--- a/site/content/docs/standard/integrations/solid/index.html
+++ b/site/content/docs/standard/integrations/solid/index.html
@@ -123,21 +123,21 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
         module.exports = {
-        content: [
+          content: [
             "./src/**/*.{js,jsx,ts,tsx}",
             "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
+          ],
+          theme: {
             extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
diff --git a/site/content/docs/standard/integrations/svelte/index.html b/site/content/docs/standard/integrations/svelte/index.html
index c4505d27a..0ab63fc59 100644
--- a/site/content/docs/standard/integrations/svelte/index.html
+++ b/site/content/docs/standard/integrations/svelte/index.html
@@ -128,21 +128,21 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
         module.exports = {
-        content: [
+          content: [
             "./src/**/*.{html,js,svelte,ts}",
             "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
+          ],
+          theme: {
             extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
diff --git a/site/content/docs/standard/integrations/vue/index.html b/site/content/docs/standard/integrations/vue/index.html
index dbc01da91..0fbe2a318 100644
--- a/site/content/docs/standard/integrations/vue/index.html
+++ b/site/content/docs/standard/integrations/vue/index.html
@@ -142,22 +142,22 @@ <h2 class="text-lg font-bold">Step 2</h2>
     <code>tailwind.config.cjs</code> file.
   </p>
 
+  <!--prettier-ignore-->
   <div class="pb-4">
-    <!--prettier-ignore-->
     {{< twsnippet/wrapper "tailwind.config.cjs" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
         /** @type {import('tailwindcss').Config} */
         module.exports = {
-        content: [
+          content: [
             "./index.html",
             "./src/**/*.{vue,js,ts,jsx,tsx}",
             "./node_modules/tw-elements/dist/js/**/*.js"
-        ],
-        theme: {
+          ],
+          theme: {
             extend: {},
-        },
-        darkMode: "class",
-        plugins: [require("tw-elements/dist/plugin.cjs")]
+          },
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}