Skip to content

Commit 667f806

Browse files
fix(website): explicitly source src/ for Tailwind class detection (#6617)
## Problem Tailwind v4's automatic content detection **skips files matched by `.gitignore`**. In this repo all website source files are tracked, so detection works regardless and styling looks correct. But in downstream overlays — notably **Pathoplexus** — the website source is synced in via `sync.sh` and every synced path is listed in `monorepo/.gitignore` (so the overlay repo doesn't commit upstream files). As a result, Tailwind's auto-detection skips ~all of those source files and only generates the utilities it can find in the handful of non-ignored files. Concretely, in a fresh Pathoplexus local dev setup this dropped generated utilities from ~811 to ~380 — roughly half the classes missing (`bg-gray-100`, `animate-spin`, `border-b`, margins, etc.) — leaving the site visibly unstyled. The existing `@source '../../.flowbite-react/class-list.json'` line kept working *despite* `.flowbite-react/` being gitignored, which is the tell: an **explicit `@source`** bypasses the gitignore filter. ## Fix Add an explicit `@source` glob for the website source tree: ```css @source '../**/*.{astro,html,js,jsx,ts,tsx,vue,svelte,md,mdx}'; ``` - **No-op for this repo** — these files are already auto-detected here, so generated CSS is unchanged. - **Fixes downstream overlays** (Pathoplexus) where the files are gitignored — the explicit glob is scanned regardless, restoring full styling. ### Why a glob, not a directory A bare `@source '../'` does **not** help: a directory source still runs through Tailwind's automatic detection, which re-applies the gitignore filter. Only an explicit glob pattern bypasses it. ## Verification Reproduced against a fresh Pathoplexus local checkout: with the fix, generated utility selectors went from 380 → 862 and the previously-missing classes (`animate-spin`, `bg-gray-100`, `border-b`, `bg-primary-600`, …) are all present. Loculus's own generated CSS is unchanged. 🤖 Generated with [Claude Code](https://claude.com/claude-code) 🚀 Preview: https://tailwind-source-fix.loculus.org Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent c0abf70 commit 667f806

1 file changed

Lines changed: 11 additions & 0 deletions

File tree

website/src/styles/base.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
@import 'tailwindcss';
22
@import 'flowbite-react/plugin/tailwindcss';
33
@source '../../.flowbite-react/class-list.json';
4+
/*
5+
* Explicitly source the website source tree. Tailwind v4's automatic content
6+
* detection skips files matched by `.gitignore`. In this repo those files are
7+
* tracked, so detection works either way -- but in downstream overlays such as
8+
* Pathoplexus the website source is synced in and listed in `.gitignore`, which
9+
* makes automatic detection skip it and silently drops ~half the utility
10+
* classes. An explicit `@source` glob bypasses the gitignore filter, so styling
11+
* is correct in both setups. (A bare `@source '../'` does NOT help -- a
12+
* directory source still re-applies the gitignore filter; the glob is required.)
13+
*/
14+
@source '../**/*.{astro,html,js,jsx,ts,tsx,vue,svelte,md,mdx}';
415

516
@custom-variant dark (&:where(.dark, .dark *));
617

0 commit comments

Comments
 (0)