Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 10, 2021 12:53 pm GMT

Flask TailwindCSS FlaskAssets

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

Installing TailwindCSS

Next, we're going to install TailwindCSS:

npm install tailwindcss postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss

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

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

// postcss.config.jsconst 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) || []    })  ],});

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

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

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 dont 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.pyfrom flask import Flaskfrom flask_assets import Bundle, Environmentapp = 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()

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

then try installing PostCSS globally:

npm install --global postcss postcss-cli

Using TailwindCSS within HTML

Since everything has been done properly, now its time to use Tailwind inside our template files. Lets 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>

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

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

In this code, main_css is the name of the CSS bundle that has been registered using flask-assets. Thats 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>

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


Original Link: https://dev.to/ffpaiki/flask-tailwindcss-flask-assets-51mo

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To