Migrate to Tailwind 3.3.0 version (#1545)

* Migrate to Tailwind 3.3.0 version * Fixed wrong Tailwind version --------- Co-authored-by: Mikolaj Smolenski <[email protected]>
mdbootstrap · Apr 5, 2023 · 4a02b16 · 4a02b16
1 parent 341e160
commit 4a02b16
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -77,6 +77,6 @@
     "deepmerge": "^4.2.2",
     "detect-autofill": "^1.1.3",
     "perfect-scrollbar": "^1.5.5",
-    "tailwindcss": "3.2.4"
+    "tailwindcss": "3.3.0"
   }
 }
diff --git a/site/content/docs/standard/getting-started/quick-start/index.html b/site/content/docs/standard/getting-started/quick-start/index.html
@@ -38,7 +38,7 @@
 
 <div class="w-full">
   <h2
-    class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+    class="mb-5 mt-0 text-3xl font-semibold leading-normal"
     id="formats"
     data-te-spy-item>
     Tailwind Elements formats
@@ -52,7 +52,7 @@
 
   <h3 class="mb-3 font-bold">When to use ES or UMD format?</h3>
   <p>If your application:</p>
-  <ol class="ml-8 mb-2 list-decimal">
+  <ol class="mb-2 ml-8 list-decimal">
     <li>is based on <code>modules</code></li>
     <li>uses <code>bundler</code> functionality</li>
     <li>needs <code>treeshaking</code></li>
@@ -96,7 +96,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
 <div class="flex flex-row">
   <div class="w-full basis-7/12">
     <h2
-      class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal"
       id="npm"
       data-te-scrollspy-item>
       NPM
@@ -140,7 +140,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">
+<p class="mb-2 mt-6">
   3. Tailwind Elements is a plugin and should be included inside
   <code>tailwind.config.js</code>. It is also recommended to extend the
   <code>content</code> array with a js files pattern that loads dynamic
@@ -160,7 +160,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">
+<p class="mb-2 mt-6">
   4. Dynamic components will work after importing the package inside
   <code>index.js</code>:
 </p>
@@ -184,7 +184,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
 <div class="flex flex-row">
   <div class="w-full basis-7/12">
     <h2
-      class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal"
       id="go"
       data-te-spy-item>
       MDB GO / CLI
@@ -198,7 +198,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   </div>
 </div>
 
-<p class="mt-4 mb-2">
+<p class="mb-2 mt-4">
   1. To start using MDB GO / CLI install it with one command:
 </p>
 <div class="pt-2">
@@ -207,14 +207,14 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-4 mb-2">2. Log into the CLI using your MDB account:</p>
+<p class="mb-2 mt-4">2. Log into the CLI using your MDB account:</p>
 <div class="pt-2">
   {{< twsnippet/wrapper "terminal" "!bg-[#4A24AA] !text-white dark:!bg-violet-300 dark:!text-violet-900" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" >}}
   mdb login
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-4 mb-2">
+<p class="mb-2 mt-4">
   3. Initialize a project and choose <strong>Tailwind Elements</strong> from the
   list:
 </p>
@@ -224,7 +224,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-4 mb-2">
+<p class="mb-2 mt-4">
   4. Install the dependencies (inside the project directory):
 </p>
 <div class="pt-2">
@@ -233,14 +233,14 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-4 mb-2">5. Run the app:</p>
+<p class="mb-2 mt-4">5. Run the app:</p>
 <div class="pt-2">
   {{< twsnippet/wrapper "terminal" "!bg-[#BB2E3E] !text-white dark:!bg-rose-300 dark:!text-rose-900" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" >}}
   npm start
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-4 mb-2">6. Publish when you're ready:</p>
+<p class="mb-2 mt-4">6. Publish when you're ready:</p>
 <div class="pt-2">
   {{< twsnippet/wrapper "terminal" "!bg-[#4A24AA] !text-white dark:!bg-violet-300 dark:!text-violet-900" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" >}}
   mdb publish
@@ -252,7 +252,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
 <div class="flex flex-row">
   <div class="w-full">
     <h2
-      class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal"
       id="vite"
       data-te-scrollspy-item>
       Vite
@@ -330,7 +330,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">
+<p class="mb-2 mt-6">
   4. Add the necessary Tailwind directives to your <code>style.css</code> file
   to be able to use Tailwind classes on your website. Unless you changed it,
   <code>style.css</code> should be in the root directory of your app. You can
@@ -357,7 +357,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">
+<p class="mb-2 mt-6">
   5. Link the css file inside the <code>index.html</code>.
 </p>
 <div class="pt-2">
@@ -370,7 +370,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">
+<p class="mb-2 mt-6">
   6. Tailwind should be connected properly to the vite app. If you type the code
   bellow, you will see the default vite <code>index.html</code> page (without
   any styles if you deleted them from <code>style.css</code>).
@@ -383,7 +383,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">7. Install the <code>tw-elements</code> package.</p>
+<p class="mb-2 mt-6">7. Install the <code>tw-elements</code> package.</p>
 
 <div class="pt-2">
   <!-- prettier-ignore -->
@@ -392,7 +392,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">
+<p class="mb-2 mt-6">
   8. Add js files patterns that loads dynamic component classes to the content
   array inside the <code>tailwind.config.cjs</code>. Extend the default tailwind
   classes by adding the <code>Tailwind Elements</code> plugin.
@@ -414,7 +414,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-6 mb-2">
+<p class="mb-2 mt-6">
   9. Now you can start working on your app. Since the package.json created by
   vite has a type set to <code>module</code>, we are going to use the
   <code>ES</code>. Lets try to import some code and see if everything is working
@@ -439,7 +439,7 @@ <h3 class="mb-3 font-bold">About the <code>initTE</code> method</h3>
     data-te-carousel-init
     data-te-carousel-slide>
     <div
-      class="absolute right-0 bottom-0 left-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+      class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
       data-te-carousel-indicators>
       <button
         type="button"
@@ -509,7 +509,7 @@ <h5 class="text-xl">Third slide label</h5>
       </div>
     </div>
     <button
-      class="absolute top-0 bottom-0 left-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
       type="button"
       data-te-target="#carouselExampleCaptions"
       data-te-slide="prev">
@@ -533,7 +533,7 @@ <h5 class="text-xl">Third slide label</h5>
       >
     </button>
     <button
-      class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
       type="button"
       data-te-target="#carouselExampleCaptions"
       data-te-slide="next">
@@ -571,7 +571,7 @@ <h5 class="text-xl">Third slide label</h5>
 <div class="flex flex-row">
   <div class="basis-7/12">
     <h2
-      class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal"
       id="cdn"
       data-te-spy-item>
       CDN
@@ -582,7 +582,7 @@ <h5 class="text-xl">Third slide label</h5>
       classic HTML template without the need for installing any packages.
     </p>
 
-    <p class="mt-4 mb-2">
+    <p class="mb-2 mt-4">
       Add the stylesheet files below in the <code>head</code> section:
     </p>
   </div>
@@ -600,7 +600,7 @@ <h5 class="text-xl">Third slide label</h5>
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />
-  <script src="https://cdn.tailwindcss.com/3.2.4"></script>
+  <script src="https://cdn.tailwindcss.com/3.3.0"></script>
   <script>
     tailwind.config = {
       darkMode: "class",
@@ -619,7 +619,7 @@ <h5 class="text-xl">Third slide label</h5>
   {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
 </div>
 
-<p class="mt-4 mb-2">
+<p class="mb-2 mt-4">
   Require the js bundled file right before the <code>body</code> closing tag.
   Use the <code>UMD</code> file if used without a bundler.
 </p>
@@ -634,7 +634,7 @@ <h5 class="text-xl">Third slide label</h5>
 <div class="flex flex-row">
   <div class="w-full basis-7/12">
     <h2
-      class="mt-0 mb-5 text-3xl font-semibold leading-normal"
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal"
       id="starter"
       data-te-spy-item>
       Starter
@@ -647,7 +647,7 @@ <h5 class="text-xl">Third slide label</h5>
     <div class="mb-10">
       <a href="https://tailwind-elements.com/te-starter.zip">
         <button
-          class=" mt-3 mb-3 mr-1 rounded border border-solid border-purple-500 bg-transparent px-6 py-3 text-sm font-bold uppercase text-purple-500 outline-none transition-all duration-150 ease-linear hover:bg-purple-500 hover:text-white focus:outline-none active:bg-purple-600"
+          class=" mb-3 mr-1 mt-3 rounded border border-solid border-purple-500 bg-transparent px-6 py-3 text-sm font-bold uppercase text-purple-500 outline-none transition-all duration-150 ease-linear hover:bg-purple-500 hover:text-white focus:outline-none active:bg-purple-600"
           type="button">
           Download ZIP starter
         </button>

diff --git a/src/files/index.html b/src/files/index.html
@@ -17,7 +17,7 @@
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
       rel="stylesheet" />
     <!-- Tailwind -->
-    <script src="https://cdn.tailwindcss.com/3.2.4"></script>
+    <script src="https://cdn.tailwindcss.com/3.3.0"></script>
     <script>
       tailwind.config = {
         darkMode: "class",
@@ -64,7 +64,7 @@
           data-te-ripple-init
           data-te-ripple-color="light"
           target="_blank"
-          class="inline-block rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
+          class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
           Check Tailwind Elements docs
         </a>
       </div>