Skip to main content

✨ 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.

  1. Install the pypi package.
pip install fastapi-tailwind
  1. 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")
  1. Make sure the static folder exists.
mkdir ./static
  1. Generate tailwind.config.js, then configure it appropriately.
fastapi-tailwind-init
  1. 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>
  1. Run FastAPI and visit your site.
fastapi dev main.py

Project details


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

If you're not sure about the file name format, learn more about wheel file names.

fastapi_tailwind-1.0.2b1-py3-none-win_arm64.whl (13.2 MB view details)

Uploaded Python 3Windows ARM64

fastapi_tailwind-1.0.2b1-py3-none-win_amd64.whl (18.0 MB view details)

Uploaded Python 3Windows x86-64

fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_x86_64.whl (19.2 MB view details)

Uploaded Python 3musllinux: musl 1.2+ x86-64

fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_armv7l.whl (18.2 MB view details)

Uploaded Python 3musllinux: musl 1.2+ ARMv7l

fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_aarch64.whl (18.9 MB view details)

Uploaded Python 3musllinux: musl 1.2+ ARM64

fastapi_tailwind-1.0.2b1-py3-none-macosx_10_9_x86_64.whl (21.6 MB view details)

Uploaded Python 3macOS 10.9+ x86-64

fastapi_tailwind-1.0.2b1-py3-none-macosx_10_9_arm64.whl (20.0 MB view details)

Uploaded Python 3macOS 10.9+ ARM64

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-win_arm64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-win_arm64.whl
Algorithm Hash digest
SHA256 8aac683c18c07fdb476121d85dbbd7fa485ff027f5b5540de28baf8a4e9a01cf
MD5 de5e299cb1f60cf989e7111b5d7fccff
BLAKE2b-256 a0aad77fe56dcfc45571ccc3dc18ecb98ba1065ccfc0506134b071bb5f95c862

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-win_amd64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-win_amd64.whl
Algorithm Hash digest
SHA256 0b4b7ef4286a84d683ff812bf1ddd9f373ec943212d67d38fae3f097be6c5157
MD5 96acfd1781f255dc7b5acb33b76e2fe5
BLAKE2b-256 eb25515ce442da77ba84088618ba2b503fc0dac3abac5edec0a1e08a5cd0a2dc

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_x86_64.whl
Algorithm Hash digest
SHA256 887268306b45ee890f3976b4ba7c5acd0f39278a4f66c4371dfbe1f1f72bae41
MD5 13f5d5c2878eca802fee9c677b0f36c1
BLAKE2b-256 02a6ad1a0e2faf49c1470fe3e232dfa027de92eea63a9220a3caf8f4064e9039

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_armv7l.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_armv7l.whl
Algorithm Hash digest
SHA256 009d5b82e4f61ab7b1bc051eaaaf591898c1876475b55bb73dc4f6a2485d5ebd
MD5 5651d6ca96eea2276544609016a4dd8f
BLAKE2b-256 1680ae607fc4a1e0f2e0770bb5b3bd8a17e4ee7cc79a5166b581765921964185

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_aarch64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-musllinux_1_2_aarch64.whl
Algorithm Hash digest
SHA256 d603e3bf6cb0145918a6019ce8aff211065a959ffce29edca68edded89e37464
MD5 cf314a2f1b33cf551a3724d135ea6afb
BLAKE2b-256 771034460974c8c7117a797db6c493a13ba593e3354404a427efffe6a6925e84

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-manylinux2014_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-manylinux2014_x86_64.whl
Algorithm Hash digest
SHA256 26e219714a3be0aac69de7fab93e8ab839d97dedf469c25d346f0e17ee46c61e
MD5 3a1a397700ae2f5c59510bcd5c79ffa2
BLAKE2b-256 45bdb20296ce70d572e91da0a41bbf7223965f9e62608d887439544da47f5311

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-manylinux2014_armv7l.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-manylinux2014_armv7l.whl
Algorithm Hash digest
SHA256 bbb23217dfa3f635921d1990a6c82337d042c1039923b13d2ccab9087145837e
MD5 f7a1c64f64a67ad6f9601f74646ffbf7
BLAKE2b-256 9745df9c0da7abfc3a0ec60e963a37621684bc7c31db88052431388b8179e266

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-manylinux2014_aarch64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-manylinux2014_aarch64.whl
Algorithm Hash digest
SHA256 9a9d596bcb7e963ee1946148481adede6e492d92dd2ce5aabe0b4b22aea26d78
MD5 481877262ea377f4e35da9eaee26b240
BLAKE2b-256 23dea32adff327a8aca5b603dd4b66ee1169f75f18e44f70557633258efd41cb

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-macosx_10_9_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-macosx_10_9_x86_64.whl
Algorithm Hash digest
SHA256 1d1c1055608de9eebaf75dad6adb13a4a5cdedeb6d75027b8051d24d8c9f4d68
MD5 c4ef5a6fd70932c987c59422d8e344c4
BLAKE2b-256 c5c4517d290a17b54b70ccb3b2fe73b8f2350bda4c27ffea5be38e56898d8cad

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.2b1-py3-none-macosx_10_9_arm64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.2b1-py3-none-macosx_10_9_arm64.whl
Algorithm Hash digest
SHA256 d1e7715254e915f4818ee1df4ee8a6d688253af26c72faccd4fe6ab31beff990
MD5 241366510ac1a1334559a0d7506e16cf
BLAKE2b-256 39213b5d354a6c6563f03b2c5eb5593405c192ff0c6b958765688200465be287

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page