✨ 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)
  • 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)
  • Author: Goldy
  • Tags tailwindcss , tailwind , fastapi , fastapi middleware , tailwindcss v4
  • Requires: Python >=3.8
  • Provides-Extra: dev
Classifiers

Release history Release notifications | RSS feed

This version

2.0.4a1 pre-release

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

Uploaded Python 3Windows x86-64

fastapi_tailwind-2.0.4a1-py3-none-musllinux_1_2_x86_64.whl (42.3 MB view details)

Uploaded Python 3musllinux: musl 1.2+ x86-64

fastapi_tailwind-2.0.4a1-py3-none-musllinux_1_2_aarch64.whl (40.8 MB view details)

Uploaded Python 3musllinux: musl 1.2+ ARM64

fastapi_tailwind-2.0.4a1-py3-none-manylinux2014_x86_64.whl (44.7 MB view details)

Uploaded Python 3

fastapi_tailwind-2.0.4a1-py3-none-manylinux2014_aarch64.whl (42.9 MB view details)

Uploaded Python 3

fastapi_tailwind-2.0.4a1-py3-none-macosx_11_0_x86_64.whl (29.0 MB view details)

Uploaded Python 3macOS 11.0+ x86-64

fastapi_tailwind-2.0.4a1-py3-none-macosx_11_0_arm64.whl (27.4 MB view details)

Uploaded Python 3macOS 11.0+ ARM64

fastapi_tailwind-2.0.4a1-py3-none-macosx_10_9_x86_64.whl (29.0 MB view details)

Uploaded Python 3macOS 10.9+ x86-64

fastapi_tailwind-2.0.4a1-py3-none-macosx_10_9_arm64.whl (27.4 MB view details)

Uploaded Python 3macOS 10.9+ ARM64

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-win_amd64.whl
Algorithm Hash digest
SHA256 374cc85380e7030e1a12dc7e0b73b65c0ca504d573f0209b2b6f41294b313c69
MD5 3a215fbe933898f2f5774692f056085f
BLAKE2b-256 2676a857b0407ce71a43ce15683383d99eac0167f61294e6387c524b9abfd7f9

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-musllinux_1_2_x86_64.whl
Algorithm Hash digest
SHA256 3934b63e2bf23b42a3cdf6b97a8f17d2ff3ac20d7a011f054e2d6cc8287cd4ce
MD5 82ee44f75f0643e8ff8a36b5d0a74ae6
BLAKE2b-256 9536aa5a939b31bf88bf48f18bbeb2ca7bbb31d28b96fd7235093f8c59c92cb0

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-musllinux_1_2_aarch64.whl
Algorithm Hash digest
SHA256 5e16efe827ba44d45a59b195d59a6f17d120cb4394069477e831fbd574802fcc
MD5 83ea6d48c799f72c7cace3dbb13f7f41
BLAKE2b-256 9424c050046ab35d06959e1144615d5ffdc1707af197886e63b35ce6f46adbd7

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-manylinux2014_x86_64.whl
Algorithm Hash digest
SHA256 1d72cb949c7f509e67e0424daee365b4640e7c1a087f29430d643468bc41376c
MD5 8d79cefffac655501a476e05648d7f34
BLAKE2b-256 fed9e11c8b37d9298119769bb8dabdd2b1e186434c1514049a12985eb71d65d1

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-manylinux2014_aarch64.whl
Algorithm Hash digest
SHA256 3156edfff1a1375ef0b825267f793fa0eabf68c9c0ff36535ccadc5a99bfe416
MD5 71ac12c4fcac77406804045e40e2fab2
BLAKE2b-256 41678f5b2fcbcc646de44244528a654b52bda6677fc3b51030b62274e15285eb

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-macosx_11_0_x86_64.whl
Algorithm Hash digest
SHA256 41f6ca75d3b2b8f71ae79f8e43df7827d13fce97cf2d1eef1349aba5d8ae34fa
MD5 3b64023c3776842500b16b26c7983d6c
BLAKE2b-256 2eeafffb59b7fb84c73434a58faddf82ebeeb362656c25f1dc75d17ad49afa60

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-macosx_11_0_arm64.whl
Algorithm Hash digest
SHA256 7fface9db6e857c4f6fee911d105ad8fc122182c49b47a9eca1c69402b8fa4aa
MD5 cbf69671f57e76a5292943a4d329e8d6
BLAKE2b-256 228d7181b1082b8543c19e55fc7b984aebae41b6ea8a935dc5d8425c4fd88932

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-macosx_10_9_x86_64.whl
Algorithm Hash digest
SHA256 9b7d6a353fcd3ce2801d3fab92ea4c6aa885fd5fc8f422995d6dc9ba301f0bec
MD5 a9a145b8f27096658d935646d95a196b
BLAKE2b-256 0b5d54e1b4abe96a713b187519246f92c4d006b3e6b1c4fdc6729cb3ad5f3fbf

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for fastapi_tailwind-2.0.4a1-py3-none-macosx_10_9_arm64.whl
Algorithm Hash digest
SHA256 f66285ed4110c70eb8f76fe79babbfdee0f9347ad3772361aa98bc5840bc824a
MD5 861490e5f61030fbaad1cff26551fe88
BLAKE2b-256 8f2565d75ea5755f6bb434792c65b6dc5a3bfd431337c534bb69062061c47769

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