Tailwind in blazor web assembly dotnet 9

[Kroplewski-M]

Hi, i recently upgraded my webassembly project from dotnet 8 to 9 and my tailwind stopped working.
I originally just used npx tailwindcss init.
This does not work now as I updated Tailwind.
So i did

npm install @tailwindcss/cli
npx @tailwindcss/cli init 

this worked when i ran the command npx @tailwindcss/cli -i ./wwwroot/css/app.css -o ./wwwroot/css/min.css --watch
However my tailwind.config.js file wasnt being added in as none of my custom colors or animations were being added.
So i ran this command that chatgpt supplied:
npx @tailwindcss/cli -i ./wwwroot/css/app.css -o ./wwwroot/css/min.css --config ./tailwind.config.js --watch
yet it still doesnt work. Does anyone know a fix for this?
Thanks.

Ps - i also updated my main css file to only have: @import "tailwindcss";

[wongjn]

The init command no longer exists in v4. Consider checking the installation documentation that is most relevant to your project to integrate Tailwind v4.

If you still want to use a legacy tailwind.config.js, use the @config directive.

[wongjn]

Would you be able to provide a remotely-hosted git repository that reproduces the issue please?

[Kroplewski-M]

hi this is the github, i just pushed my changes of where im upto: here

[Kroplewski-M]

in the webassembly app under wwwroot/css you should be able to see how i updated it. thanks

[wongjn]

Somewhere in the compatibility layer, values get converted to param case if they're defined as camelcase in the JS config. So as a workaround, you could:

• Do a search-replace to convert usages to param case, i.e. primaryColor to primary-color.
• Convert your config to CSS @theme, which can retain the camelcasing.

[Kroplewski-M]

ahh the replace worked thanks. If i change to to use the theme wont i have to update all the places where i use it to: var(--primary-color)

[wongjn]

No, you should be able to migrate them and it should work, i.e:

@theme {
  --color-light-primaryColor: #F8F9FA;

<div class="text-light-primaryColor">

[Kroplewski-M]

nice thanks ill start working on it now. Just last question is this how i implement the dark mode properly?

@theme{
    --color-light-primaryColor: #F8F9FA;
    --color-light-secondaryColor: #693d99;
}
@theme['dark']{
    --color-dark-primaryColor: #525252;
}

[wongjn]

/* Equivalent to darkMode: 'class' */
@custom-variant dark (&:where(.dark, .dark *));

@theme{
    --color-light-primaryColor: #F8F9FA;
    --color-light-secondaryColor: #693d99;
    --color-dark-primaryColor: #525252;
}

<div class="dark:bg-dark-primaryColor">