Cómo configurar FastAPI con Tailwind CSS
Introducción
Actualizado Septiembre 2025: Este post ha sido actualizado para incluir las instrucciones más recientes de configuración de Tailwind CSS v4.0 junto con el tutorial original de v3.0.
En este post te comparto cómo configurar FastAPI (mi framework web favorito) con Tailwind CSS (mi framework CSS favorito).
Enlaces útiles
Actualización para Tailwind CSS v4.0: Un tutorial de YouTube que he hecho para v4.0 puede encontrarse en YouTube: FastAPI con Tailwind CSS v4.0.
Obsoleto (para Tailwind CSS v3.0): Un tutorial de YouTube que he hecho para v3.0 puede encontrarse en YouTube: FastAPI con Tailwind CSS v3.0.
El repositorio de GitHub con el código fuente completo está disponible como referencia. Siéntete libre de contactarme en x(twitter) si tienes alguna pregunta.
Instrucciones
1.- Configura tu proyecto FastAPI
Necesitas instalar:
FastAPI
pip install fastapiServidor ASGI
pip install "uvicorn[standard]"Motor de plantillas
Para este ejemplo usaremos Jinja2.
pip install Jinja22.- Devuelve HTML desde tu ruta de FastAPI
Crea una carpeta “templates” en tu proyecto
Necesitas crear una nueva carpeta “templates” y crear un archivo “base.html” dentro.
mkdir templates && touch templates/base.htmlahora agregaremos algo de HTML básico.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documento</title>
</head>
<body></body>
</html>Agrega TemplateResponse a la respuesta de tu ruta
Ahora necesitamos configurar Jinja2Templates con nuestra carpeta “templates” y devolver un TemplateResponse en nuestra ruta index.
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.- Crea una carpeta “tailwindcss” en tu proyecto
Aquí agregaremos los archivos de TailwindCSS.
mkdir tailwindcss4.- Instala TailwindCSS
Inicia una nueva terminal dentro de la carpeta de tu proyecto y cambia el directorio de trabajo a la carpeta “tailwindcss”.
cd tailwindcssy luego ejecuta el siguiente comando, con el gestor de paquetes que prefieras usar.
npm
npm install -D tailwindcss @tailwindcss/clipnpm
pnpm install -D tailwindcss @tailwindcss/cliyarn
yarn add -D tailwindcss @tailwindcss/cli5.- Crea una nueva carpeta “styles” dentro de tu carpeta tailwindcss
Aquí agregaremos nuestros estilos personalizados.
Para eso necesitamos crear una nueva carpeta “styles” dentro de nuestra carpeta “tailwindcss”.
mkdir stylesahora necesitamos crear un nuevo archivo “app.css” dentro de esta carpeta.
touch styles/app.cssluego agrega las siguientes directivas.
@import "tailwindcss";
@source "../../templates";6.- Ejecuta el proceso de compilación CLI de TailwindCSS
Este proceso generará un archivo “app.css” dentro de una nueva carpeta “static/css”.
La bandera “—watch” se asegurará de que los estilos se actualicen cada vez que hagas un cambio en tus archivos.
npx @tailwindcss/cli -i ./styles/app.css -o ../static/css/app.css --watch7.- Agrega la hoja de estilos de TailwindCSS a tu archivo base.html
Monta la carpeta static
Para montar esta carpeta necesitamos agregar las siguientes líneas a nuestro archivo main.py.
Importa los archivos estáticos.
from fastapi.staticfiles import StaticFilesAgrega la carpeta static a tu aplicación.
app.mount("/static", StaticFiles(directory="static"), name="static")Ahora podemos agregar la hoja de estilos a nuestro archivo base.html.
<link href="{{url_for('static',path='/css/app.css')}}" rel="stylesheet" />8.- Sirviendo archivos comprimidos con el middleware GZip
Para servir archivos comprimidos necesitamos importar el middleware.
agrega el middleware a tu aplicación.
app.add_middleware(GZipMiddleware)Script para ejecutar el proceso de compilación CLI de TailwindCSS
Podemos crear un script en el archivo package.json para ejecutar el proceso de compilación CLI de TailwindCSS.
"scripts": {
"dev": "npx @tailwindcss/cli -i ./styles/app.css -o ../static/css/app.css --watch"
},Y luego simplemente ejecutar.
npm
npm run devpnpm
pnpm devyarn
yarn devpara ejecutar el proceso de compilación de Tailwind CSS.
Ahora tienes Tailwind CSS v4.0 configurado en tu proyecto FastAPI.