Material Tailwind with Flask

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

First you need to create a new project using Flask, for more details check the Flask Official Documentation. Then, in the root of your project folder create a new file called app.py with the following content:

from flask import Flask, render_template
 
app = Flask(__name__)
 
@app.route("/")
@app.route("/index")
def index():
	return render_template("index.html")
 
if __name__ == '__main__':
	app.run(debug=True)

Then create two folders naming templates and static and inside the templates folder create an index.html file with a basic structure such as:

<!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 Flask</title>
  </head>
  <body>
    <h1>Hello, Flask!</h1>
  </body>
</html>

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
npx tailwindcss init

Create a new static/src/ folder and add a new input.css file and add the @tailwind directives for each of Tailwind’s layers:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure the template files inside the tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/src/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

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

This will generate a new output.css file inside the /static/dist/css/ folder that we now need to include in our index.html.

<!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 Flask</title>
    <link
      rel="stylesheet"
      href="{{url_for('static',filename='dist/css/output.css')}}"
    />
  </head>
  <body>
    <h1>Hello, Flask!</h1>
  </body>
</html>

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.

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

Activate the environment and start the local server by running:

. venv/bin/activate && python app.py

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