{"id":14970942,"url":"https://github.com/thegoldenpro/fastapi-tailwind","last_synced_at":"2025-10-30T01:31:38.393Z","repository":{"id":253027027,"uuid":"841744012","full_name":"THEGOLDENPRO/fastapi-tailwind","owner":"THEGOLDENPRO","description":"✨ TailwindCSS support for 🔥 FastAPI without NodeJS.","archived":false,"fork":false,"pushed_at":"2024-09-04T20:37:38.000Z","size":122105,"stargazers_count":3,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-12T04:21:03.109Z","etag":null,"topics":["fastapi","fastapi-framework","tailwind","tailwind-css","tailwindcss","tailwindcss-fastapi"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/fastapi-tailwind","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/THEGOLDENPRO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-13T00:48:32.000Z","updated_at":"2024-09-04T21:54:02.000Z","dependencies_parsed_at":"2024-08-22T01:29:16.062Z","dependency_job_id":null,"html_url":"https://github.com/THEGOLDENPRO/fastapi-tailwind","commit_stats":null,"previous_names":["thegoldenpro/fastapi-tailwind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEGOLDENPRO%2Ffastapi-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEGOLDENPRO%2Ffastapi-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEGOLDENPRO%2Ffastapi-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEGOLDENPRO%2Ffastapi-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/THEGOLDENPRO","download_url":"https://codeload.github.com/THEGOLDENPRO/fastapi-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219856963,"owners_count":16556075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fastapi","fastapi-framework","tailwind","tailwind-css","tailwindcss","tailwindcss-fastapi"],"created_at":"2024-09-24T13:44:23.675Z","updated_at":"2025-10-30T01:31:38.381Z","avatar_url":"https://github.com/THEGOLDENPRO.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  # ✨ 🔥 fastapi-tailwind\n\n  \u003csub\u003eStreamlined approach for adding TailwindCSS V4 to FastAPI **without** NodeJS.\u003c/sub\u003e\n\n  [![Pypi Version](https://img.shields.io/pypi/v/fastapi-tailwind?style=flat)](https://pypi.org/project/fastapi-tailwind/)\n  [![Python Versions](https://img.shields.io/pypi/dm/fastapi-tailwind?color=informational\u0026label=pypi%20downloads)](https://pypistats.org/packages/fastapi-tailwind)\n  [![Pypi Downloads](https://img.shields.io/pypi/pyversions/fastapi-tailwind?style=flat)](https://pypi.org/project/fastapi-tailwind/)\n\n  \u003cimg src=\"./assets/heart_banner_cropped.png\"\u003e\n\n\u003c/div\u003e\n\n\u003e [!WARNING]\n\u003e Currently in alpha phase so expect bugs but do report them please. 🙏\n\n## Features ✨\n- [x] Zero dependencies 🪶\n- [x] Auto watch when in dev mode. 🔎\n- [x] Doesn't require NodeJS and NPM. 🫧🪥\n- [x] Seemless integration into the FastAPI codebase. 🥂\n- [ ] GZIP automatically configured to [compress TailwindCSS](https://v2.tailwindcss.com/docs/controlling-file-size) out of the box. ⚡\n\n## How to add?\n\u003e [!NOTE]\n\u003e 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).\n\u003e\n\u003e If you're using Windows you can still replicate these commands via a file explorer.\n\n1. Install the pypi package.\n```sh\npip install fastapi-tailwind\n```\n2. Edit your FastAPI APP.\n\nBefore:\n```python\nfrom fastapi import FastAPI\nfrom fastapi.responses import FileResponse\nfrom fastapi.staticfiles import StaticFiles\n\napp = FastAPI()\n\n@app.get(\"/\")\ndef index():\n    return FileResponse(\"./index.html\")\n\napp.mount(\"/static\", StaticFiles(directory = \"static\"), name = \"static\")\n```\n\nAfter:\n```python\n# main.py\n\nfrom fastapi import FastAPI\nfrom fastapi.responses import FileResponse\nfrom fastapi.staticfiles import StaticFiles\n\nfrom fastapi_tailwind import tailwind\nfrom contextlib import asynccontextmanager\n\nstatic_files = StaticFiles(directory = \"static\")\n\n@asynccontextmanager\nasync def lifespan(app: FastAPI):\n    # YAY, our tailwind get's compiled here! 😄\n    process = tailwind.compile(\n        static_files.directory + \"/output.css\",\n        tailwind_stylesheet_path = \"./input.css\"\n    )\n\n    yield # The code after this is called on shutdown.\n\n    process.terminate() # We must terminate the compiler on shutdown to\n    # prevent multiple compilers running in development mode or when watch is enabled.\n\napp = FastAPI(\n    # See the fastapi documentation for an explanation on lifespans: https://fastapi.tiangolo.com/advanced/events/\n    lifespan = lifespan\n)\n\n@app.get(\"/\")\ndef index():\n    return FileResponse(\"./index.html\")\n\n# We need somewhere to drop the compiled stylesheet so our html file can link it.\napp.mount(\"/static\", static_files, name = \"static\")\n```\n\n3. Make sure the `static` folder exists and create a `input.css` file ([in v4 this is now used for configuration](https://tailwindcss.com/docs/upgrade-guide)).\n```sh\nmkdir ./static\ntouch input.css\n```\n\n4. Open `input.css` and write `@import \"tailwindcss;` in the file or just run this command:\n```sh\necho '@import \"tailwindcss\";' \u003e input.css\n```\n\n\u003e ### VSCode TailwindCSS Intellisense FIX!\n\u003e There is currently [a bug in the vscode tailwindcss extension](https://github.com/tailwindlabs/tailwindcss/discussions/15132) 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).\n\u003e\n\u003e 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:\n\u003e ```json\n\u003e {\n\u003e     \"tailwindCSS.experimental.configFile\": \"./input.css\"\n\u003e }\n\u003e ```\n\u003e\n\u003e That should fix that issue.\n\n5. Now write your tailwind css in your `index.html`.\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003e✨ Tailwind in 🔥 FastAPI\u003c/title\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"/static/output.css\"\u003e\n\u003c/head\u003e\n\u003cbody class=\"bg-slate-950\"\u003e\n    \u003ch1 class=\"mt-10 text-center text-6xl font-bold text-red-400\"\u003e👋 Hello ✨ Tailwind!\u003c/h1\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n6. Then run FastAPI and visit your site. It should be gucci. ✨\n```sh\nfastapi dev main.py\n```\n\u003cdiv align=\"center\"\u003e\n\n  \u003cimg width=\"800px\" src=\"./assets/example_page_showcase.png\"\u003e\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegoldenpro%2Ffastapi-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthegoldenpro%2Ffastapi-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegoldenpro%2Ffastapi-tailwind/lists"}