A YouTube tutorial I've made can be found here.
Feel free to contact me on x(twitter). if you have any questions.
The steps I followed are the following.
You need to install
FastAPI
pip install fastapi
ASGI Server
pip install "uvicorn[standard]"
Templating Engine
For this example we will be using Jinja2
pip install Jinja2
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})
Here we will be adding the TailwindCSS files
Start a new terminal inside your project folder and run the following command, with the package manager you'd like to use
npm install tailwindcss
pnpm install tailwindcss
yarn add tailwindcss
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: [],
}
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;
This proccess will generate a "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 files.
npx tailwindcss -i ./styles/app.css -o ../static/css/app.css --watch
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">
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)
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"
},