Tailwind CSS Flask - Flowbite

Learn how to install Tailwind CSS and Flowbite inside a Flask project and start building modern web applications with a micro Python web framework

Flask is an open-source micro web framework based on Python that allows you to quickly build websites using only a single Python file without requiring any other particular tools or libraries.

It is being used by hundreds of thousands of developers and even large companies such as Samsung, Netflix, Reddit, Lyft, and even Airbnb since its initial release in 2010.

By following this guide you will learn how to properly set up Tailwind CSS with Flowbite inside a Flask project and get started with building websites faster.

Requirements #

Follow the next steps in this tutorial to learn how to install a Flask project with Tailwind CSS and the Flowbite component library.

Make sure that you have both Node.js and Python installed on your local machine.

After that, you’ll need to install Flask on your computer by following the official installation guide or by running the following command in the terminal if you have pip available in your Python environment:

Terminal

python -m pip install Flask

Now that you have installed all of the required technologies you can now create a new Flask project.

Create a Flask project #

Run the following command in the terminal to create a new Flask project with the name flowbite-flask:

Terminal

mkdir flowbite-flask
cd flowbite-flask/

Create a new file called app.py inside the root of the project folder with the following content:

app.py

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)

What we do here is that we import the Flask micro framework from Python and also set the app route for a new index.html file inside the templates/ folder that we will create in the next step.

Create two new folders called templates/ and static/:

Terminal

flowbite-flask/
   - app.py
   - templates/
   - static/

This is how your project folder structure should look like.

Create a new index.html file inside your templates/ folder and create a basic HTML document structure:

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

Start a local server by running python app.py inside your terminal:

Terminal

python app.py

This should make the project available via the browser by going to http://localhost:5000/.

Install Tailwind CSS #

Now that you have a working Flask project we can proceed by installing Tailwind CSS.

Run the following command the install Tailwind CSS as a dev dependency using NPM:

Terminal

npm install tailwindcss @tailwindcss/cli --save-dev

Create a new static/src/ folder and add a new input.css file with the following content:

input.css

/* static/src/input.css */

@import "tailwindcss";

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

Terminal

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

This will generate a new output.css file inside the static/dist/css/ folder that we will now include in the newly created index.html template file.

Include output.css inside the main index.html template:

index.html

npm install flowbite --save

Import the default theme variables from Flowbite inside your main input.css CSS file:

input.css

/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/

Import the Flowbite plugin file in your CSS:

input.css

@plugin "flowbite/plugin";

Configure the source files of Flowbite in your CSS:

input.css

@source "../../node_modules/flowbite";

Include Flowbite’s JavaScript file inside the index.html file just before the end of the <body> tag using CDN or by including it directly from the node_modules/ folder:

index.html