✨ TailwindCSS support for 🔥 FastAPI.
Reason this release was yanked:
DO NOT use the pypi package yet! They don't ship with binaries as of right now. PIP install the package from the github instead: https://github.com/THEGOLDENPRO/fastapi-tailwind
Project description
✨ 🔥 fastapi-tailwind
Streamlined approach for adding TailwindCSS to FastAPI without NodeJS.
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 git+https://github.com/THEGOLDENPRO/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 Distribution
Built Distribution
Close
Hashes for fastapi_tailwind-1.0.0.dev1.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | b75f57184e653ad7b6e5daf13ba9629ce734f2cac9259164b9cc1358deceb285 |
|
| MD5 | 4b18f4d0eea46f2df5a0bdf87dfcafe0 |
|
| BLAKE2b-256 | 10242422a03f74941c5ba44c0e74b050b7ae99589a68a1dff3227989e4a922e2 |
Close
Hashes for fastapi_tailwind-1.0.0.dev1-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | e2d1c760eb6cd0b4123cbe4d328ca6a14068c9f33c049f485c426fd6bf8078c6 |
|
| MD5 | 9d073ebc4ef429d08a0f199e4b8fa842 |
|
| BLAKE2b-256 | 110c1861478844e9d6816b38b7be6d051e57f3c69ee4c793efb46e6fa13175d3 |
