https://github.com/vicsejas/fastapi-with-tailwindcss
How to setup FastAPI with TailwindCSS
https://github.com/vicsejas/fastapi-with-tailwindcss
example fastapi jinja2 tailwindcss tutorial
Last synced: 18 days ago
JSON representation
How to setup FastAPI with TailwindCSS
- Host: GitHub
- URL: https://github.com/vicsejas/fastapi-with-tailwindcss
- Owner: vicsejas
- Created: 2022-07-03T17:29:07.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T23:10:41.000Z (4 months ago)
- Last Synced: 2025-03-25T23:31:23.266Z (4 months ago)
- Topics: example, fastapi, jinja2, tailwindcss, tutorial
- Language: CSS
- Homepage:
- Size: 24.4 KB
- Stars: 38
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Updated FastAPI + Tailwind CSS v4.0 Example
Update for Tailwind CSS v4.0: A YouTube tutorial I've made for v4.0 can be found [here](https://youtu.be/T9c-S50t7Us).
Deprecated(for Tailwind CSS v3.0): A YouTube tutorial I've made for v3.0 can be found [here](https://youtu.be/yrEKYkIK-Fw).
Feel free to contact me on [x(twitter)](https://twitter.com/vicsejas). if you have any questions.
## Instructions
### 1.- Setup your FastAPI project
You need to install.
**FastAPI**
```sh
pip install fastapi
```
**ASGI Server**
```sh
pip install "uvicorn[standard]"
```
**Templating Engine**
For this example we will be using Jinja2.
```sh
pip install Jinja2
```
### 2.- Return HTML from your FastAPI route
**Create a "templates" folder in your project**
You need to create a new "templates" folder and create a "base.html" file inside.
```sh
mkdir templates && touch templates/base.html
```
now we will add some basic html.
```html
Document
```
**Add the TemplateResponse to your route response**
Now we need setup Jinja2Templates with our "templates" folder and return a TemplateResponse in our index route.
```python
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def index(request: Request):
return templates.TemplateResponse("base.html", {"request": request})
```
### 3.- Create a "tailwindcss" folder on your project
Here we will be adding the TailwindCSS files.
```sh
mkdir tailwindcss
```
### 4.- Install TailwindCSS
Start a new terminal inside your project folder and change the working directory to the "tailwindcss" folder.
```sh
cd tailwindcss
```
and then run the following command, with the package manager you'd like to use.
#### npm
```sh
npm install -D tailwindcss @tailwindcss/cli
```
#### pnpm
```sh
pnpm install -D tailwindcss @tailwindcss/cli
```
#### yarn
```sh
yarn add -D tailwindcss @tailwindcss/cli
```
### 5.- Create a new folder "styles" inside your tailwindcss folder
Here we will be adding our custom styles.
For that we need to create a new "styles" folder inside our "tailwindcss" folder.
```sh
mkdir styles
```
now we need to create a new file "app.css" inside this folder.
```sh
touch styles/app.css
```
then add the following directives.
```css
@import "tailwindcss";
@source "../../templates";
```
### 6.- Run the TailwindCSS CLI build process
This proccess will generate a "app.css" file inside a new "static/css" folder.
The "--watch" flag will make sure that the styles are updated every time you make a change in your files.
```sh
npx @tailwindcss/cli -i ./styles/app.css -o ../static/css/app.css --watch
```
### 7.- Add the TailwindCSS stylesheet to your base.html file
**Mount the static folder**
In order to mount this folder we need to add the following lines to our main.py file.
Import the static files.
```python
from fastapi.staticfiles import StaticFiles
```
Add the static folder to your app.
```python
app.mount("/static", StaticFiles(directory="static"), name="static")
```
Now we can add the stylesheet to our base.html file.
```html
```
### 8.- Serving compressed files with the GZip middleware
In order to serve compressed files we need to import the middleware.
add the middleware to your app.
```python
app.add_middleware(GZipMiddleware)
```
## Script for running the TailwindCSS CLI build process
We can create a script in the package.json file to run the TailwindCSS CLI build process.
```js
"scripts": {
"dev": "npx @tailwindcss/cli -i ./styles/app.css -o ../static/css/app.css --watch"
},
```
And then simply run.
#### npm
```sh
npm run dev
```
#### pnpm
```sh
pnpm dev
```
#### yarn
```sh
yarn dev
```
to run the Tailwind CSS build process.
Now you have Tailwind CSS v4.0 set up in your FastAPI project.