Skip to content

Commit 6deb664

Browse files
THEGOLDENPROTHEGOLDENPRO
authored
Merge pull request #8 from THEGOLDENPRO/feat/tailwind-v4
Feat/tailwind v4
2 parents 7976814 + b79bc6e commit 6deb664

28 files changed

+447
-233
lines changed

‎.github/workflows/cross_platform_pytest.yaml

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
name: Pytest (Cross platform)
2+
3+
on: [push, workflow_dispatch]
4+
5+
jobs:
6+
7+
linux_test:
8+
runs-on: ubuntu-latest
9+
10+
strategy:
11+
matrix:
12+
python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
13+
14+
steps:
15+
- uses: actions/checkout@v4
16+
17+
- name: Set up Python ${{ matrix.python-version }} for Linux
18+
uses: actions/setup-python@v4
19+
with:
20+
python-version: ${{ matrix.python-version }}
21+
22+
- name: Install dependencies
23+
run: pip install -e .[dev] --config-settings editable_mode=compat
24+
25+
- name: Install tailwind binary
26+
run: |
27+
python scripts/binary.py pull linux-x64
28+
python scripts/binary.py select linux-x64
29+
30+
- name: Run ruff and pytest
31+
run: |
32+
ruff check .
33+
pytest -v
34+
35+
macos_test:
36+
runs-on: macos-latest
37+
38+
strategy:
39+
matrix:
40+
python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
41+
42+
steps:
43+
- uses: actions/checkout@v4
44+
45+
- name: Set up Python ${{ matrix.python-version }} for MacOS
46+
uses: actions/setup-python@v4
47+
with:
48+
python-version: ${{ matrix.python-version }}
49+
50+
- name: Install dependencies
51+
run: pip install -e .[dev] --config-settings editable_mode=compat
52+
53+
- name: Install tailwind binary
54+
run: |
55+
python scripts/binary.py pull macos-arm64
56+
python scripts/binary.py select macos-arm64
57+
58+
- name: Run ruff and pytest
59+
run: |
60+
ruff check .
61+
pytest -v
62+
63+
windows_test:
64+
runs-on: windows-latest
65+
66+
strategy:
67+
matrix:
68+
python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
69+
70+
steps:
71+
- uses: actions/checkout@v4
72+
73+
- name: Set up Python ${{ matrix.python-version }} for Windows
74+
uses: actions/setup-python@v4
75+
with:
76+
python-version: ${{ matrix.python-version }}
77+
78+
- name: Install dependencies
79+
run: pip install -e .[dev] --config-settings editable_mode=compat
80+
81+
- name: Install tailwind binary
82+
run: |
83+
python scripts/binary.py pull windows-x64
84+
python scripts/binary.py select windows-x64
85+
86+
- name: Run ruff and pytest
87+
run: |
88+
ruff check .
89+
pytest -v

‎.gitignore

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,12 @@ build
55
output.css
66
dist
77
.ruff_cache
8-
custom_build
8+
custom_build
9+
binary_stash
10+
.pytest_cache
11+
12+
fastapi_tailwind/binary/*
13+
!fastapi_tailwind/binary/.gitkeep
14+
15+
# old bin folder
16+
fastapi_tailwind/binaries/*

‎Makefile

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ PIP = pip
44
PYTHON = python
55

66
build:
7-
${PYTHON} -m build
8-
9-
install:
10-
${PIP} install . -U
7+
${PYTHON} scripts/multi_build.py
118

129
install-editable:
1310
${PIP} install -e .[dev] --config-settings editable_mode=compat
1411

1512
test:
16-
ruff check .
13+
ruff check .
14+
pytest -v

‎README.md

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# ✨ 🔥 fastapi-tailwind
44

5-
<sub>Streamlined approach for adding TailwindCSS to FastAPI **without** NodeJS.</sub>
5+
<sub>Streamlined approach for adding TailwindCSS V4 to FastAPI **without** NodeJS.</sub>
66

77
[![Pypi Version](https://img.shields.io/pypi/v/fastapi-tailwind?style=flat)](https://pypi.org/project/fastapi-tailwind/)
88
[![Python Versions](https://img.shields.io/pypi/dm/fastapi-tailwind?color=informational&label=pypi%20downloads)](https://pypistats.org/packages/fastapi-tailwind)
@@ -13,21 +13,19 @@
1313
</div>
1414

1515
> [!WARNING]
16-
> Currently in testing phase so expect bugs but do report them please. 🙏
17-
18-
> [!NOTE]
19-
> This library currently only ships with the **`v3`** release of tailwindcss but I'll soon update it to **`v4`**.
20-
> You can track the progress with the [#7](https://github.com/THEGOLDENPRO/fastapi-tailwind/issues/7) issue.
16+
> Currently in alpha phase so expect bugs but do report them please. 🙏
2117
2218
## Features ✨
2319
- [x] Auto watch when in dev mode. 🔎
2420
- [x] Doesn't require NodeJS and NPM. 🫧🪥
2521
- [x] Seemless integration into the FastAPI codebase. 🥂
26-
- [ ] GZIP automatically configured to [compress TailwindCSS](https://v1.tailwindcss.com/docs/controlling-file-size) out of the box. ⚡
22+
- [ ] GZIP automatically configured to [compress TailwindCSS](https://v2.tailwindcss.com/docs/controlling-file-size) out of the box. ⚡
2723

2824
## How to add?
2925
> [!NOTE]
30-
> These instructions assume you have a somewhat intermediate understanding of FastAPI and that you've used TailwindCSS before (if you haven't be sure to read the documentation I link in tailwind stages) as I may assume some things.
26+
> 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).
27+
>
28+
> If you're using Windows you can still replicate these commands via a file explorer.
3129
3230
1. Install the pypi package.
3331
```sh
@@ -86,15 +84,30 @@ def index():
8684
app.mount("/static", static_files, name = "static")
8785
```
8886

89-
3. Make sure the `static` folder exists.
87+
3. 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)).
9088
```sh
9189
mkdir ./static
90+
touch input.css
9291
```
93-
4. Generate `tailwind.config.js`, then [configure it](https://tailwindcss.com/docs/configuration) appropriately.
92+
93+
4. Open `input.css` and write `@import "tailwindcss;` in the file or just run this command:
9494
```sh
95-
fastapi-tailwind-init
95+
echo '@import "tailwindcss";' > input.css
9696
```
97-
5. Write your tailwind css in `index.html`.
97+
98+
> ### VSCode TailwindCSS Intellisense FIX!
99+
> 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).
100+
>
101+
> 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:
102+
> ```json
103+
> {
104+
> "tailwindCSS.experimental.configFile": "./input.css"
105+
> }
106+
> ```
107+
>
108+
> That should fix that issue.
109+
110+
5. Now write your tailwind css in your `index.html`.
98111
```html
99112
<!DOCTYPE html>
100113
<html lang="en">
@@ -110,7 +123,7 @@ fastapi-tailwind-init
110123
</body>
111124
</html>
112125
```
113-
6. Run FastAPI and visit your site.
126+
6. Then run FastAPI and visit your site. It should be gucci. ✨
114127
```sh
115128
fastapi dev main.py
116129
```

‎examples/hello-world-app/.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"tailwindCSS.experimental.configFile": "./input.css"
3+
}

0 commit comments

Comments
 (0)