[v4] flex-col not working on 4.0.2 and 4.0.3 in SSR mode via the vite starter templates #16148
Comments
|
Followed your steps and it seems to be working: https://github.com/wongjn/tailwindcss-issue-16148 Consider providing a project that reproduces the unexpected behavior please. |
|
@wongjn please open this stackblitz (it doesn't work in stackblitz at all) then
Let me know if you encounter any issue. |
|
I don't see where you've used |
|
|
|
Sorry, I don't see that my end:
|
|
Ok I think stackblitz won't give you the right code. |
|
@wongjn let me know if you need anything else. Please confirm. |
|
Thank you. It seems like Tailwind isn't compiling any class names sourced from the |
|
I suspect it has to do with the vite-plugin, but I'm not sure, the thing is only dev mode seems to fail, and this problem wasn't present with 4.0.0 and 4.0.1. |
|
Seems like it might be a regression from #16052 which introduced this check: tailwindcss/packages/@tailwindcss-vite/src/index.ts Lines 202 to 207 in b7c3f50 When debugging, I find that |
|
Testing with a "normal" Vite project, I see that in // url = '/index.html'
// html = '<!doctype html>\n…'
// req.originalUrl = '/'
server.transformIndexHtml(url, html, req.originalUrl)But in your // url = ''
// template = = '<!DOCTYPE html>\n…'
// url = ''
template = await vite.transformIndexHtml(url, template, url)This then causes the check for a non-empty path to fail in: tailwindcss/packages/@tailwindcss-vite/src/index.ts Lines 202 to 207 in b7c3f50 Thus Tailwind does not scan your As a work-around, you may wish to consider emulating the parameter values to pass to |
|
Indeed, I've added this, const url = req.originalUrl.replace(base, "") || "/";
// __________________________________________ ^^^^^updated to latest tailwind and boom, magic is going on! THANK YOU!! |
I've successfully updated one of my projects to v4.0 and after updating to 4.0.2 flex-col is no longer working in SSR dev mode.
What version of Tailwind CSS are you using?
4.0.2 and 4.0.3
What build tool (or framework if it abstracts the build tool) are you using?
only vite and the tailwind vite plugin.
What version of Node.js are you using?
using a vanillaJS setup.
What browser are you using?
Chromium
What operating system are you using?
Linux
Reproduction URL
install any vite starter template and drop tailwindcss and vite plugin.
Describe your issue
Again,
flex-colisn't working in DEV mode (npm run dev) since 4.0.2, but it does seem to work in 4.0.0 and 4.0.1.The text was updated successfully, but these errors were encountered: