✨ TailwindCSS support for 🔥 FastAPI.

Navigation

Verified details

These details have been verified by PyPI
Maintainers
Avatar for Dev_Goldy from gravatar.com Dev_Goldy

Unverified details

These details have not been verified by PyPI
Project links
Meta
  • License: MIT License (MIT License Copyright (c) 2024-present Goldy Permission is hereby granted, free of charge, to any ...)
  • Author: Goldy
  • Tags tailwindcss , tailwind , fastapi , fastapi middleware , tailwindcss v4
  • Requires: Python >=3.8
  • Provides-Extra: dev
Classifiers
Report project as malware

Project description

✨ 🔥 fastapi-tailwind

Streamlined approach for adding TailwindCSS V4 to FastAPI without NodeJS.

Pypi Version Python Versions Pypi Downloads

[!WARNING] Currently in alpha phase so expect bugs but do report them please. 🙏

Features ✨

  • Zero dependencies 🪶
  • 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.

  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",
        tailwind_stylesheet_path = "./input.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 and create a input.css file (in v4 this is now used for configuration).
mkdir ./static
touch input.css
  1. Open input.css and 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.js file 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.json where our input.css file 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.

  1. 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>
  1. Then run FastAPI and visit your site. It should be gucci. ✨
fastapi dev main.py

Project details

Verified details

These details have been verified by PyPI
Maintainers
Avatar for Dev_Goldy from gravatar.com Dev_Goldy

Unverified details

These details have not been verified by PyPI
Project links
Meta
  • License: MIT License (MIT License Copyright (c) 2024-present Goldy Permission is hereby granted, free of charge, to any ...)
  • Author: Goldy
  • Tags tailwindcss , tailwind , fastapi , fastapi middleware , tailwindcss v4
  • Requires: Python >=3.8
  • Provides-Extra: dev
Classifiers

Release history Release notifications | RSS feed

2.0.4a1 pre-release

This version

2.0.3a1 pre-release

2.0.2a1 pre-release

2.0.0a1 pre-release

1.0.2b1 pre-release

1.0.1a7 pre-release

1.0.1a6 pre-release

1.0.1a5 pre-release

1.0.1a2 pre-release

1.0.1a1 pre-release

1.0.0.dev2 pre-release

1.0.0.dev1 pre-release yanked

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

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-2.0.3a1-py3-none-win_amd64.whl (56.3 MB view details)

Uploaded Python 3Windows x86-64

fastapi_tailwind-2.0.3a1-py3-none-musllinux_1_2_x86_64.whl (56.4 MB view details)

Uploaded Python 3musllinux: musl 1.2+ x86-64

fastapi_tailwind-2.0.3a1-py3-none-musllinux_1_2_aarch64.whl (54.7 MB view details)

Uploaded Python 3musllinux: musl 1.2+ ARM64

fastapi_tailwind-2.0.3a1-py3-none-manylinux2014_x86_64.whl (55.3 MB view details)

Uploaded Python 3

fastapi_tailwind-2.0.3a1-py3-none-manylinux2014_aarch64.whl (53.8 MB view details)

Uploaded Python 3

fastapi_tailwind-2.0.3a1-py3-none-macosx_11_0_x86_64.whl (40.8 MB view details)

Uploaded Python 3macOS 11.0+ x86-64

fastapi_tailwind-2.0.3a1-py3-none-macosx_11_0_arm64.whl (38.3 MB view details)

Uploaded Python 3macOS 11.0+ ARM64

fastapi_tailwind-2.0.3a1-py3-none-macosx_10_9_x86_64.whl (40.8 MB view details)

Uploaded Python 3macOS 10.9+ x86-64

fastapi_tailwind-2.0.3a1-py3-none-macosx_10_9_arm64.whl (38.3 MB view details)

Uploaded Python 3macOS 10.9+ ARM64

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-win_amd64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-win_amd64.whl
Algorithm Hash digest
SHA256 0df4ffffc962ad4065fc1eee190b579d3e92371403401e37b79966cfd795471b
MD5 e9e718f2b76dea250ee046561e0a5c5c
BLAKE2b-256 fca0f54ea513dd96c0561c2f8fcee4f60a51feac3b180155ef8ecae8a5f5ab2a

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-musllinux_1_2_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-musllinux_1_2_x86_64.whl
Algorithm Hash digest
SHA256 22fac4f2320997d85c4358af7fa375730e3ec8f7a9ef9b7ea94880248bdcec7b
MD5 465a71495a2bfcfe96dd2398a27e502f
BLAKE2b-256 070dc45811489b1ce5f8d9697564e205e15a3a09b95a51284b71a277e37de9ca

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-musllinux_1_2_aarch64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-musllinux_1_2_aarch64.whl
Algorithm Hash digest
SHA256 ae9e94ed9c890bc4fb34ba2f382f342339ce7b05eb42b3858b970cabaddb18f0
MD5 75b6b3fe27ea51e1cfe91bcfa06a34b1
BLAKE2b-256 3df072eadb931700009fe3b922e1e499e6b92eb19810efd8329d5f98acfb229b

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-manylinux2014_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-manylinux2014_x86_64.whl
Algorithm Hash digest
SHA256 e0183449409a4acab1a0bb2b24cedf2582a40161ec1490c4c48e3501925dd5e9
MD5 7cc30e83dc1f49d10d6e8eb349ac2556
BLAKE2b-256 5a24a21c7d7f2f38a5d385b98d7eced6442dd7a32ccf911f4c777c509380c66f

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-manylinux2014_aarch64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-manylinux2014_aarch64.whl
Algorithm Hash digest
SHA256 d2c7323913bacbaabb845ca588e24733a674b72d9567a7f87c2b87284fa064dd
MD5 f903d0e11533ad5b3366d460a8bf2c05
BLAKE2b-256 d5e7f386cb84632023245662425740aeb1e0901bb9cd4b5a3efb5eab67c99ecd

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-macosx_11_0_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-macosx_11_0_x86_64.whl
Algorithm Hash digest
SHA256 ec6e596d88c3520e4fc818cd85c40911c23bdde2572f615b245dedd16d1914a2
MD5 3279ab5fc4275dcbb63bd97521e5aac8
BLAKE2b-256 36e5f0849d635fe7a1304f8e7ba14e0d3b98f545517ef3328215a39bbfde50e3

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-macosx_11_0_arm64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-macosx_11_0_arm64.whl
Algorithm Hash digest
SHA256 1a8896cdefc11d9361b2bfbdbbe2efcb64d500035e9a41715ed161e1acfcc254
MD5 e6247a615604906cfce955fa03032b38
BLAKE2b-256 4f3919fc20ebf3ed92951256b7081e82436ce780049742b4ca8b5b9c2b4812a3

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-macosx_10_9_x86_64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-macosx_10_9_x86_64.whl
Algorithm Hash digest
SHA256 9a9ffaf012da14365e6677cf558a96fefe6e2fda201709abed7fec76cbd1e48d
MD5 b367b43cc3e6384fcf0e56ca0b377012
BLAKE2b-256 73e25140cc8b0f0b035f2cb5d67b60ab32e95f484f71d4210120bfaf17fb5611

See more details on using hashes here.

File details

Details for the file fastapi_tailwind-2.0.3a1-py3-none-macosx_10_9_arm64.whl.

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.3a1-py3-none-macosx_10_9_arm64.whl
Algorithm Hash digest
SHA256 c305e081a59530fcd1dacf528f27d353ac5bac0a5d6f02a63715bb68765ecbd4
MD5 9a74d7f58afba315fdae399e7b0cb496
BLAKE2b-256 d5ae813e8a493f2f0f73ea543f55fff99bba0f4cb505a4d125f67b586f35ce03

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