[Bug?]: TailwindCSS is being unloaded on route change

[oezguerisbert]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I made a small video here, where I showcase the bug I am facing. I have a project that uses the latest version of @solidjs/start and @solidjs/router, and I attach the root.css file to the app.tsx file, so that the App should be able to use tailwindcss. When I click on a link from the A (import { A } from "@solidjs/router") Component, TailwindCSS is not present anymore.

Here is the gist of the file contents. I can't share the full repository due to credentials I have to clean up.

Note: The TailwindCSS example (from the example folder) is working as expected.

I am not sure what causes this bug to occur.

Expected behavior 🤔

I expected that the assets that are being prefetched are present (such as the tailwindcss from the imported root.css).

Steps to reproduce 🕹

As annoying as it may sound, you'll have to use the Gist to copy paste the important parts of the project.

Steps:

1. Copy file contents form the gist
2. My folder structure looks something like this (I stripped down not needed/unnecessary files):

   ├── app.tsx
   ├── components
   │   ├── providers
   │   │   └── index.tsx
   │   ├── PublicBlog.tsx
   │   ├── PublicProject.tsx
   ├── entry-client.tsx
   ├── entry-server.tsx
   ├── global.d.ts
   ├── root.css
   ├── routes
   │   ├── [...404].tsx
   │   ├── blog
   │   │   ├── create.tsx
   │   │   └── [id]
   │   │       └── index.tsx
   │   ├── index.tsx
   │   └── project
   │       ├── create.tsx
   │       └── [id]
   │           ├── configure.tsx
   │           └── index.tsx
   └── utils
   ├── api
   │   ├── blog.ts
   │   ├── mutations.ts
   │   ├── project.ts
   │   ├── queries.ts
   │   └── session.ts
   └── cn.ts

3. Click on one of the links to move to another path
4. TailwindCSS is present anymore.
5. Refreshing helps to have TailwindCSS again.

Context 🔦

I would like to have TailwindCSS across every page, without having to refresh the page, I want to have the ability to design the pages and components without constantly refreshing the pages.

Your environment 🌎

Node: v20.9.0
PNPM: 8.14.1

"@solidjs/router": "0.10.9"
"@solidjs/start": "0.4.10"
"solid-js": "1.8.11"
"vinxi": "^0.1.4"

[ryansolid]

If someone wants to spend the time frankensteining this into a working reproduction I'd be stoked. Otherwise there are a lot of other deps and things here and I'm not sure when I'd get around to it.

[aseerkt]

@oezguerisbert I am not seeing src directory in your folder structure.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [
    // default prefix is "ui"
    require("@kobalte/tailwindcss"),
    require("@tailwindcss/typography"),
  ],
};

As you can see here tailwindcss styles are only applied to the files mentioned in content

[oezguerisbert]

Sorry if I bring this comment up later than I should've. This issue is not occurring anymore with the latest version.