tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

[V4] Module dection not working in solid start

Open feledori opened this issue 3 months ago • 4 comments

What version of Tailwind CSS are you using?

v4.0.0-alpha.7

What build tool (or framework if it abstracts the build tool) are you using?

[email protected], [email protected]

What version of Node.js are you using?

v20.11.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Stackblitz Repro

Sadly not startable in a webcontainer as it can't load native addons but this is the minimal repro.

Describe your issue

As the new vite plugin analyzes the module graph it can't detect solid starts routes. Because solid supplies a FileRoutes component which determines what to display. This probably won't notify tailwind plugin about the files. You can see in the repro that Nav gets styled as it is directly imported, but anything in routes which gets added during compile won't be styled.

feledori avatar Mar 11 '24 11:03 feledori

Maybe a config for the vite plugin could solve this. Like suppling an options object:

{
 "outsideModuleGraph": "./src/routes/**/*.{ts,tsx,js,jsx}"
}

feledori avatar Mar 11 '24 11:03 feledori

I tried a few things today with similar issues. The main one being the error:

[!caution] Could not find css module ${pathToCssFileWhereTailwindIsImported} (which is rendered multiple times) This tends happen on initial start of the server.

When editing the file where tailwind is imported it seems the module is invalidated and the tailwind styles are applied. Even when not having any tw-specific classes in one of the routes, the preflight should be at least applied, right? This is not happening for me either.

Might this also be an issue with vinxi? (noticed server.moduleGraph is null at start, which might be a execution timing issue 🤷‍♂️)

https://github.com/tailwindlabs/tailwindcss/blob/388d1b02984660249b16f392099f5c359615aabf/packages/%40tailwindcss-vite/src/index.ts#L25

oddcelot avatar Mar 11 '24 17:03 oddcelot

Small update The error Could not find css module ${pathToCssFileWhereTailwindIsImported} seems fixed with https://github.com/tailwindlabs/tailwindcss/commit/8123fa513a2749a5a9cac325a0f0a55dc0219138 in v4.0.0-alpha.8

oddcelot avatar Mar 13 '24 07:03 oddcelot

Just made the suggested change @oddcelot and the styling issue is gone.

AirBorne04 avatar Mar 24 '24 13:03 AirBorne04