From 634ef35316b905548b3abab6483ae18a67a9b766 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9?= <94551901+aurepereira@users.noreply.github.com>
Date: Wed, 29 Jan 2025 15:08:18 +0100
Subject: [PATCH] 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 <daniil.norinn@gmail.com>
---
 .../Components/Layouts/InstallationLayout.razor            | 7 +++++++
 .../Pages/Getting Started/Installation.razor               | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor
index 9d1cab9c..7dc0cdb2 100644
--- 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
index 727bde59..a8e85e4d 100644
--- 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>
         },