Setup for flask with tailwind project
Published: 2024-03-12 15:06:44

# how to setup tailwind css with flask app

status: ✏️ Draft
categories: Coding, Javascript, flask, python, webdev
published: 12/03/2024
Author: tanish vashisth
route: tutorial

Simplicity is the cornerstone of efficient web development. In this blog post, we'll explore the seamless integration of Flask, a lightweight Python web framework, with Tailwind CSS, a utility-first CSS framework. By combining these two powerful tools, developers can effortlessly create sleek and responsive web applications with minimal setup. Join us as we unveil the essentials of setting up a Flask and Tailwind project, empowering you to embark on your web development journey with ease and finesse.

Setting up a Flask project with Tailwind CSS involves several steps. Here's a basic guide to get you started:

1. **Install Flask :** 
    
    First, you need to have Flask installed. You can install it via pip:
    
    ```bash
    pip install Flask
    ```
2. **Create a Flask project directory :**  
    
    Create a directory for your Flask project.
3. **Initialize a virtual environment** (optional but recommended) **:** 
    
    Navigate to your project directory and create a virtual environment to isolate your project dependencies.
    
    ```bash
    python3 -m venv venv
    ```
4. **Activate the virtual environment :**
    - On Windows:
    
    ```
    .venv\Scripts\activate
    ```
    
    - On macOS/Linux:
    
    ```
    source venv/bin/activate
    ```
5. **Start an npm project :**
    
    We need this to automatically compile our tailwindcss file to make sure only the tailwind classes we are using are included in the output.css file
    
    ```bash
    npm init -y
    ```
6. **Initialize Tailwind CSS :**
    
     Initialize Tailwind CSS in your project directory. This will create a `tailwind.config.js` file and a `tailwind.css` file.
    
    ```bash
    npx i tailwindcss
    ```
    
    now we need to initialise tailwindcss
    
    ```bash
    npx tailwindcss init
    ```
7. **Add content in tailwind.config.js :** 

we need to add the path of our templates files inside tailwind.config.js

```jsx
/** @type {import('tailwindcss').Config} **/
module.exports = {
content: ["./templates/*.html"],
theme: {
extend: {},
},
plugins: [],
}
```
8. **Create input.css file** **:** 

Now create a CSS file which will contain the base code of tailwindcss.

create the file inside **“/static/css/input.css”**

Enter the following code inside input.css

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
9. **Start the build process** **:** 

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

now run this command on a new terminal :

```css
npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch
```
10. **Add the output.css** **:** 

This command instructs Tailwind to create an "output.css" file containing only the utility classes utilized within the HTML files located in your "templates" folder. You can then include the generated file "./static/css/output.css" in your HTML files using the specified command.

```html
<link href="{{url_for('static',filename='css/output.css')}}" rel="stylesheet">
```
11. **Test your project :** 

Add the below code inside the index.html file 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{url_for('static',filename='css/output.css')}}" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="bg-red-600">
        background is red
    </div>
</body>
</html>
```
12. **Create [app.py](http://app.py) file in your root directory :**
    
    ```html
    from flask import Flask, render_template
    
    app = Flask(__name__)
    
    @app.route("/")
    def hello_world():
        return render_template("index.html")
    
    app.run(debug=True)
    ```
    
13. **Run the flask app:** 
    
    ```bash
    python main.py
    ```
    

Now, you should have a Flask project set up with Tailwind CSS integrated. Access your Flask application in a web browser by navigating to `http://localhost:5000/`.