Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to Tailwind 3.3.0 version #1545

Merged
merged 3 commits into from
Apr 5, 2023
Merged

Migrate to Tailwind 3.3.0 version #1545

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b178b8d
Migrate to Tailwind 3.3.1 version
Trochonovitz Apr 4, 2023
314bc1f
Fixed wrong Tailwind version
Trochonovitz Apr 5, 2023
fbc750c
Merge with v1.0.0-beta2
smolenski-mikolaj Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
58 changes: 29 additions & 29 deletions site/content/docs/standard/getting-started/quick-start/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -300,7 +300,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. Go to the <code>tailwind.config.cjs</code> file and add paths wherer you
html files are going to be stored. You can change the
<code>index.html</code> location but make sure to change to
Expand Down Expand Up @@ -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
Expand All @@ -346,7 +346,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">
Expand All @@ -359,7 +359,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>).
Expand All @@ -372,7 +372,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 -->
Expand All @@ -381,7 +381,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.
Expand All @@ -403,7 +403,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
Expand All @@ -428,7 +428,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"
Expand Down Expand Up @@ -498,7 +498,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">
Expand All @@ -522,7 +522,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">
Expand Down Expand Up @@ -560,7 +560,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
Expand All @@ -571,7 +571,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>
Expand All @@ -589,7 +589,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",
Expand All @@ -608,7 +608,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>
Expand All @@ -623,7 +623,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
Expand All @@ -636,7 +636,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>
Expand Down
6 changes: 3 additions & 3 deletions src/files/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,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",
Expand Down Expand Up @@ -45,13 +45,13 @@
src="https://tecdn.b-cdn.net/img/logo/mdb-transparent-250px.png"
class="mx-auto h-[90px] w-[250px]" />
<h5 class="pt-3 text-3xl">Tailwind Elements</h5>
<p class="pt-2 pb-5 font-semibold">MDB Team</p>
<p class="pb-5 pt-2 font-semibold">MDB Team</p>
<a
href="https://tailwind-elements.com/"
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>
Expand Down