Skip to content

Add compatibility with Tailwind CSS 4.0 #156

@aurepereira

Description

@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

Metadata

Metadata

Assignees

Labels

📚 Scope: DocsImprovements or additions to documentation

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions