Help with Tailwind Installation to use LumexUI within a Blazor project #185

NessfertIndia · 2025-02-26T10:31:13Z

NessfertIndia
Feb 26, 2025

The current documentation seems to be very basic / targeting experienced programmers with full stack experience

_```
Install Tailwind CSS
LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the tailwind.config.js file.
__
Note: the PATH_TO_NUGET is the NuGet package path on the machine.
What i tried is listed here but not been able to produce the styles


Steps I followed 

**Step 1: Install Node.js (if not already installed)**
node -v
npm -v
If you see version numbers, Node.js is installed.

**Step 2: Initialize a Node.js Project in Your Blazor App**
Navigate to your Blazor project folder in Terminal (Command Prompt, PowerShell, or VS Code Terminal) and run: 
		npm init -y
This creates a package.json file in your Blazor project.

**Step 3: Install Tailwind CSS**
Run the following command inside your Blazor project: 
 
 npm install -D tailwindcss postcss autoprefixer


**Step 4: Generate the Tailwind Configuration Files**

  npx tailwindcss init -p
 
This step failed for me . So i created the file **tailwind.config.js** manually to root of the project 

Replace PATH_TO_NUGET with the actual NuGet package path on your system. I used the following command to get this value and replaced it 
 
dotnet nuget locals global-packages -l 

**Include the mandatory static files into the <head> and the <body>.**

.NET 9 project templates follow a different pattern  So i was using the  below 

	<link  href="@Assets["output.css"] rel="stylesheet" />  
Still confusions there like do we need to create a output.css file in the root folder or some other places? 

MainLayout.razor 

@inherits LayoutComponentBase
<LumexThemeProvider />
<div class="page"> 
  @Body 
</div> 

Home.razor

@page "/"
@using LumexUI.Common
 
<LumexButton Color="@ThemeColor.Primary">Button</LumexButton>


After following all these and run the project 	and i cannot see the Lumex styles button . So can someone helps to get a little bit more detailed explanation or steps to follow to do this step

desmondinho · 2025-02-26T11:27:15Z

desmondinho
Feb 26, 2025
Maintainer

Hey, @NessfertIndia

Thank you for bringing this up and reaching out for help!
I understand your struggles, and I want to help you overcome them as effectively as possible.

Here are the steps I personally follow when installing Tailwind CSS in a project:

Install Tailwind CSS (the 1st and 2nd step of the Tailwind CSS installation)

Install the Standalone CLI executable

Since we are working in the dotnet environment, the best way to incorporate Tailwind CSS into the project is the Standalone CLI executable. You just download and add it to your project.

I personally use the following MSBuild script to automatically download and rename the executable after the build process:

<Target Name="InstallTailwindCLI" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')">
	<Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.17/tailwindcss-windows-x64.exe" />
	<Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" />
</Target>

This script should be added in the YourProject.csproj file.
In case you need a more detailed explanation of the script above, I'd suggest just ask ChatGPT to explain it.

Add `tailwind.config.js`

Create a tailwind.config.js file in the root directory of your project and paste the following:

const lumexui = require("{PATH_TO_NUGET}/theme/plugin");

/** @type {import("tailwindcss").Config} */
module.exports = {
    content: [
        // ...
        "{PATH_TO_NUGET}/theme/components/*.cs"
    ],
    theme: {
        extend: {},
    },
    plugins: [lumexui],
};

Now, replace the PATH_TO_NUGET with the actual NuGet package path on your machine.

Add the Tailwind directives to your CSS (the 3rd step of the Tailwind CSS installation)

Create a CSS file for your application if you don't have one (it can be anywhere you want) and paste the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the Tailwind CLI build process (the 4th step of the Tailwind CSS installation)

It won't work for you as npx tailwindcss init didn't work for the same reason. Here is a dotnet-like workaround:

Add the following MSBuild script to automatically start the Tailwind CLI build process and generate the output.css every time you rebuild your project:

<Target Name="CompileCSS" AfterTargets="InstallTailwindCLI">
	<Exec Command="tailwindcss -i ./path/to/your/styles.css -o ./wwwroot/output.css" />
</Target>

Please let me know if this helps and if you have any further questions or need assistance!

I'm already working on simplifying the installation process by adding support for Tailwind CSS v4. After that, I'll focus on making the documentation more beginner-friendly.

1 reply

desmondinho Feb 26, 2025
Maintainer

.NET 9 project templates follow a different pattern So i was using the below

<link  href="@Assets["output.css"] rel="stylesheet" />

This is correct for .NET 9.

Still confusions there like do we need to create a output.css file in the root folder or some other places?

Since this file is used by the Tailwind CLI, it does not care where you put it. But your app cares where the output file is, so you should always make sure the output.css is in the wwwroot folder. This way, it will be treated as a static web asset.

desmondinho · 2025-03-05T14:18:10Z

desmondinho
Mar 5, 2025
Maintainer

Hey @NessfertIndia,

I have just pushed a preview release that supports Tailwind CSS v4 and improves installation process. Please give it a try!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Help with Tailwind Installation to use LumexUI within a Blazor project #185

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Help with Tailwind Installation to use LumexUI within a Blazor project #185

Uh oh!

NessfertIndia Feb 26, 2025

Replies: 2 comments · 1 reply

Uh oh!

Uh oh!

desmondinho Feb 26, 2025 Maintainer

Install Tailwind CSS (the 1st and 2nd step of the Tailwind CSS installation)

Install the Standalone CLI executable

Add tailwind.config.js

Add the Tailwind directives to your CSS (the 3rd step of the Tailwind CSS installation)

Start the Tailwind CLI build process (the 4th step of the Tailwind CSS installation)

Uh oh!

Uh oh!

desmondinho Feb 26, 2025 Maintainer

Uh oh!

desmondinho Mar 5, 2025 Maintainer

NessfertIndia
Feb 26, 2025

Replies: 2 comments 1 reply

desmondinho
Feb 26, 2025
Maintainer

Add `tailwind.config.js`

desmondinho Feb 26, 2025
Maintainer

desmondinho
Mar 5, 2025
Maintainer