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

[oezguerisbert]

Duplicates

• I have searched the existing issues

Latest version

• 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

4. Click on one of the links to move to another path
5. TailwindCSS is present anymore.
6. 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.