feat(docs): Add warning about using Tailwind CSS v4.0 (#160)

* Add warning about using Tailwind CSS v4.0 in installation steps & point instructions to Tailwind CSS v3.* instructions * docs(installation): add a link to official docs hinting the nuget packages path on a machine --------- Co-authored-by: desmondinho <[email protected]>
LumexUI · Jan 29, 2025 · 634ef35 · 634ef35
1 parent cd762e5
commit 634ef35
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor
@@ -36,6 +36,13 @@
                     </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>
 

diff --git a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor
@@ -18,10 +18,10 @@
             Code = new CodeBlock("tailwind.config.js", "installationConfig"),
             Body = @<text>
                 <p>
-                    LumexUI is built on top of Tailwind CSS. To install, follow the official <LumexLink Href="https://tailwindcss.com/docs/installation" External="@true">installation guide</LumexLink>. Then, modify the <code>tailwind.config.js</code> file.
+                    LumexUI is built on top of Tailwind CSS. To install, follow the official <LumexLink Href="https://v3.tailwindcss.com/docs/installation" External="@true">installation guide</LumexLink>. Then, modify the <code>tailwind.config.js</code> file.
                 </p>
                 <i>
-                    Note: the <code>PATH_TO_NUGET</code> is the NuGet package path on the machine.
+                    Note: the <code>PATH_TO_NUGET</code> is the <LumexLink Href="https://learn.microsoft.com/en-us/nuget/consume-packages/managing-the-global-packages-and-cache-folders#:~:text=Windows%3A%20%25userprofile,~/.nuget/packages" External="@true">NuGet package path on the machine</LumexLink>.
                 </i>
                 </text>
         },