How to setup FastAPI with Tailwind CSS
In this post I'll share with you, how to setup FastAPI with Tailwind CSS
Introduction
In this post I'll share with you, how to setup FastAPI(my favorite web framework) with Tailwind CSS(my favorite CSS Framework).
Useful Links
A YouTube tutorial I've made can be found here https://youtu.be/yrEKYkIK-Fw.
The GitHub repo can be found here https://github.com/vicsejas/fastapi-with-tailwindcss.git.
Feel free to contact me on x(twitter). if you have any questions.
Instructions
Now let's begin with our project.
1.- Setup your FastAPI project
First we will need to setup our FastAPI project by installing.
FastAPI
pip install fastapi
ASGI Server
pip install "uvicorn[standard]"
Templating Engine
Our templating engine for this example will be Jinja2.
pip install Jinja2
2.- Return HTML from your FastAPI route
Now inside our project we need to
Create a "templates" folder in your project
Inside this folder create a "base.html" file
Add the TemplateResponse to your route response
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
app=FastAPI()
templates=Jinja2Templates(directory="templates")
@app.get("/")
async def index(request:Request):
return templates.TemplateResponse("base.html",{"request":request})
3.- Create a "tailwindcss" folder on your project
Here we will be adding the TailwindCSS files
4.- Install TailwindCSS
Start a new terminal inside your project folder and run the following command, with the package manager you'd like to use
npm
npm install tailwindcss
pnpm
pnpm install tailwindcss
yarn
yarn add tailwindcss
5.- Create a "tailwind.config.js" file
This file will be used to configure TailwindCSS, and make sure you include in content the relative path to your templates folder
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["../templates/**/*.html"],
theme: {
extend: {},
},
plugins: [],
}
6.- Create a new folder "styles" inside your tailwindcss folder
Here we will be adding our custom styles, by creating a new file "styles.css" and adding the base directives
@tailwind base; @tailwind components; @tailwind utilities;
7.- Run the TailwindCSS CLI build process
This proccess will generate an "app.css" file inside a new "static/css" folder.
The "--watch" flag will make sure that the styles are updated every time you make a change in your html files.
npx tailwindcss -i ./styles/app.css -o ../static/css/app.css --watch
8.- Add the TailwindCSS stylesheet to your base.html file
Mount the static folder
In order to mount this folder we need to add the following lines to our main.py file
Import the static files
from fastapi.staticfiles import StaticFiles
Add the static folder to your app
app.mount("/static", StaticFiles(directory="static"), name="static")
Now we can add the stylesheet to our base.html file
<link href="{{url_for('static',path='/css/app.css')}}" rel="stylesheet">
9.- Serving compressed files with the GZip middleware
In order to serve compressed files we need to import the middleware
from fastapi.middleware.gzip import GZipMiddleware
add the middleware to your app
app.add_middleware(GZipMiddleware)
Script for running the TailwindCSS CLI build process
We can create a script in the package.json file to run the TailwindCSS CLI build process
"scripts": {
"dev": "npx tailwindcss -i ./styles/app.css -o ../static/css/app.css --watch"
},
And then simply run
npm
npm run dev
pnpm
pnpm dev
yarn
yarn dev
to run the Tailwind CSS build process.
and that's it, you have now successfully setup Tailwind CSS with FastAPI.
About the author:
