[Feature]: Add compatibility with Tailwind CSS 4.0

[aurepereira]

Feature request type

Other

Component name

No response

What should be done?

Add compatibility with Tailwind CSS v4.0.

Following the release of Tailwind CSS v4.0, some steps in the installation process of LumexUI must be performed differently. Therefore the current installation process should be amended to reflect the new way to configure Tailwind.

Step 2 of the installation process

In v4.0, the tailwind.config.js file is gone. The configuration can now be handled in the main .css file of the user's application, like so:

@import 'tailwindcss';

@plugin '{PATH_TO_NUGET}/theme/plugin.js';

@source '{PATH_TO_NUGET}/theme/components/*.cs';

Switching to the CLI in the .csproj target

The new target in the .csproj file is now declared like so:

<Target Name="Tailwind" BeforeTargets="Compile">
    <Exec Command="npx @tailwindcss/cli -i ./wwwroot/app.css -o ./wwwroot/output.css" />
</Target>

Note the new syntax @tailwindcss/cli in lieu of tailwindcss, which is the only real change here.

Bonus instructions

Providing instructions on how to install Tailwind specifically for .NET, although not mandatory, would be nice. Tailwind's documentation doesn't really say it explicitly, but installing the Tailwind CLI (specifically step 1 here https://tailwindcss.com/docs/installation/tailwind-cli) is the easiest way to get this up and running. Performing steps 2 to 4 aren't really necessary since those are covered in LumexUI's installation process.

Any thoughts on adding that to the description of Step 2?

Pull Request

• I would like to do a Pull Request

[desmondinho]

Hey @aurepereira,

Thank you for bringing this up! This was already on my to-do list for the weekend, but I’m really glad to see you’re interested in submitting a PR!

I agree it would be great to include instructions on installing Tailwind specifically for .NET developers. I thought mentioning the Standalone executable CLI would be the best option for most Blazor developers.

If I’m not mistaken, using npx requires NPM to be initialized in the project. Here’s how our team handles this instead:

<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')">
  <Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe" /> // download the latest executable
  <Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" /> // rename for easier usage below
</Target>

<Target Name="RunTailwind" AfterTargets="InstallTailwind">
  <Exec Command="tailwindcss -i ./wwwroot/css/globals.css -o ./wwwroot/css/app.min.css --minify" />
</Target>

This approach ensures the executable is downloaded once and used without requiring NPM.

What do you think about this method?

[aurepereira]

Well I'll be damned, your approach is even cleaner than what I did yesterday!

I had missed the mention about the standalone executable CLI, thanks for bringing it up again. I agree it seems to be the actual cleanest way to run this, I like this a lot.

I am running a Linux dev environment therefore the commands you provided don't exactly work for me, however they were more than enough for me to figure out how to get this to work on Ubuntu. Here's how I got this working:

<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss')">
    <Exec Command="wget -O tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64" />
    <Exec Command="chmod u+x tailwindcss" />
</Target>

<Target Name="RunTailwind" AfterTargets="InstallTailwind">
    <Exec Command="./tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" />
</Target>

This essentially achieves the same result as your approach except it combines the downloading and renaming of the CLI in a single command, and modifies the execute permissions so the IDE can start the Tailwind CLI.

Is it okay with you if we add both sets of instructions to the documentation so they cover more operating systems?

[desmondinho]

Glad you liked it!

You’re absolutely right — I woke up thinking the same thing today. We should definitely include both sets of commands.

[aurepereira]

For the sake of completeness, this issue cannot be closed just yet as LumexUI isn't fully compatible with Tailwind CSS v4.0 (mainly due to the library using tailwind-merge-dotnet).

More information can be found in this conversation #157, and a PR partially addressing the compatibility issue can be found here #160.

The plan is to amend the documentation with the new installation steps once LumexUI is fully compatible with v4.0 of Tailwind CSS. No ETA has been discussed yet.