Material Tailwind with Next.js

Learn how to setup and install @material-tailwind/html with Next.js.

First you need to create a new project using next.js, for more details check the Next.js Official Documentation

npx create-next-app@latest

@material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project, Next.js provides Tailwind CSS support out of the box, so you don't need to install it manually.

If you want to install Tailwind CSS manually check the Tailwind CSS Installation for Next.js on Tailwind CSS Documentation

Install @material-tailwind/html as a dependency using NPM by running the following command:

npm i @material-tailwind/html

Install @material-tailwind/html as a dependency using Yarn by running the following command:

yarn add @material-tailwind/html

Using PNPM

Install @material-tailwind/html as a dependency using PNPM by running the following command:

pnpm i @material-tailwind/html

Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/html/utils.

const withMT = require("@material-tailwind/html/utils/withMT");
 
module.exports = withMT({
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  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

Add the following script tag to the /src/app/layout.js file in your project.

<!-- from node_modules -->
<script async src="node_modules/@material-tailwind/html/scripts/ripple.js"></script>
 
<!-- from cdn -->
<script async src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>

Now you're good to go and use @material-tailwind/html in your project.

<button
  type="button"
  data-ripple-light="true"
  class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
>
  Button
</button>