Material Tailwind with Laravel

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

First you need to create a new project using Laravel, for more details check the Laravel Official Documentation

composer create-project laravel/laravel example-app

Then you need to install Tailwind CSS since @material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project.

npm install -D tailwindcss postcss autoprefixer

Then you need to create the Tailwind CSS configuration file by running the following command:

npx tailwindcss init -p

Once the configuration is created you need to add the following code to the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
      extend: {},
  },
  plugins: [],
};

After setting up Tailwind CSS you need to install @material-tailwind/html as a dependency to your project.

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.

import withMT from "@material-tailwind/html/utils/withMT";
 
/** @type {import('tailwindcss').Config} */
export default withMT({
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    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

<!-- 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>