Material Tailwind with Django

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

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

django-admin startproject mysite

Create a new templates directory inside the project folder and update file:

        'DIRS': [BASE_DIR / 'templates'],

Install the django-compressor by running the following command in your terminal:

python -m pip install django-compressor

And add the compressor to the installed apps inside the file:


Configure the compressor inside the file:

STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)

Create two new folders and an input.css file inside the static/src/ folder:

└── src
    └── input.css

Create a new file inside mysite/ next to and add the following code:

from django.shortcuts import render
def index(request):
    return render(request, 'index.html')

Import the newly created view instance inside the file:

from .views import index
urlpatterns = [
    path('', index, name='index')

Create a new _base.html file inside the templates directory and the following code:

{% load compress %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Tailwind with Django</title>
    {% compress css %}
    <link rel="stylesheet" href="{% static 'src/output.css' %}">
    {% endcompress %}
  <body class="flex items-center justify-center h-screen">
    {% block content %} {% endblock content %}

Create an index.html file inside the templates folder that will serve as the homepage. At the moment ignore the Tailwind CSS classes as we will install it shortly.

{% extends "_base.html" %}
{% block content %}
    <h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-transparent bg-gradient-to-tr from-blue-600 to-blue-400 bg-clip-text">
      Material Tailwind with Django!
{% endblock content %}

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

npm install -D tailwindcss
npx tailwindcss init

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.

import withMT from "@material-tailwind/html/utils/withMT";
/** @type {import('tailwindcss').Config} */
module.exports = withMT({
  content: [
  theme: {
    extend: {},
  plugins: [],

Import the Tailwind CSS directives inside the input.css file:

/* static/src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Run the following command to watch for changes and compile the Tailwind CSS code:

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch

Finally, create a local server by running the following command:

python runserver

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 defer async src=""></script>


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

  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"