{"id":22837728,"url":"https://github.com/vicsejas/fastapi-with-tailwindcss","last_synced_at":"2025-06-24T22:38:38.342Z","repository":{"id":212877665,"uuid":"510090991","full_name":"vicsejas/fastapi-with-tailwindcss","owner":"vicsejas","description":"How to setup FastAPI with TailwindCSS","archived":false,"fork":false,"pushed_at":"2025-03-25T23:10:41.000Z","size":25,"stargazers_count":38,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T23:31:23.266Z","etag":null,"topics":["example","fastapi","jinja2","tailwindcss","tutorial"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vicsejas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-07-03T17:29:07.000Z","updated_at":"2025-03-25T23:10:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"e47ff5ec-8605-4341-8755-0c29b8f8805d","html_url":"https://github.com/vicsejas/fastapi-with-tailwindcss","commit_stats":null,"previous_names":["vicsejas/fastapi-with-tailwindcss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicsejas%2Ffastapi-with-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicsejas%2Ffastapi-with-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicsejas%2Ffastapi-with-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicsejas%2Ffastapi-with-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vicsejas","download_url":"https://codeload.github.com/vicsejas/fastapi-with-tailwindcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250554477,"owners_count":21449624,"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":["example","fastapi","jinja2","tailwindcss","tutorial"],"created_at":"2024-12-12T23:17:39.601Z","updated_at":"2025-04-24T03:27:57.797Z","avatar_url":"https://github.com/vicsejas.png","language":"CSS","readme":"# Updated FastAPI + Tailwind CSS v4.0 Example\n\nUpdate for Tailwind CSS v4.0: A YouTube tutorial I've made for v4.0 can be found [here](https://youtu.be/T9c-S50t7Us).\n\nDeprecated(for Tailwind CSS v3.0): A YouTube tutorial I've made for v3.0 can be found [here](https://youtu.be/yrEKYkIK-Fw).\n\nFeel free to contact me on [x(twitter)](https://twitter.com/vicsejas). if you have any questions.\n\n## Instructions\n\n### 1.- Setup your FastAPI project\n\nYou need to install.\n\n**FastAPI**\n\n```sh\npip install fastapi\n```\n\n**ASGI Server**\n\n```sh\npip install \"uvicorn[standard]\"\n```\n\n**Templating Engine**\n\nFor this example we will be using Jinja2.\n\n```sh\npip install Jinja2\n```\n\n### 2.- Return HTML from your FastAPI route\n\n**Create a \"templates\" folder in your project**\n\nYou need to create a new \"templates\" folder and create a \"base.html\" file inside.\n\n```sh\nmkdir templates \u0026\u0026 touch templates/base.html\n```\n\nnow we will add some basic html.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Add the TemplateResponse to your route response**\n\nNow we need setup Jinja2Templates with our \"templates\" folder and return a TemplateResponse in our index route.\n\n```python\nfrom fastapi import FastAPI, Request\nfrom fastapi.templating import Jinja2Templates\n\napp = FastAPI()\n\ntemplates = Jinja2Templates(directory=\"templates\")\n\n@app.get(\"/\")\nasync def index(request: Request):\n    return templates.TemplateResponse(\"base.html\", {\"request\": request})\n```\n\n### 3.- Create a \"tailwindcss\" folder on your project\n\nHere we will be adding the TailwindCSS files.\n\n```sh\nmkdir tailwindcss\n```\n\n### 4.- Install TailwindCSS\n\nStart a new terminal inside your project folder and change the working directory to the \"tailwindcss\" folder.\n\n```sh\ncd tailwindcss\n```\n\nand then run the following command, with the package manager you'd like to use.\n\n#### npm\n\n```sh\nnpm install -D tailwindcss @tailwindcss/cli \n```\n\n#### pnpm\n\n```sh\npnpm install -D tailwindcss @tailwindcss/cli \n```\n\n#### yarn\n\n```sh\nyarn add -D tailwindcss @tailwindcss/cli\n```\n\n### 5.- Create a new folder \"styles\" inside your tailwindcss folder\n\nHere we will be adding our custom styles.\n\nFor that we need to create a new \"styles\" folder inside our \"tailwindcss\" folder.\n\n```sh\nmkdir styles\n```\n\nnow we need to create a new file \"app.css\" inside this folder.\n\n```sh\ntouch styles/app.css\n```\n\nthen add the following directives.\n\n```css\n@import \"tailwindcss\";\n@source \"../../templates\";\n```\n\n### 6.- Run the TailwindCSS CLI build process\n\nThis proccess will generate a \"app.css\" file inside a new \"static/css\" folder.\n\nThe \"--watch\" flag will make sure that the styles are updated every time you make a change in your files.\n\n```sh\nnpx @tailwindcss/cli -i ./styles/app.css -o ../static/css/app.css --watch\n```\n\n### 7.- Add the TailwindCSS stylesheet to your base.html file\n\n**Mount the static folder**\n\nIn order to mount this folder we need to add the following lines to our main.py file.\n\nImport the static files.\n\n```python\nfrom fastapi.staticfiles import StaticFiles\n```\n\nAdd the static folder to your app.\n\n```python\napp.mount(\"/static\", StaticFiles(directory=\"static\"), name=\"static\")\n```\n\nNow we can add the stylesheet to our base.html file.\n\n```html\n\u003clink href=\"{{url_for('static',path='/css/app.css')}}\" rel=\"stylesheet\" /\u003e\n```\n\n### 8.- Serving compressed files with the GZip middleware\n\nIn order to serve compressed files we need to import the middleware.\n\nadd the middleware to your app.\n\n```python\napp.add_middleware(GZipMiddleware)\n```\n\n## Script for running the TailwindCSS CLI build process\n\nWe can create a script in the package.json file to run the TailwindCSS CLI build process.\n\n```js\n\"scripts\": {\n    \"dev\": \"npx @tailwindcss/cli -i ./styles/app.css -o ../static/css/app.css --watch\"\n},\n```\n\nAnd then simply run.\n\n#### npm\n\n```sh\nnpm run dev\n```\n\n#### pnpm\n\n```sh\npnpm dev\n```\n\n#### yarn\n\n```sh\nyarn dev\n```\n\nto run the Tailwind CSS build process.\n\nNow you have Tailwind CSS v4.0 set up in your FastAPI project.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicsejas%2Ffastapi-with-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvicsejas%2Ffastapi-with-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicsejas%2Ffastapi-with-tailwindcss/lists"}