THEGOLDENPRO/fastapi-tailwind

# ✨ 🔥 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 ✨

[x] Auto watch when in dev mode. 🔎
[x] Doesn't require NodeJS and NPM. 🫧🪥
[x] 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 static folder 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="https://github.com/THEGOLDENPRO/fastapi-tailwind/blob/main/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
```

THEGOLDENPRO / fastapi-tailwind

readme

Features ✨

How to add?