Skip to content

Commit 882834c

Browse files
fix(build): issue with processing files with Tailwind via Docker (#4831)
# Motivation ## Problem After migrating to Tailwind 4, building OISY via Docker was no longer possible due to the issue on the screenshot below. Investigation showed that there was a problem with transforming files that contain tailwind classes. [The function that was throwing the error](https://github.com/tailwindlabs/tailwindcss/blob/main/crates/oxide/src/scanner/allowed_paths.rs#L111) implied that we somehow try to parse some unexpected by tailwind files. Also, there were [some complains](tailwindlabs/tailwindcss#15987) on the exact same issue recently. <img width="573" alt="Screenshot 2025-02-19 at 18 28 41" src="https://github.com/user-attachments/assets/b8be362a-3d52-44b8-ab4a-bfa3cdef2641" /> ## Solution Apparently, the previous way of specifying content for parsing in Tailwind.config file doesn't work in the 4th version. Instead, we need to set [the base path](https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path) when importing tailwindcss module. After adding the `source` directive, `npm run build` works in both local and Docker environment. Also, it explains why we suddenly started seeing CSS warning that were coming from `e2e` folder - Tailwind was trying to process files outside of `src`.
1 parent 5ce1382 commit 882834c

File tree

1 file changed

+3
-2
lines changed

1 file changed

+3
-2
lines changed

src/frontend/src/lib/styles/global.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
// We explicitly need to import Tailwind with a plain CSS @import as described in their documentation.
44
// Trying to import it with Sass — such as using @use — leads to reproducibility issues.
5-
@import 'tailwindcss';
6-
5+
// Additionally, we need to explicitly set the base path in order to avoid issues with building the app via Docker.
6+
/* prettier-ignore */
7+
@import 'tailwindcss' source("../../../../../src");
78
@config '../../../../../tailwind.config.ts';
89

910
@layer base {

0 commit comments

Comments
 (0)