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:
-
Install Flask :
First, you need to have Flask installed. You can install it via pip:
pip install Flask -
Create a Flask project directory :
Create a directory for your Flask project.
-
Initialize a virtual environment (optional but recommended) :
Navigate to your project directory and create a virtual environment to isolate your project dependencies.
python3 -m venv venv -
Activate the virtual environment :
- On Windows:
.venv\Scripts\activate
- On macOS/Linux:
```
source venv/bin/activate
```
-
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
npm init -y -
Initialize Tailwind CSS :
Initialize Tailwind CSS in your project directory. This will create a
tailwind.config.jsfile and atailwind.cssfile.
npx i tailwindcssnow we need to initialise tailwindcss
npx tailwindcss init Add content in tailwind.config.js :
we need to add the path of our templates files inside tailwind.config.js
/** @type {import('tailwindcss').Config} **/
module.exports = {
content: ["./templates/*.html"],
theme: {
extend: {},
},
plugins: [],
}
- 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
@tailwind base;
@tailwind components;
@tailwind utilities;
- 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 :
npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch
- 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.
<link href="{{url_for('static',filename='css/output.css')}}" rel="stylesheet">
- Test your project :
Add the below code inside the index.html file
<!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>
-
Create app.py file in your root directory :
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def hello_world(): return render_template("index.html") app.run(debug=True) -
Run the flask app:
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/.
Top comments (0)