I use Tailwind CSS a lot and recently I integrated my flask app with TailwindCSS in the best possible way. Other online guides are mostly outdated, so here is how to exactly integrate Tailwind CSS with Flask.
Let's start with a minimal Flask app
<h2>Step 1 - Setup a Flask app</h2>
I am setting up a very basic Flask app and will be building on top of this later using Taliwind. Here is what my folder structure looks like:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/blogpost/using-tailwind-with-flask/folder-structure.png" alt="minimal flask app" width="836" height="611">
As you can see we have a static folder, a template folder, and an empty main.py file.
<pre class="language-markup"><code>flask_app_folder/
├── main.py
├── static
└── templates</code></pre>
I will go to the <a href="https://flask.palletsprojects.com/en/2.3.x/quickstart/" target="_blank" rel="noopener">flask documentation</a> and get a minimal Flask app for integrating tailwind CSS.
Here is what my main.py looks like now:
<pre class="language-python"><code>from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
 return "&lt;p&gt;Hello, World!&lt;/p&gt;"


app.run(debug=True)</code></pre>
<h2>Step 2 - Setup an npm project</h2>
This step might sound strange but we need it to automatically compile our tailwind CSS files to make sure only the tailwind classes we are using are included in the output CSS file.
Let me show you step-by-step how to do it
Go to the <a href="https://nodejs.org/en/download" target="_blank" rel="noopener">nodejs website</a> and download and <a href="https://nodejs.org/en/download" target="_blank" rel="noopener">install node.js</a> for your machine. Node.js 12.13.0 or higher is required to use Tailwind CSS.
Run the following command in the node.js integrated terminal:
<pre class="language-markup"><code>npm init -y</code></pre>
<h2>Step 3 - Install and setup Tailwind CSS using npm</h2>
Then install tailwind CSS using the following command:&nbsp;
<pre class="language-markup"><code>npm i tailwindcss</code></pre>
Then run the following command to initialize tailwindcss
<pre class="language-markup"><code>npx tailwindcss init</code></pre>
You will see a success message like this:&nbsp;
<pre class="language-markup"><code>PS D:\Codewithharry.com\1. using flask with tailwind\flask-with-tailwind&gt; npx tailwindcss init 

Created Tailwind CSS config file: tailwind.config.js
PS D:\Codewithharry.com\1. using flask with tailwind\flask-with-tailwind&gt; </code></pre>
This command automatically generates a tailwind.config.js file which contains important configuration for Tailwind CSS.
Please note that all the file paths mentioned in the blog, including the ones in <code>tailwind.config.js</code> and the Tailwind build command, are relative to the root directory of your project.
Change the content section of the file such that the final&nbsp;tailwind.config.js looks something like this:
<pre class="language-javascript"><code>/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./templates/*.html"],
 theme: {
 extend: {},
 },
 plugins: [],
}

</code></pre>
This tells Tailwind CSS to look for tailwind classes inside HTML files of the /templates folder.&nbsp;
<h2>Step 4 - Create an input CSS file</h2>
Let's now create a CSS file that will contain the base code of tailwind CSS. I am choosing to create this file inside "/static/css/input.css".
This location is a matter of choice but if you are choosing this, the later commands must refer to this location as well.&nbsp;
Enter the following code inside input.css
<pre class="language-css"><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre>
At this point, our project looks something like this:&nbsp;
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/blogpost/using-tailwind-with-flask/folder-structure-after-installation.png" alt="input css file" width="908" height="489">
<h2>Step 5 - Start the build process</h2>
We will now run a command that will take the input.css file as input and generate the output CSS which will only contain the tailwind classes required by our html files.
Open a new terminal and run this command:
<pre class="language-markup"><code>npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch
</code></pre>
This command tells tailwind to generate an output.css file which only contains the utility classes you have used inside the HTML files of your templates folder.
Now you can include file ./static/css/output.css by adding the below command in your HTML files
<pre class="language-markup"><code>&lt;link href="{{url_for('static',filename='css/output.css')}}" rel="stylesheet"&gt;
</code></pre>
<h2>Step 6 - Test your project (optional)</h2>
Let's test this configuration by creating a demo html file, index.html inside the templates directory which looks something like this:
<pre class="language-markup"><code>&lt;!-- File ./templates/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;link href="{{url_for('static',filename='css/output.css')}}" rel="stylesheet"&gt;
 &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div class="bg-red-600"&gt;
 background is red
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
Change your flask app (file main.py) to look something like this:
<pre class="language-python"><code>from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def hello_world():
 return render_template("index.html")


app.run(debug=True)</code></pre>
Open a new terminal (keeping the other terminal running the tailwind command active) and run the following command to execute the flask app:
<pre class="language-python"><code>python main.py</code></pre>
Our page looks something like this:
<img style="border: 2px solid black;" src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/blogpost/using-tailwind-with-flask/final-blog-post.png" alt="browser image for our tailwind plus flask app" width="839" height="452">
and our final folder structure looks something like this:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/blogpost/using-tailwind-with-flask/final-folder-structure.png" alt="final folder structure" width="337" height="358">
If you look inside output.css, you will notice that only the tailwind classes used are included in the output.css which reduces the file size of output.css and improves performance drastically.
So instead of sending a full tailwind bundle of 3-4mb with all utility classes, we are including a file 10 KB file in our final build.
<h2>Step 7 - Shortening the tailwind build command (optional)</h2>
If you think typing the command "npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch" might be quite cumbersome, you can create an alias of this command by including a script called "buildcss" in your package.json like this:
<h3>File package.json:</h3>
<pre class="language-javascript"><code>{
 "name": "flask-with-tailwind",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
 "buildcss": "npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
 "tailwindcss": "^3.3.3"
 }
}
</code></pre>
Now you can easily run <code>npm run buildcss</code> as an alias of <code>npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch</code>
Congratulations, you have successfully incorporated Tailwind CSS with your Flask app. You can now start using Tailwind CSS utility classes or know more about them in the <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener">official Tailwind CSS documentation</a>
Let me know your thoughts in the comments below. Happy Coding!

Using TailwindCSS with Python Flask

Add a new comment