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 settings.py file:

TEMPLATES = [
    {
        ...
        '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 settings.py file:

INSTALLED_APPS = [
    ...
    'compressor',
]

Configure the compressor inside the settings.py file:

COMPRESS_ROOT = BASE_DIR / 'static'
 
COMPRESS_ENABLED = True
 
STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)

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

static
└── src
    └── input.css

Create a new views.py file inside mysite/ next to urls.py 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 urls.py file:

from .views import index
 
urlpatterns = [
    path('admin/', admin.site.urls),
    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">
 
<head>
    <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 %}
 
</head>
 
  <body class="flex items-center justify-center h-screen">
    {% block content %} {% endblock content %}
  </body>
 
</html>

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!
    </h1>
{% 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: [
    './templates/**/*.html'
  ],
  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 manage.py 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="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>

Example

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>