Using tailwind in the component library

[NathanVG]

Hey there, I'm new to blazor and coming over from JS/TS land, so very happy to have found your library.

I'm trying to create a blazor component library that can be used across several applications. I created a component library with your tool, and managed to set up a pipeline so it gets built into a nuget package that we can import in our other projects, but I'm a bit stuck.

I would like to use tailwind in both the component library and the other projects. Could you explain to me how to set up tailwind in the component library? Or would setting up tailwind in the other projects be sufficient?

[DavidVollmers]

Hello there, the problem is that you want to elevate the Tailwind CLI so that only used CSS classes are output to your final build. This is normally done by extending your tailwind.config.js to also run over the files of your component library. In case of Blazor component libraries this is not possible, since they are compiled into a .dll assembly.

There are different solutions to this problem:

Solution A: If you have a mono repository you can simply have one tailwind.config.js which covers all .razor files in your repository.

Solution B: You can mark the .razor files of your component library to be output next to your .dll when building the project and then ship them via your NuGet package. This way you could cover the nuget package .razor files coming from the global nuget package path (%UserProfile%\.nuget\packages) in your tailwind.config.js.

Solution C: You can add the used classes of your component library to the safelist property of your tailwind.config.js to make sure they are always output in the final build.

This obviously is a generic problem where the best solution highly depends on your custom scenario, but I hope my hints can help!

[NathanVG]

Hi David,

Thank you for your reply! I've decided to go with solution B, as it fits best with our intended usecase. However I'm having trouble outputting the actual files next to the DLL file. Ideally I would like a 'Components' folder containing all the razor components.

Currently my .csproj file looks like this:

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
    <Title>Component Library</Title>
    <Authors>xxx</Authors>
    <Company>xxx</Company>
    <PackageId>Component-Library</PackageId>
    <Product>Component-Library</Product>
    <Description>A library of UI components for use in Applications</Description>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Ignis.Components.Web" Version="1.2.0" />
  </ItemGroup>

  <ItemGroup>
    <Content Remove="Components\**\*.razor" />
  </ItemGroup>

  <ItemGroup>
    <None Update="Components\**\*.razor">
      <Pack>true</Pack>
      <PackagePath>content\Components</PackagePath>
    </None>
    <Content Include="Components\**\*.razor">
      <PackagePath>content\Components</PackagePath>
    </Content>
  </ItemGroup>
</Project>

I would appreciate it if you could point me in the right direction

[DavidVollmers]

I never did that myself since I most of the time work in mono repositories. But i think the easiest solution here is to use the --include-source option for dotnet pack:

dotnet pack --include-source

This will build a second .symbols.nupkg which contains a src folder containing the source code of the package. In general I would only use Solution B in private/internal scenarios, because shipping source code within your package might be a security risk.

[NathanVG]

I'll give that a try! It is for an private/internal solution so I think that would be a better solution than a monorepo. Thank you for the advice!

[DavidVollmers]

I will close this issue since it is not really related to Ignis. Feel free to add more comments to it though!