✨ TailwindCSS support for 🔥 FastAPI.
Project description
✨ 🔥 fastapi-tailwind
Streamlined approach for adding TailwindCSS to FastAPI without NodeJS.
[!WARNING] Currently in testing phase so expect bugs but do report them please. 🙏
Features ✨
- Auto watch when in dev mode. 🔎
- Doesn't require NodeJS and NPM. 🫧🪥
- Seemless integration into the FastAPI codebase. 🥂
- GZIP automatically configured to compress TailwindCSS out of the box. ⚡
How to add?
[!NOTE] These instructions assume you have a somewhat intermediate understanding of FastAPI and that you've used TailwindCSS before (if you haven't be sure to read the documentation I link in tailwind stages) as I may assume some things.
- Install the pypi package.
pip install fastapi-tailwind
- Edit your FastAPI APP.
Before:
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
app = FastAPI()
@app.get("/")
def index():
return FileResponse("./index.html")
app.mount("/static", StaticFiles(directory = "static"), name = "static")
After:
# main.py
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from fastapi_tailwind import tailwind
from contextlib import asynccontextmanager
static_files = StaticFiles(directory = "static")
@asynccontextmanager
async def lifespan(app: FastAPI):
# YAY, our tailwind get's compiled here! 😄
process = tailwind.compile(static_files.directory + "/output.css")
yield # The code after this is called on shutdown.
process.terminate() # We must terminate the compiler on shutdown to
# prevent multiple compilers running in development mode or when watch is enabled.
app = FastAPI(
# See the fastapi documentation for an explanation on lifespans: https://fastapi.tiangolo.com/advanced/events/
lifespan = lifespan
)
@app.get("/")
def index():
return FileResponse("./index.html")
# We need somewhere to drop the compiled stylesheet so our html file can link it.
app.mount("/static", static_files, name = "static")
- Make sure the
staticfolder exists.
mkdir ./static
- Generate
tailwind.config.js, then configure it appropriately.
fastapi-tailwind-init
- Write your tailwind css in
index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>✨ Tailwind in 🔥 FastAPI</title>
<link rel="stylesheet" href="/static/output.css">
</head>
<body class="bg-slate-950">
<h1 class="mt-10 text-center text-6xl font-bold text-red-400">👋 Hello ✨ Tailwind!</h1>
</body>
</html>
- Run FastAPI and visit your site.
fastapi dev main.py
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distributions
No source distribution files available for this release.See tutorial on generating distribution archives.
Built Distributions
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-win_arm64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | ea4aa223affdec3672c02c211c55a9088865fe30fa8be166e28918990e5ea503 |
|
| MD5 | 3935416281f08f08f6200c3b74a1429f |
|
| BLAKE2b-256 | b856ff231626d2c5d794aa4045041ce905109485b4f2f40806cedcb2ad2246e2 |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-win_amd64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 7055220a2391be5124de373c2f5cda3a6885086c54bee6176ece0f7d6bace25c |
|
| MD5 | 1974d9c188634c1a6b7968f6f40323d1 |
|
| BLAKE2b-256 | 54ef5219642cf78956ee5e2ffc923ee5781c868a8fb30b55a9a24d5cdc8bc6e5 |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_x86_64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 9a49c5ef52e0359c6ab3a615dd9665b9046f72cc1ba723af37d2331d523f81d0 |
|
| MD5 | 53ef97ea686e3556bfc3c6aeb7417048 |
|
| BLAKE2b-256 | 3894e552f35e7b228efeec205a860a4ddc18684c406fbc4d5d95a3703199a74e |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_armv7l.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | c9de4ca00e5ffb3cb5ad3573999da411fec4aeac0c53b4849fdb9e68740b96e3 |
|
| MD5 | fd3f8dac59263399598971f1b5892df5 |
|
| BLAKE2b-256 | 04db7f4b17d019062677fc9c95f2b7a047beb14436d0ba780631b0bd03e6ff81 |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_aarch64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 491fc6cd1ce26e6d9145c594e13385ee46c66db96d2c5213b47f4b956bb2a1b1 |
|
| MD5 | 30393e536954633aaf54896941519d1f |
|
| BLAKE2b-256 | 3febeaaed976db22a8534b6db2fa1869e006f5a96f91f21ec6facf2c3a3bb7e7 |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_x86_64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 054e189882f3f18b5c3d75c3de3ed46ebd836ed159614a43cbba2a98b3629ed7 |
|
| MD5 | 295e5e4e2e5888e3312896358f4c5832 |
|
| BLAKE2b-256 | e8eeeb39801053b852601e25ecdb2f4d20e8596fbd415d1bc233dfe737390e5c |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_armv7l.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | ee3591a0dbad7d21827a575e9f40d89de78eb6c67b67c97334e5289e0f6a412d |
|
| MD5 | 092478736d166eda9537627197f8ba6e |
|
| BLAKE2b-256 | 17708e588261c44db5ec2c50c4c68466c47e1422347f03b5abe8d1741e471dbf |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_aarch64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 1b6755ebe17dd51375bb67db9c9bd3a8d84dc18f1b195677a120f9ef530f107f |
|
| MD5 | 2a06e05423eb4f11007c2e45a9d8b4b0 |
|
| BLAKE2b-256 | 7dc4fabf04a0650452903b50ec25302435538ff1510a6102cc42fe13875f7895 |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-macosx_10_9_x86_64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 07aba3110e319c77e618c275deaf365764f52818de01be1949d86447c379c9af |
|
| MD5 | 57fe6311ea88a0a4455186d0853020f9 |
|
| BLAKE2b-256 | 7fb1373dbc7df8363d771373f78d9ef73bd814a74dfce82a1aa3a1ea212c4dc0 |
Close
Hashes for fastapi_tailwind-1.0.1a7-py3-none-macosx_10_9_arm64.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | dc08bd631dd3865c8ac0fa7ff04af8f6bbd20186d89dc9c6bd1487acfcbaa358 |
|
| MD5 | dc951738d14853e214df7c434e31f1af |
|
| BLAKE2b-256 | 22346e4ad2fb3fa9766be13b73628fad2ac824405267c26bcd6575899ec5b0de |
