feat: support Tailwind CSS v4 (#183)

* build(deps): bump TailwindMerge.NET from 0.3.0 to 1.0.0

* feat: add new CSS theme file

* feat/build: add custom targets file to improve library usability

* chore: move `Plugin` folder one level higher; remove `Scripts` folder

* feat/build: pack new theme and custom `.targets` files

* build(docs): add `Directory.Build.props` and `Directory.Build.targets`

* chore(docs): remove tailwind npm deps; use standalone CLI instead

* docs: apply `static` on theme

* refactor(theme-provider): simplify names of box-shadow css variables

* refactor(theme-provider): opacities are percentage to match `color-mix` function syntax

* chore(components): apply  `static` on theme; fix some vars

* refactor(components): drop Tailwind CSS v3 support

* feat(theme): add custom transition variables

* fix(theme): correct `default` color; add `default-foreground` color

* chore(theme): add reference for the custom transitions approach (it's not in docs afaik)

* fix: rename `shadow-sm` to `shadow-xs`

* fix: rename `rounded-sm` to `rounded-xs`

* fix: rename `rounded` to `rounded-sm`

* fix: rename `outline-none` to `outline-hidden`

* fix: rename `ring-1` to `ring`

* fix(button): add base `cursor-pointer` class

* docs: remove `children` custom variant in favor of `*`

* fix(theme): correct `enter` custom animation

* chore(components): cleanup styles

* fix(theme): add missing comma separator in custom transition vars

* docs: configure typography

* refactor(theme): simplify `scrollbar-hide` utility

* chore(theme): apply `inline` on theme

* refactor: replace `theme` function with CSS vars

* fix(components): correct scale/translate transitions

* feat(theme): update colors from hex to oklch

* docs(installation): update installation guide

* feat(theme): add leading CSS vars

* chore(docs): fix prose `<code>` tag ticks

* refactor(utils): remove hex luminance calculator

* docs(customization): update Theme and Colors pages

* docs(colors): remove 'common colors are not configurable' callout

* fix(checkbox): correct radius styles

* fix(data-grid): correct striped styles

* fix(input/select): correct label placement out transitions

* fix(input/select): correct outlined variant focus styles

* fix(input): add cursor-pointer style on the clear button

* fix(input/select): correct flat variant focus styles

* fix(docs): correct some component examples

* build(docs): adjust Tailwind standalone CLI file download for Linux

* build(docs): adjust Tailwind standalone CLI file download for Linux

* ci(deploy): try add staging env in the ci/cd

* ci(build-test): change trigger branch

* ci(deploy): update trigger branches

* ci(deploy): change env vars usage (test)

* ci: add deploy-dev.yml; revert deploy.yml

* ci(deploy): test staging

* chore(docs): nits

* chore(components): tweak styles of some components

* chore(docs): tweak some components examples

* chore: coderabbit comments

* ci: remove deploy-dev.yml

.github/workflows/build-test.yml

@@ -1,30 +1,29 @@
-
 name: Build and Test
 
 on:
   pull_request:
     branches:
-      - main
+      - dev
     paths:
-      - 'docs/**'
-      - 'src/**'
-      - 'tests/**'
+      - "docs/**"
+      - "src/**"
+      - "tests/**"
 
 jobs:
   build-test:
     runs-on: ubuntu-latest
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
- 
+
       - name: Setup .NET Core
         uses: actions/setup-dotnet@v4
         with:
-          dotnet-version: | 
+          dotnet-version: |
             8.0.x
             9.0.x
-      
+
       - name: Restore
         run: dotnet restore
 
@@ -36,5 +35,5 @@ jobs:
 
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v4
-        env: 
+        env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/deploy.yml

@@ -6,7 +6,7 @@ name: Deploy to Azure Web App
 on:
     push:
         branches:
-            - main
+            - dev
         paths:
             - "docs/**"
     workflow_dispatch:
@@ -41,7 +41,7 @@ jobs:
         runs-on: ubuntu-latest
         needs: build
         environment:
-            name: "Production"
+            name: "staging"
             url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
         permissions:
             id-token: write #This is required for requesting the JWT
@@ -64,5 +64,5 @@ jobs:
               uses: azure/webapps-deploy@v3
               with:
                   app-name: "lumexui"
-                  slot-name: "Production"
+                  slot-name: "staging"
                   package: .

.gitignore

@@ -405,3 +405,4 @@ FodyWeavers.xsd
 /src/LumexUI/**/dist
 
 /docs/LumexUI.Docs/**/*/css
+/docs/LumexUI.Docs/*.exe

docs/LumexUI.Docs.Client/Components/CodeSnippet.razor

@@ -11,7 +11,7 @@
                 </div>
             </div>
         }
-        <div id="@Id" class="children:my-0">
+        <div id="@Id" class="*:my-0">
             @_renderCodeSnippet
         </div>
     </div>

docs/LumexUI.Docs.Client/Components/ColorSwatches.razor

@@ -14,10 +14,10 @@
 
                     <LumexButton Color="@ThemeColor.None"
                                  Class="w-full min-w-fit h-auto p-0 justify-start gap-x-3 overflow-visible rounded-small sm:block sm:space-y-1">
-                        <div class="relative w-12 h-12 rounded-md ring-1 ring-inset ring-foreground-950/10 sm:w-full"
+                        <div class="relative w-12 h-12 rounded-md ring ring-inset ring-foreground-950/10 sm:w-full"
                              style="background-color: @(color.Value + (isDivider ? "26" : default))">
 
-                            <span class="hidden absolute top-1 right-1.5 font-medium text-[0.625rem] leading-none sm:block"
+                            <span class="absolute top-1 right-1.5 font-medium text-[0.625rem] leading-none"
                                   style="color: @(isDivider ? "black" : ColorUtils.GetReadableColor(color.Value))">
                                 @color.Key
                             </span>
@@ -30,11 +30,6 @@
                                 </span>
                             }
                         </div>
-
-                        <div class="px-0.5 text-left">
-                            <div class="font-medium text-foreground-900 text-xs sm:hidden">@color.Key</div>
-                            <div class="font-mono text-foreground-500 text-xs">@color.Value</div>
-                        </div>
                     </LumexButton>
                 }
             }

docs/LumexUI.Docs.Client/Components/ComponentLinks.razor

@@ -6,7 +6,7 @@
         <LumexButton As="a"
                      Size="@Size.Small"
                      StartContent="@BlazorIcon"
-                     Class="bg-default-100 text-default-700"
+                     Class="bg-default-100 text-default-700 text-small"
                      href="https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/?view=aspnetcore-8.0#client-and-server-rendering-concepts"
                      target="_blank"
                      rel="noopener noreferrer">
@@ -17,7 +17,7 @@
     <LumexButton As="a"
                  Size="@Size.Small"
                  StartContent="@GithubIcon"
-                 Class="bg-default-100 text-default-700"
+                 Class="bg-default-100 text-default-700 text-small"
                  href="@($"{Constants.GitHub.ComponentPath}/{ComponentName}")"
                  target="_blank"
                  rel="noopener noreferrer">
@@ -27,7 +27,7 @@
     <LumexButton As="a"
                  Size="@Size.Small"
                  StartContent="@GithubIcon"
-                 Class="bg-default-100 text-default-700"
+                 Class="bg-default-100 text-default-700 text-small"
                  href="@($"{Constants.GitHub.ComponentStylesPath}/{ComponentName}.cs")"
                  target="_blank"
                  rel="noopener noreferrer">
@@ -39,17 +39,13 @@
     [Parameter, EditorRequired] public string ComponentName { get; set; } = default!;
     [Parameter] public bool IsServer { get; set; }
 
-    private RenderFragment BlazorIcon =>
-    @<text>
-        <LumexIcon Icon="@Icons.Brands.Blazor"
-                   Size="@new("20")"
-                   viewBox="-10 -38 340 340" />
-    </text>;
+    private static readonly RenderFragment BlazorIcon =
+        @<LumexIcon Icon="@Icons.Brands.Blazor"
+                    Size="@new("20")"
+                    viewBox="-10 -38 340 340" />;
 
-    private RenderFragment GithubIcon =>
-    @<text>
-        <LumexIcon Icon="@Icons.Brands.GitHub"
-                   Size="@new("20")"
-                   viewBox="0 0 24 24" />
-    </text>;
+    private static readonly RenderFragment GithubIcon =
+        @<LumexIcon Icon="@Icons.Brands.GitHub"
+                    Size="@new("20")"
+                    viewBox="0 0 24 24" />;
 }

docs/LumexUI.Docs.Client/Components/DocsApiSection.razor

@@ -14,7 +14,7 @@
             <li>
                 <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
                            Class="border-none text-orange-500 text-xs font-normal not-prose">
-                    <span class="px-1 py-0.5 rounded-md ring-1 ring-orange-200 bg-orange-50">
+                    <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-orange-50">
                         @($"<{component} />")
                     </span>
                 </LumexLink>

docs/LumexUI.Docs.Client/Components/DocsSection.razor

@@ -8,7 +8,7 @@
                    Color="@ThemeColor.None"
                    Class="border-none">
             @Title
-            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-sm ring-1 ring-foreground-950/5 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
+            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-foreground-950/5 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
                 <LumexIcon Icon="@Icons.Rounded.Link"
                            Size="@new("16")" />
             </span>

docs/LumexUI.Docs.Client/Components/InstallationSteps.razor

@@ -5,7 +5,7 @@
     {
         foreach( var step in Steps )
         {
-            <li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-zinc-700 before:rounded-md before:shadow-sm before:ring-1 before:ring-foreground-950/5 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider" style="counter-increment: step;">
+            <li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-zinc-700 before:rounded-md before:shadow-xs before:ring before:ring-foreground-950/5 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider" style="counter-increment: step;">
                 <div class="mb-6 xl:mb-0 xl:col-span-2">
                     <h4 class="text-sm leading-6 font-semibold mb-2">
                         @step.Title

docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor

@@ -25,9 +25,9 @@
                         or later
                     </li>
                     <li>
-                        <LumexLink Href="https://v3.tailwindcss.com"
+                        <LumexLink Href="https://tailwindcss.com"
                                    External="@true">
-                            Tailwind CSS 3.4
+                            Tailwind CSS 4.0
                             <LumexIcon Icon="@Icons.Rounded.OpenInNew"
                                        Size="@new("16")"
                                        Class="mx-1 text-orange-400" />
@@ -45,13 +45,6 @@
                     </li>
                 </ul>
             </DocsSection>
-
-	        <Callout Variant="@CalloutVariant.Warning">
-		        Please be aware that LumexUI isn't fully compatible with Tailwind CSS v4.0 at this time. If this is the
-		        version you plan on using, proceed at your own risk. More information can be found in 
-		        <LumexLink Href="https://github.com/LumexUI/lumexui/issues/156"
-		                   External="true">this Github conversation</LumexLink>.
-	        </Callout>
             <LumexDivider />
         </div>
 

docs/LumexUI.Docs.Client/Components/NavItemBadge.razor

@@ -14,7 +14,7 @@
         .Add( "px-1.5" )
         .Add( "py-[3px]" )
         .Add( "rounded-full" )
-        .Add( "ring-1" )
+        .Add( "ring" )
         .Add( "font-semibold" )
         .Add( "text-[0.5rem]" )
         .Add( "uppercase" )

docs/LumexUI.Docs.Client/Components/Preview.razor

@@ -25,7 +25,7 @@
     private readonly Slots _slots = new()
         {
             Preview = "relative flex flex-wrap items-center gap-4",
-            PreviewWrapper = "relative p-8 rounded-xl bg-zinc-50 ring-1 ring-foreground-950/5 not-prose",
+            PreviewWrapper = "relative p-8 rounded-xl bg-zinc-50 ring ring-foreground-950/5 not-prose",
             Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
         };
 

docs/LumexUI.Docs.Client/Components/PreviewCode.razor

@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <LumexCollapse Expanded="@_expanded" Class="children:rounded-t-none">
+    <LumexCollapse Expanded="@_expanded" Class="*:rounded-t-none">
         <CodeSnippet Id="@_id" Code="@Code" />
     </LumexCollapse>
 </div>

docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs

@@ -15,9 +15,9 @@ public partial class PreviewCode
 
     private string? BaseClass => ElementClass.Empty()
         .Add( "rounded-2xl" )
-        .Add( "ring-1" )
+        .Add( "ring" )
         .Add( "ring-foreground-950/5" )
-        .Add( "shadow-sm" )
+        .Add( "shadow-xs" )
         .Add( "overflow-hidden" )
         .Add( Class )
         .ToString();

docs/LumexUI.Docs.Client/Components/QuickLink.razor

@@ -18,7 +18,7 @@
             @Description
         </p>
     </div>
-    <div class="absolute -z-10 -inset-3 rounded-2xl bg-gray-50 peer-hover:ring-1 peer-hover:ring-foreground-950/5"></div>
+    <div class="absolute -z-10 -inset-3 rounded-2xl bg-gray-50 peer-hover:ring peer-hover:ring-foreground-950/5"></div>
 </li>
 
 @code {

docs/LumexUI.Docs.Client/Pages/Api/Api.razor

@@ -25,7 +25,7 @@
 @if( _properties.Length > 1 )
 {
     <DocsSection Title="Properties">
-        <div class="overflow-x-auto children:mt-0">
+        <div class="overflow-x-auto *:mt-0">
             <table>
                 <thead>
                     <tr>
@@ -40,7 +40,7 @@
                     {
                         <tr>
                             <td class="text-orange-500">@property.Name</td>
-                            <td class="max-w-44 overflow-x-auto scrollbar:h-1 scrollbar:w-1 scrollbar-thumb:rounded scrollbar-thumb:bg-foreground-200 scrollbar-track:rounded scrollbar-track:bg-foreground-100">
+                            <td class="max-w-44 overflow-x-auto scrollbar:h-1 scrollbar:w-1 scrollbar-thumb:rounded-sm scrollbar-thumb:bg-foreground-200 scrollbar-track:rounded-sm scrollbar-track:bg-foreground-100">
                                 <Code>@GetTypeName( property.PropertyType )</Code>
                             </td>
                             <td>@GetDescription( property )</td>
@@ -68,7 +68,7 @@
 @if( _methods.Length > 1 )
 {
     <DocsSection Title="Methods">
-        <div class="overflow-x-auto children:mt-0">
+        <div class="overflow-x-auto *:mt-0">
             <table>
                 <thead>
                     <tr>

docs/LumexUI.Docs.Client/Pages/Components/Accordion/Examples/StartContent.razor

@@ -3,7 +3,7 @@
                         Title="General Settings"
                         Subtitle="Custom display, sound, privacy, connectivity, updates">
         <StartContent>
-            <span class="h-8 w-8 flex items-center justify-center bg-primary text-zinc-50 rounded-lg ring ring-primary/30">
+            <span class="h-8 w-8 flex items-center justify-center bg-primary text-zinc-50 rounded-lg ring-3 ring-primary/30">
                 <LumexIcon Icon="@Icons.Rounded.Settings"
                            Color="@ThemeColor.None" />
             </span>
@@ -16,7 +16,7 @@
                         Title="Advanced Settings"
                         Subtitle="Detailed system, developer, security, network, diagnostics">
         <StartContent>
-            <span class="h-8 w-8 flex items-center justify-center bg-secondary text-zinc-50 rounded-lg ring ring-secondary/30">
+            <span class="h-8 w-8 flex items-center justify-center bg-secondary text-zinc-50 rounded-lg ring-3 ring-secondary/30">
                 <LumexIcon Icon="@Icons.Rounded.Manufacturing"
                            Color="@ThemeColor.None" />
             </span>
@@ -29,7 +29,7 @@
                         Title="Personal Data"
                         Subtitle="Contacts, messages, photos, account info, preferences">
         <StartContent>
-            <span class="h-8 w-8 flex items-center justify-center bg-danger text-zinc-50 rounded-lg ring ring-danger/30">
+            <span class="h-8 w-8 flex items-center justify-center bg-danger text-zinc-50 rounded-lg ring-3 ring-danger/30">
                 <LumexIcon Icon="@Icons.Rounded.ManageAccounts"
                            Color="@ThemeColor.None" />
             </span>

docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor

@@ -19,7 +19,7 @@
 @code {
     private CardSlots _classes = new()
     {
-        Root = "max-w-md py-4 rounded-3xl bg-zinc-100 shadow-[5px_5px_10px_theme(colors.zinc.200),-5px_-5px_10px_theme(colors.zinc.50)]",
+        Root = "max-w-md py-4 rounded-3xl bg-zinc-100 shadow-[5px_5px_10px_var(--color-zinc-200),-5px_-5px_10px_var(--color-zinc-50)]",
         Header = "justify-center text-center",
         Body = "py-0 justify-center text-center",
         Footer = "justify-center gap-2"

docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Editing.razor

@@ -1,4 +1,6 @@
-<LumexDataGrid Data="@_users">
+<LumexDataGrid Data="@_users"
+               Layout="@Layout.Fixed"
+               Classes="@(new() { Table = "w-full" })">
     <EditColumn Property="@(p => p.Name)" />
     <EditColumn Property="@(p => p.Role)" />
     <EditColumn Property="@(p => p.Status)" />

docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/MultipleSelection.razor

@@ -7,22 +7,15 @@
     <PropertyColumn Property="@(p => p.Status)" />
 </LumexDataGrid>
 
-<fieldset class="flex gap-4">
-    @foreach( var color in _colors )
+<LumexRadioGroup Orientation="@Orientation.Horizontal"
+                 @bind-Value="@_color">
+    @foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
     {
-        var value = color.ToString();
-
-        <div class="flex gap-1">
-            <input type="radio"
-                   id="@($"multiple-sel-{value.ToLower()}")"
-                   name="color"
-                   @bind:event="onchange"
-                   @bind:get="@color"
-                   @bind:set="@OnColorSelect" />
-            <label for="@($"multiple-sel-{value.ToLower()}")">@value</label>
-        </div>
+        <LumexRadio Value="@color" Color="@color">
+            @color.ToString()
+        </LumexRadio>
     }
-</fieldset>
+</LumexRadioGroup>
 
 @if( _selectedUsers.Count > 0 )
 {
@@ -46,23 +39,8 @@
         new( "Diana Lee", "Moderator", "Active" )
     }.AsQueryable();
 
-    private readonly ThemeColor[] _colors = [
-        ThemeColor.Default,
-        ThemeColor.Primary,
-        ThemeColor.Secondary,
-        ThemeColor.Success,
-        ThemeColor.Warning,
-        ThemeColor.Danger,
-        ThemeColor.Info
-    ];
-
     private ThemeColor _color = ThemeColor.Default;
     private ICollection<User> _selectedUsers = [];
 
-    private void OnColorSelect( ThemeColor value )
-    {
-        _color = value;
-    }
-
     private record User( string Name, string Role, string Status );
 }