Skip to content

Latest commit



147 lines (107 loc) · 4.39 KB


File metadata and controls

147 lines (107 loc) · 4.39 KB
title description navigation github prev next
Phoenix - Installation Guide
Learn how to use Material Tailwind components with Phoenix and Tailwind CSS to easily create elegant and flexible pages.

Material Tailwind with Phoenix

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

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

mix my_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. Check Tailwind CSS Installation for Phoenix on Tailwind CSS Documentation.

## Using NPM

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

npm i @material-tailwind/html

## Using Yarn

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

## TailwindCSS Configurations

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 plugin = require("tailwindcss/plugin")
const fs = require("fs")
const path = require("path")

const withMT = require("@material-tailwind/html/utils/withMT")

module.exports = withMT({
  content: [
  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

<!-- from cdn -->
<script async defer src=""></script>

## Example

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

<CodePreview id="example" component={ <button type="button" data-ripple-light="true" className="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"

}> ```html Button ```