+ 
-
+
@@ -22,7 +22,7 @@
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ .open class on the .collapse `.open class on the .collapse `.op
## Custom Accordion Icon
-You can use custom icons for the accordion trigger element and using the group-open attribute selector in tailwind css you can control the icon for open and close states of accordion.
+You can use custom icons for the accordion trigger element and using the group-open attribute selector in tailwind css you can control the icon for open and close states of accordion.
i tag.
+You can add an icon at the beginning of alert component using the i tag.
data-dismissible-target="{`alertName`}" data attribute to the element that you want to close the alert with.
+You can make an alert dismissible by adding the data-dismissible="alertName" data attribute to the alert element and the data-dismissible-target="{`alertName`}" data attribute to the element that you want to close the alert with.
w-full class.
w-full class.
rounded-full class with Button to create rounded buttons.
Button component with {``} tag to make it a link.
+You can wrap Button component with {``} tag to make it a link.
{``} t
## Button Ripple Effect
-You can turn on/off the ripple effect for the button component by changing data-ripple-light or data-ripple-dark data attributes to true/false.
+You can turn on/off the ripple effect for the button component by changing data-ripple-light or data-ripple-dark data attributes to true/false.
Button to create beautiful buttons for different purposes, below you can use some button examples used for authentication with social media and web 3.0.
data-dismissible-target="{`chipName`}" data attribute to the element that you want to close the chip with.
+You can make a chip dismissible by adding the data-dismissible="{`chipName`}" data attribute to the chip element and the data-dismissible-target="{`chipName`}" data attribute to the element that you want to close the chip with.
tailwind.config.js file.
+You just need to modify the colors object for the tailwind.config.js file.
```js
module.exports = withMT({
@@ -338,7 +338,7 @@ module.exports = withMT({
You can add new color to @material-tailwind/html color palette very easy and straightforward, it's the same as adding new color for tailwindcss.
-You just need to add your own color to the extend and colors object for tailwind.config.js file.
+You just need to add your own color to the extend and colors object for tailwind.config.js file.
```js {5-16}
module.exports = withMT({
diff --git a/documentation/html/dialog.mdx b/documentation/html/dialog.mdx
index d66b3f0bd..5b0ab9268 100644
--- a/documentation/html/dialog.mdx
+++ b/documentation/html/dialog.mdx
@@ -27,9 +27,9 @@ A dialog is a type of modal window with critical information which disable all a
See below our dialog example that you can use for your Tailwind CSS project.
-You can initialize a new dialog by adding the data-dialog-target="`{dialog}`" data attribute to the trigger element, the data-dialog-backdrop="`{dialogName}`" to the backdrop element and the data-dialog="`{dialogName}`" to the dialog element itself and make sure that the values for those data attributes are the same.
+You can initialize a new dialog by adding the data-dialog-target="`{dialog}`" data attribute to the trigger element, the data-dialog-backdrop="`{dialogName}`" to the backdrop element and the data-dialog="`{dialogName}`" to the dialog element itself and make sure that the values for those data attributes are the same.
-You can also use the data-dialog-close="true" for the element that you want to close the dialog with when clicking.
+You can also use the data-dialog-close="true" for the element that you want to close the dialog with when clicking.
data-dialog-mount="`{opacity-100}`", data-dialog-unmount="`{opacity-0}`" and data-dialog-transition="`{transition-opacity}`" data attributes to the dialog element. You can pass tailwind css classnames for those data attributes for animating the dialog. data-dialog-mount="`{opacity-100}`", data-dialog-unmount="`{opacity-0}`" and data-dialog-transition="`{transition-opacity}`" data attributes to the dialog element. You can pass tailwind css classnames for those data attributes for animating the dialog. opacity-1translate-y-0 |
-| `data-popover-unmount` | Set the classnaes that should be used when the opacity-0-translate-y-14pointer-events-none |
-| `data-popover-transition` | Set the classnaes that should be used for transition-allduration-300 |
+| `data-popover-mount` | Set the classnaes that should be used when the opacity-1translate-y-0 |
+| `data-popover-unmount` | Set the classnaes that should be used when the opacity-0-translate-y-14pointer-events-none |
+| `data-popover-transition` | Set the classnaes that should be used for transition-allduration-300 |
---
diff --git a/documentation/html/fonts.mdx b/documentation/html/fonts.mdx
index 0191987fc..7ab236681 100644
--- a/documentation/html/fonts.mdx
+++ b/documentation/html/fonts.mdx
@@ -45,7 +45,7 @@ const fontFamily = {
You can customize the default font families for @material-tailwind/html very easy and straightforward, it's the same as customizing font families for tailwindcss.
-You just need to customize the font family that you like through the fontFamily object for tailwind.config.js file.
+You just need to customize the font family that you like through the fontFamily object for tailwind.config.js file.
```js {4}
module.exports = withMT({
diff --git a/documentation/html/gallery.mdx b/documentation/html/gallery.mdx
new file mode 100644
index 000000000..7dbdff023
--- /dev/null
+++ b/documentation/html/gallery.mdx
@@ -0,0 +1,404 @@
+---
+title: Tailwind CSS Gallery for HTML - Material Tailwind
+description: Customise your web projects with our easy-to-use gallery component for Tailwind CSS and HTML using Material Design guidelines.
+navigation:
+ [
+ "gallery",
+ "masonry-grid-gallery",
+ "featured-image-gallery",
+ "quad-gallery",
+ "gallery-with-tab"
+ ]
+github: skeleton
+prev: form
+next: icon-button
+---
+
+Gallery example that you can use in your Tailwind CSS and HTML project.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ withMT() function coming from @material-tailwind/html/utils.
+
+```js {1, 4, 12}
+import withMT from "@material-tailwind/html/utils/withMT";
+
+/** @type {import('tailwindcss').Config} */
+module.exports = withMT({
+ content: [
+ "./src/**/*.{html,ts}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+"scripts": ["./node_modules/@material-tailwind/html/scripts/ripple.js"]
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {1, 4,6, 12}
+import withMT from "@material-tailwind/html/utils/withMT";
+
+/** @type {import('tailwindcss').Config} */
+module.exports = withMT({
+ content: [
+ './templates/**/*.html'
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {3, 5, 14}
+/** @type {import('tailwindcss').Config} */
+
+import withMT from "@material-tailwind/html/utils/withMT";
+
+module.exports = withMT({
+ content: [
+ "./templates/**/*.html",
+ "./static/src/**/*.js"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {3, 5, 14}
+/** @type {import('tailwindcss').Config} */
+
+import withMT from "@material-tailwind/html/utils/withMT";
+
+module.exports = withMT({
+ content: [
+ "./src/pages/**/*.{js,jsx,ts,tsx}",
+ "./src/components/**/*.{js,jsx,ts,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {3, 5, 14}
+/** @type {import('tailwindcss').Config} */
+
+import withMT from "@material-tailwind/html/utils/withMT";
+
+module.exports = withMT({
+ content: [
+ "./imports/ui/**/*.{js,jsx,ts,tsx}",
+ "./client/*.html",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {5, 7, 15}
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+const withMT = require("@material-tailwind/html/utils/withMT")
+
+module.exports = withMT({
+ content: [
+ './js/**/*.js',
+ '../lib/*_web.ex',
+ '../lib/*_web/**/*.*ex',
+ ],
+ theme: {},
+ plugins: []
+});
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {3, 5, 13}
+/** @type {import('tailwindcss').Config} */
+
+import withMT from "@material-tailwind/html/utils/withMT";
+
+module.exports = withMT({
+ content: [
+ "./src/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {3, 5, 11}
+import type { Config } from "tailwindcss";
+
+import withMT from "@material-tailwind/html/utils/withMT";
+
+export default withMT({
+ content: ["./app/**/*.{js,jsx,ts,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+} satisfies Config);
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {3, 5, 13}
+/** @type {import('tailwindcss').Config} */
+
+import withMT from "@material-tailwind/html/utils/withMT";
+
+export default withMT({
+ content: [
+ "./src/**/*.{js,jsx,ts,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+withMT() function coming from @material-tailwind/html/utils.
+
+```js {3, 5, 14}
+/** @type {import('tailwindcss').Config} */
+
+import withMT from "@material-tailwind/html/utils/withMT";
+
+module.exports = withMT({
+ content: [
+ "./assets/**/*.js",
+ "./templates/**/*.html.twig",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+---
+
+## Ripple Effect
+
+
+
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+
+The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
+
+
+```html
+
+
+
+
+
+```
+
+---
+
+data-ripple-light or data-ripple-dark data attributes to true/false.
+You can turn on/off the ripple effect for the icon button component by changing data-ripple-light or data-ripple-dark data attributes to true/false.
withMT() function coming from @material-tailwind/html/utils.
+Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/html/utils.
```js {1, 3, 9}
const withMT = require("@material-tailwind/html/utils/withMT");
@@ -97,7 +97,7 @@ module.exports = withMT({
-@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
+@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true" for light ripple effect and data-ripple-dark="true" for dark ripple effect as an attribute for components
The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
@@ -162,19 +162,146 @@ Now you're good to go and use @material-tailwind/html in your project.
id="example"
component={
}
>
- ```html
+```html
- ```
+```
+
+---
+
+Mega Menu, that can take the user anywhere on your web app!
+
+
+See below our Mega Menu example that you can use in your Tailwind CSS and HTML project.
+
+data-popover-target="`{menuName}`" and data-popover="`{menuName}`" data attributes.
+To create a menu you can use the data-popover-target="`{menuName}`" and data-popover="`{menuName}`" data attributes.
data-popover-nested="true" data attribure to the menu trigger element.
+You can created nested/multi-level menus by setting the data-popover-nested="true" data attribure to the menu trigger element.
+ npm i @material-tailwind/html +
+ +tiptap library, make sure to install it before using the example.
+
+```bash
+npm install --save @tiptap/core
+```
+
+data-popover-target="`{popoverName}`" data attribute to the trigger element and the data-popover="`{popoverName}`" to the element that you want to use as the popover.
+You can initialize a new popover by adding the data-popover-target="`{popoverName}`" data attribute to the trigger element and the data-popover="`{popoverName}`" to the element that you want to use as the popover.
data-popover-target="`
## Popover Placement
-You can change the position of the popover relative to it's trigger element by adding the data-popover-placement="`{top}`" data attribute to the popover element by default it set's to top.
Check the placement values for popover here.
+You can change the position of the popover relative to it's trigger element by adding the data-popover-placement="`{top}`" data attribute to the popover element by default it set's to top.
Check the placement values for popover here.
- {`This is a very beautiful popover, show some love.`}
+ This is a very beautiful popover, show some love.
- {`This is a very beautiful popover, show some love.`}
+ This is a very beautiful popover, show some love.
- {`This is a very beautiful popover, show some love.`}
+ This is a very beautiful popover, show some love.
data-popover-mount="`{opacity-100}`", data-popover-unmount="`{opacity-0}`" and data-popover-transition="`{transition-opacity}`" data attributes to the popover element. You can pass tailwind css classnames for those data attributes for animation the popover. data-popover-mount="`{opacity-100}`", data-popover-unmount="`{opacity-0}`" and data-popover-transition="`{transition-opacity}`" data attributes to the popover element. You can pass tailwind css classnames for those data attributes for animation the popover. top |
-| `data-popover-mount` | Set the classnaes that should be used when the opacity-1 |
-| `data-popover-unmount` | Set the classnaes that should be used when the opacity-0pointer-events-none |
-| `data-popover-transition` | Set the classnaes that should be used for transition-opacityduration-300 |
+| `data-popover-placement` | Set the position of the popover relative to it's trigger element. | top |
+| `data-popover-mount` | Set the classnaes that should be used when the opacity-1 |
+| `data-popover-unmount` | Set the classnaes that should be used when the opacity-0pointer-events-none |
+| `data-popover-transition` | Set the classnaes that should be used for transition-opacityduration-300 |
---
diff --git a/documentation/html/screens.mdx b/documentation/html/screens.mdx
index 68b201ea4..9c94cb9d8 100644
--- a/documentation/html/screens.mdx
+++ b/documentation/html/screens.mdx
@@ -40,7 +40,7 @@ const screens = {
You can customize the default breakpoints for @material-tailwind/html very easy and straightforward, it's the same as customizing breakpoints for tailwindcss.
-You just need to customize the breakpoint that you like through the screens object for tailwind.config.js file.
+You just need to customize the breakpoint that you like through the screens object for tailwind.config.js file.
```js {4}
module.exports = withMT({
@@ -61,7 +61,7 @@ module.exports = withMT({
You can add new breakpoint for @material-tailwind/html very easy and straightforward, it's the same as adding new breakpoint for tailwindcss.
-You just need to add your own breakpoint to the extend and screens object for tailwind.config.js file.
+You just need to add your own breakpoint to the extend and screens object for tailwind.config.js file.
```js {5}
module.exports = withMT({
diff --git a/documentation/html/shadows.mdx b/documentation/html/shadows.mdx
index 8159c7a6b..59afb7d7f 100644
--- a/documentation/html/shadows.mdx
+++ b/documentation/html/shadows.mdx
@@ -42,7 +42,7 @@ const boxShadow = {
You can customize the default box shadow values for @material-tailwind/html very easy and straightforward, it's the same as customizing box shadow values for tailwindcss.
-You just need to customize the box shadow value that you like through the boxShadow object for tailwind.config.js file.
+You just need to customize the box shadow value that you like through the boxShadow object for tailwind.config.js file.
```js {4}
module.exports = withMT({
@@ -63,7 +63,7 @@ module.exports = withMT({
You can add new box shadow value for @material-tailwind/html very easy and straightforward, it's the same as adding new box shadow value for tailwindcss.
-You just need to add your own box shadow value to the extend and boxShadow object for tailwind.config.js file.
+You just need to add your own box shadow value to the extend and boxShadow object for tailwind.config.js file.
```js {5}
module.exports = withMT({
diff --git a/documentation/html/skeleton.mdx b/documentation/html/skeleton.mdx
new file mode 100644
index 000000000..e72eee942
--- /dev/null
+++ b/documentation/html/skeleton.mdx
@@ -0,0 +1,180 @@
+---
+title: Tailwind CSS Skeleton for HTML - Material Tailwind
+description: Customise your web projects with our easy-to-use skeleton component for Tailwind CSS and HTML using Material Design guidelines.
+navigation:
+ [
+ "skeleton",
+ "image-placeholder-skeleton",
+ "video-placeholder-skeleton",
+ "text-placeholder-skeleton",
+ "card-placeholder-skeleton",
+ "testimonial-placeholder-skeleton"
+ ]
+github: skeleton
+prev: sidebar
+next: speed-dial
+---
+
+Skeleton example that you can use in your Tailwind CSS and HTML project.
+
+data-tab-content data attribute.
+You can reference a specific content for each tab option, using the data-tab-content data attribute.
tailwind.config.js and you can set your own theme and styles through the Tailwind CSS configurations for all of the components.
---
@@ -22,11 +22,11 @@ style.
-Each component has a class attribute that you can use to add tailwindcss classnames or your own custom classnames.
+Each component has a class attribute that you can use to add tailwindcss classnames or your own custom classnames.
-The class attribute overrides the tailwindcss classnames for a component and sometimes you need to use the ! modifier before the tailwindcss classnames to override the classnames for a component.
+The class attribute overrides the tailwindcss classnames for a component and sometimes you need to use the ! modifier before the tailwindcss classnames to override the classnames for a component.
-e.g. !text-blue-500
+e.g. !text-blue-500
```html
data-tooltip-mount="`{opacity-100}`", data-tooltip-unmount="`{opacity-0}`" and data-tooltip-transition="`{transition-opacity}`" data attributes to the tooltip element. You can pass tailwind css classnames for those data attributes for animation the tooltip. data-tooltip-mount="`{opacity-100}`", data-tooltip-unmount="`{opacity-0}`" and data-tooltip-transition="`{transition-opacity}`" data attributes to the tooltip element. You can pass tailwind css classnames for those data attributes for animation the tooltip. top |
-| `data-tooltip-mount` | Set the classnaes that should be used when the opacity-1 |
-| `data-tooltip-unmount` | Set the classnaes that should be used when the opacity-0pointer-events-none |
-| `data-tooltip-transition` | Set the classnaes that should be used for transition-opacityduration-300 |
+| `data-tooltip-placement` | Set the position of the tooltip relative to it's trigger element. | top |
+| `data-tooltip-mount` | Set the classnaes that should be used when the opacity-1 |
+| `data-tooltip-unmount` | Set the classnaes that should be used when the opacity-0pointer-events-none |
+| `data-tooltip-transition` | Set the classnaes that should be used for transition-opacityduration-300 |
---
diff --git a/documentation/react/gallery.mdx b/documentation/react/gallery.mdx
new file mode 100644
index 000000000..ec2898a66
--- /dev/null
+++ b/documentation/react/gallery.mdx
@@ -0,0 +1,549 @@
+---
+title: Tailwind CSS Gallery for React - Material Tailwind
+description: Customise your web projects with our easy-to-use gallery component for Tailwind CSS and React using Material Design guidelines.
+navigation:
+ [
+ "gallery",
+ "masonry-grid-gallery",
+ "featured-image-gallery",
+ "quad-gallery",
+ "gallery-with-carousel",
+ "gallery-with-tab"
+ ]
+github: skeleton
+prev: form
+next: icon-button
+---
+
+Gallery example that you can use in your Tailwind CSS and React project.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ withMT() function coming from @material-tailwind/react/utils.
+
+```js {1, 3, 9}
+const withMT = require("@material-tailwind/react/utils/withMT");
+
+module.exports = withMT({
+ content: [],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
+```
+
+Mega Menu, that can take the user anywhere on your web app!
+
+
+See below our Mega Menu example that you can use in your Tailwind CSS and React project.
+
+hover by changing allowHover props.
+
+Mega Menu component using the placement prop.
+
+lexical and @lexical/react libraries, make sure to install them before using the example.
+
+```bash
+npm install --save lexical @lexical/react
+```
+
+
+ Skeleton example that you can use in your Tailwind CSS and React project.
+
+
-
+
diff --git a/packages/material-tailwind-html/package.json b/packages/material-tailwind-html/package.json
index 077fd5fa0..4f373ae90 100644
--- a/packages/material-tailwind-html/package.json
+++ b/packages/material-tailwind-html/package.json
@@ -1,7 +1,7 @@
{
"name": "@material-tailwind/html",
"homepage": "https://material-tailwind.com",
- "version": "2.1.1",
+ "version": "2.1.2",
"description": "@material-tailwind/html is an easy-to-use components library for Tailwind CSS inspired by Material Design.",
"repository": "https://github.com/creativetimofficial/material-tailwind",
"license": "MIT",
diff --git a/packages/material-tailwind-react/README.md b/packages/material-tailwind-react/README.md
index 2a36f9bb5..22a434641 100644
--- a/packages/material-tailwind-react/README.md
+++ b/packages/material-tailwind-react/README.md
@@ -8,7 +8,7 @@
-
+
diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json
index 440d3715b..692ace8a6 100644
--- a/packages/material-tailwind-react/package.json
+++ b/packages/material-tailwind-react/package.json
@@ -1,7 +1,7 @@
{
"name": "@material-tailwind/react",
"homepage": "https://material-tailwind.com",
- "version": "2.1.7",
+ "version": "2.1.8",
"description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.",
"repository": "https://github.com/creativetimofficial/material-tailwind",
"license": "MIT",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 54b4d6439..8d5ba88a8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -43,7 +43,7 @@ function MyApp({ Component, pageProps }) {