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

fastapi_tailwind-1.0.1a7-py3-none-win_arm64.whl (12.6 MB view details)

Uploaded Python 3 Windows ARM64

fastapi_tailwind-1.0.1a7-py3-none-win_amd64.whl (17.3 MB view details)

Uploaded Python 3 Windows x86-64

fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_x86_64.whl (18.5 MB view details)

Uploaded Python 3 musllinux: musl 1.2+ x86-64

fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_armv7l.whl (17.5 MB view details)

Uploaded Python 3 musllinux: musl 1.2+ ARMv7l

fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_aarch64.whl (18.2 MB view details)

Uploaded Python 3 musllinux: musl 1.2+ ARM64

fastapi_tailwind-1.0.1a7-py3-none-macosx_10_9_x86_64.whl (20.9 MB view details)

Uploaded Python 3 macOS 10.9+ x86-64

fastapi_tailwind-1.0.1a7-py3-none-macosx_10_9_arm64.whl (19.3 MB view details)

Uploaded Python 3 macOS 10.9+ ARM64

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-win_arm64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-win_arm64.whl
Algorithm Hash digest
SHA256 ea4aa223affdec3672c02c211c55a9088865fe30fa8be166e28918990e5ea503
MD5 3935416281f08f08f6200c3b74a1429f
BLAKE2b-256 b856ff231626d2c5d794aa4045041ce905109485b4f2f40806cedcb2ad2246e2

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-win_amd64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-win_amd64.whl
Algorithm Hash digest
SHA256 7055220a2391be5124de373c2f5cda3a6885086c54bee6176ece0f7d6bace25c
MD5 1974d9c188634c1a6b7968f6f40323d1
BLAKE2b-256 54ef5219642cf78956ee5e2ffc923ee5781c868a8fb30b55a9a24d5cdc8bc6e5

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_x86_64.whl.

File metadata

File hashes

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

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_armv7l.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_armv7l.whl
Algorithm Hash digest
SHA256 c9de4ca00e5ffb3cb5ad3573999da411fec4aeac0c53b4849fdb9e68740b96e3
MD5 fd3f8dac59263399598971f1b5892df5
BLAKE2b-256 04db7f4b17d019062677fc9c95f2b7a047beb14436d0ba780631b0bd03e6ff81

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_aarch64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-musllinux_1_2_aarch64.whl
Algorithm Hash digest
SHA256 491fc6cd1ce26e6d9145c594e13385ee46c66db96d2c5213b47f4b956bb2a1b1
MD5 30393e536954633aaf54896941519d1f
BLAKE2b-256 3febeaaed976db22a8534b6db2fa1869e006f5a96f91f21ec6facf2c3a3bb7e7

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_x86_64.whl
Algorithm Hash digest
SHA256 054e189882f3f18b5c3d75c3de3ed46ebd836ed159614a43cbba2a98b3629ed7
MD5 295e5e4e2e5888e3312896358f4c5832
BLAKE2b-256 e8eeeb39801053b852601e25ecdb2f4d20e8596fbd415d1bc233dfe737390e5c

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_armv7l.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_armv7l.whl
Algorithm Hash digest
SHA256 ee3591a0dbad7d21827a575e9f40d89de78eb6c67b67c97334e5289e0f6a412d
MD5 092478736d166eda9537627197f8ba6e
BLAKE2b-256 17708e588261c44db5ec2c50c4c68466c47e1422347f03b5abe8d1741e471dbf

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_aarch64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-manylinux2014_aarch64.whl
Algorithm Hash digest
SHA256 1b6755ebe17dd51375bb67db9c9bd3a8d84dc18f1b195677a120f9ef530f107f
MD5 2a06e05423eb4f11007c2e45a9d8b4b0
BLAKE2b-256 7dc4fabf04a0650452903b50ec25302435538ff1510a6102cc42fe13875f7895

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-macosx_10_9_x86_64.whl.

File metadata

File hashes

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

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-1.0.1a7-py3-none-macosx_10_9_arm64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-1.0.1a7-py3-none-macosx_10_9_arm64.whl
Algorithm Hash digest
SHA256 dc08bd631dd3865c8ac0fa7ff04af8f6bbd20186d89dc9c6bd1487acfcbaa358
MD5 dc951738d14853e214df7c434e31f1af
BLAKE2b-256 22346e4ad2fb3fa9766be13b73628fad2ac824405267c26bcd6575899ec5b0de

See more details on using hashes here.

Supported by

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