DEV Community

loading...
Cover image for Flask + TailwindCSS + Flask Assets

Flask + TailwindCSS + Flask Assets

Fridolin Febrianto Paiki
I am a Fullstack Developer with more than 10 years of experience using different technologies in multiple industries.
・3 min read

Continuing from the previous article "Getting Started with Flask", creating a website always requires assets, such as CSS and javascript files. To manage those files within a Flask application is easy… you just need to use Flask-Assets package. Wanna know how to do it? Let's roll.
As always, this article is made based on assumption that you create your project using PyCharm.

Installation

Installing Flask-Assets

First, you need to install Flask-Assets in your virtual environment with the syntax below. That's it!

pip install Flask-Assets
Enter fullscreen mode Exit fullscreen mode

Installing TailwindCSS

Next, we're going to install TailwindCSS:

npm install tailwindcss postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
Enter fullscreen mode Exit fullscreen mode

In order to set up Tailwind within our project, we need to create a file tailwind.config.js by running this inside terminal.

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

Next, you need to add postcss.config.js and insert this code below:

// postcss.config.js

const path = require('path');

module.exports = (ctx) => ({
  plugins: [
    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
    require('autoprefixer'),
    process.env.FLASK_PROD === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        path.resolve(__dirname, 'templates/**/*.html')
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  ],
});
Enter fullscreen mode Exit fullscreen mode

Then, add the following code into static/src/main.css:

/* static/src/main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Here, we defined all base, components, and utilities classes from Tailwind CSS. PostCSS will build all the classes into the target location, static/dist/main.css. You don’t need to create the file static/dist/main.css since this file will be automatically generated when you run the application.

The next thing to do is to import flask-assets into app.py and use Bundle and Environment constructor to bundle and register all css/js files. You can see the implementation below.

# app.py

from flask import Flask
from flask_assets import Bundle, Environment

app = Flask(__name__)

# Bundling src/main.css files into dist/main.css'
css = Bundle('src/main.css', output='dist/main.css', filters='postcss')

assets = Environment(app)
assets.register('main_css', css)
css.build()
Enter fullscreen mode Exit fullscreen mode

Finally, you can run the app to see whether static/dist/main.css is generated properly. If not and if you get an error like this:

Program file not found: postcss
Enter fullscreen mode Exit fullscreen mode

then try installing PostCSS globally:

npm install --global postcss postcss-cli
Enter fullscreen mode Exit fullscreen mode

Using TailwindCSS within HTML

Since everything has been done properly, now it’s time to use Tailwind inside our template files. Let’s create a new template file called base.html and inside that file we put:

<!-- templates/base.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">

    {% assets 'main_css' %}
      <link rel="stylesheet" href="{{ ASSET_URL }}">
    {% endassets %}

    <title>Flask + TailwindCSS + Flask-Assets</title>
  </head>
  <body class="bg-blue-100">
    {% block content %}
    {% endblock content %}
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

There are several new codes that is different from before which is:

{% assets 'main_css' %}
  <link rel="stylesheet" href="{{ ASSET_URL }}">
{% endassets %}
Enter fullscreen mode Exit fullscreen mode

In this code, main_css is the name of the CSS bundle that has been registered using flask-assets. That’s all that we need to pay attention to. The rest of the syntax can be left as default.

After that, all CSS classes own by Tailwind can be used inside the HTML file like this one:

<body class="bg-green-100">
    <div>About Page</div>
</body>
Enter fullscreen mode Exit fullscreen mode

What About Any JS Files?

The same principles can used for JS… you just need to bundle them up, register it as assets, and then call it inside the HTML page.

Have fun trying…

Discussion (0)