Need help setting up

[fkabreiddy]

Feature request type

Other

Component name

No response

What should be done?

Hey, i really wanna use this library and I'm trying to figure out how to implement it. I've already installed talwind on my blazor app but I need some help with the this module. What am I supposed to put on {PATH_TO_NUGET}. I can't find any information about this. Pls help.

Pull Request

• [ ] I would like to do a Pull Request

[desmondinho]

Hey, sure! I am here to help you. The {PATH_TO_NUGET} is the path to the downloaded LumexUI package on your machine. The module and the styles needed for Tailwind to work properly, therefore I decided to pack them into the package. You just need to tell Tailwind where to look for these files.

Windows: %userprofile%/.nuget/packages (Win + R -> paste and enter -> copy the full path) Mac/Linux: ~/.nuget/packages

Result:

// tailwind.config.js

const pathToNuget = "C:\Users\user\.nuget\packages\lumexui\1.0.0-preview.4";
const lumexui = require(`${pathToNuget}/theme/plugin`);

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

Source: https://learn.microsoft.com/en-us/nuget/reference/nuget-config-file#config-section

I will write you a slightly better solution in a while...

Please tell me how the above went for you.

[desmondinho]

I understand that copy-pasting the full path to the package contents is not the best option. During development, I spent some time trying to figure out the best ways and here are my findings:

Option 1: Get the home directory path using JS

// tailwind.config.js

const fs = require('fs');
const os = require('os');
const path = require('path');
const nuget = path.join(os.homedir(), '.nuget', 'packages', 'lumexui');
const version = fs.readdirSync(nuget).sort().at(-1);
const lumexui = require(path.join(nuget, version, 'theme', 'plugin'));

module.exports = {
    content: [
        `${nuget}/${version}/theme/components/*.cs`
    ],
   // ...
}

Quite verbose. I didn't like it much.

Option 2: Copy the plugin and the styles contents to your project

<ItemGroup>
        <PackageReference Include="LumexUI" Version="1.0.0-preview.4" GeneratePathProperty="true" /> // generates a path to the package
</ItemGroup>

<ItemGroup>
    <Files Include="$(PkgLumexUI)/theme/**/*" /> // gets all the files from the `theme` folder
</ItemGroup>
<Target Name="CopyFiles" BeforeTargets="Build">
    <Copy SourceFiles="@(Files)" DestinationFolder="Theme/%(RecursiveDir)" /> // copies the files into the destination folder
</Target>

And then you just provide the path to these files in the tailwind.config.js.

[!NOTE]
Make sure your Target runs before Tailwind building process

Edit:

Make sure your Target runs before Tailwind building process

Perhaps there is no need to do that on every build.

Edit 2:

There is a huge Tailwind update incoming that will make the life waaaay easier.

[fkabreiddy]

Thanks a lot, it works now ❤

[desmondinho]

Thanks a lot, it works now ❤

I'm glad I could help! Could you let me know which approach worked best for you? Or perhaps you found a different solution (e.g., the 3rd approach)?

I'm considering improving the documentation or creating a template for a better quickstart experience.

[fkabreiddy]

opt 1 was the clearest and the one that worked for me.

[desmondinho]

opt 1 was the clearest and the one that worked for me.

Thank you for the feedback! Hope you'll enjoy using LumexUI :)