✨ TailwindCSS support for 🔥 FastAPI.
Project description
✨ 🔥 fastapi-tailwind
Streamlined approach for adding TailwindCSS V4 to FastAPI without NodeJS.
[!WARNING] Currently in alpha 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 already have a somewhat intermediate understanding of FastAPI and that you've used TailwindCSS before (if you haven't be sure to read the documentation pages I link below).
If you're using Windows you can still replicate these commands via a file explorer.
- 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 and create ainput.cssfile (in v4 this is now used for configuration).
mkdir ./static
touch input.css
- Open
input.cssand write@import "tailwindcss;in the file or just run this command:
echo '@import "tailwindcss";' > input.css
VSCode TailwindCSS Intellisense FIX!
There is currently a bug in the vscode tailwindcss extension where you will not get any intellisense in v4 unless we add back the old v3
tailwind.config.jsfile to point to the files with tailwind code in them (e.g. html, markdown, javascript files).A simple, quick and minimal way to fix this for the time being, is to create a file located at
.vscode/settings.jsonwhere ourinput.cssfile is (should be in root if you followed my previous instructions) and configure it like so:{ "tailwindCSS.experimental.configFile": "./input.css" }That should fix that issue.
- Now write your tailwind css in your
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>
- Then run FastAPI and visit your site. It should be gucci. ✨
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
Built Distributions
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file fastapi_tailwind-2.0.0a1-py3-none-win_amd64.whl.
File metadata
- Download URL: fastapi_tailwind-2.0.0a1-py3-none-win_amd64.whl
- Upload date:
- Size: 52.5 MB
- Tags: Python 3, Windows x86-64
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
b125b191989e0ebb86b10468c1bcf4ed21d628a534073c87266d0e21fb563a58
|
|
| MD5 |
b361ce96751bba4f7b26b3ebe8322507
|
|
| BLAKE2b-256 |
0e506d841087130bdfdd4174c66fe45f69aafce841373dad5c7a4dc9d8fda680
|
File details
Details for the file fastapi_tailwind-2.0.0a1-py3-none-musllinux_1_2_x86_64.whl.
File metadata
- Download URL: fastapi_tailwind-2.0.0a1-py3-none-musllinux_1_2_x86_64.whl
- Upload date:
- Size: 52.5 MB
- Tags: Python 3, musllinux: musl 1.2+ x86-64
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
bf0b3fb1afad7aa8369516375b0e2334b773f56a1dd6f539a49bd6b357569b82
|
|
| MD5 |
0bcf4b1c3f8e43b29476d3d1fa783551
|
|
| BLAKE2b-256 |
19f5e442cdd373ad3ddb7abf5aee3bbf1633dcf13d488134b50e2d2e7aea8114
|
File details
Details for the file fastapi_tailwind-2.0.0a1-py3-none-musllinux_1_2_aarch64.whl.
File metadata
- Download URL: fastapi_tailwind-2.0.0a1-py3-none-musllinux_1_2_aarch64.whl
- Upload date:
- Size: 50.8 MB
- Tags: Python 3, musllinux: musl 1.2+ ARM64
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
740da5a98984cff63193dc4ab6b0f287282f8794959cf6dc155615f0239e39ad
|
|
| MD5 |
850c1c9457ec4dea442b294c1ebcffa7
|
|
| BLAKE2b-256 |
f29d2343c13d71dae3894d20c902dddc1c7ac26ab693e86179214814a550e7c4
|
File details
Details for the file fastapi_tailwind-2.0.0a1-py3-none-manylinux2014_x86_64.whl.
File metadata
- Download URL: fastapi_tailwind-2.0.0a1-py3-none-manylinux2014_x86_64.whl
- Upload date:
- Size: 51.4 MB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
cf5be33972c2b23673dbff7d5d624566c25faa3d7f50b48f3b1cfb596bc56f3d
|
|
| MD5 |
69e3c1a7d8e0347008a2edf01dbc6281
|
|
| BLAKE2b-256 |
941e4c924d5601d1c9680472606399132d802a638e69351594ddba1f9c74a008
|
File details
Details for the file fastapi_tailwind-2.0.0a1-py3-none-manylinux2014_aarch64.whl.
File metadata
- Download URL: fastapi_tailwind-2.0.0a1-py3-none-manylinux2014_aarch64.whl
- Upload date:
- Size: 49.8 MB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
c5bc1e5ce621c7bf53f38f7492207d0d6500f5e1e3d60558e5b57627fa4ce25c
|
|
| MD5 |
b18cc6a18ca5387fd81f0b99cfec5875
|
|
| BLAKE2b-256 |
9e7a89b7bd553fe4e1cb2a09b1f2caf7d9ddcb130a06bc051c4088881807946a
|
File details
Details for the file fastapi_tailwind-2.0.0a1-py3-none-macosx_10_9_x86_64.whl.
File metadata
- Download URL: fastapi_tailwind-2.0.0a1-py3-none-macosx_10_9_x86_64.whl
- Upload date:
- Size: 36.9 MB
- Tags: Python 3, macOS 10.9+ x86-64
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
d090299955bf34bf8a5350b3435d04fdfb8a9b5ae58ce90f4812cdab84575738
|
|
| MD5 |
532f6d33da7573f932ddc8d33f418cdc
|
|
| BLAKE2b-256 |
fa64718d79f04467fd546e35d69beb2ae3fa400ddf29d571a91c2d18041daa8b
|
File details
Details for the file fastapi_tailwind-2.0.0a1-py3-none-macosx_10_9_arm64.whl.
File metadata
- Download URL: fastapi_tailwind-2.0.0a1-py3-none-macosx_10_9_arm64.whl
- Upload date:
- Size: 34.2 MB
- Tags: Python 3, macOS 10.9+ ARM64
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
1bd8dae483c9526471478ec13156833c50e79b581a090dc77561b0e847f7e6a0
|
|
| MD5 |
570178d7a3bdaf4005ea1085b8356ea2
|
|
| BLAKE2b-256 |
32ffa115093aeb452168f8576a67d8ffbf8e89e5e0a8fc48904c90b2e03bfff4
|
