diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor index 9d1cab9c..53354519 100644 --- a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor +++ b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor @@ -36,6 +36,23 @@ + + + Depending on the version of Tailwind CSS you plan on using, the instructions may differ slightly. + Make sure you pick the correct version before proceeding. + + diff --git a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor index 727bde59..58368a7b 100644 --- a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor +++ b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor @@ -1,10 +1,22 @@ @page "/docs/getting-started/installation" @layout InstallationLayout - +
+ + + + + +
+ +
+ + + +
@code { - private Step[] _steps = new Step[] + private readonly Step[] _stepsForTailwindCssv3 = new Step[] { new Step() { @@ -14,16 +26,90 @@ }, new Step() { - Title = "Install Tailwind CSS", + Title = "Install Tailwind CSS (up to v3.*)", Code = new CodeBlock("tailwind.config.js", "installationConfig"), Body = @ -

- LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the tailwind.config.js file. -

- - Note: the PATH_TO_NUGET is the NuGet package path on the machine. - - +

+ LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the tailwind.config.js file. +

+ + Note: the PATH_TO_NUGET is the NuGet package path on the machine. + + + Note: if you are using Tailwind CSS v4.0, see /docs/getting-started/installation/tailwindcssv4 instead. + + + }, + new Step() + { + Title = "Configure startup file", + Code = new CodeBlock("Program.cs", "installationServices"), + Body = @

Inject the vital LumexUI services in the Program.cs.

+ }, + new Step() + { + Title = "Include CSS and JS", + Code = new CodeBlock("App.razor", "installationFiles"), + Body = @

Include the mandatory static files into the @("") and the @("").

+ }, + new Step() + { + Title = "Import library's namespace", + Code = new CodeBlock("_Imports.razor", "installationImport"), + Body = @

Modify _Imports.razor file to easily access components throughout your app.

+ }, + new Step() + { + Title = "Setup theme provider", + Code = new CodeBlock("MainLayout.razor", "installationThemeProvider"), + Body = @

Add the LumexThemeProvider into your MainLayout.razor file to enable theming.

+ }, + new Step() + { + Title = "Use the components", + Code = new CodeBlock("Index.razor", "installationUsage"), + Body = @

Now you are all set up to start using LumexUI components in your app!

+ } + }; + + private readonly Step[] _stepsForTailwindCssv4 = new Step[] + { + new Step() + { + Title = "Install LumexUI", + Code = new CodeBlock("Terminal", "installationPackage"), + Body = @

Install LumexUI via terminal using .NET CLI.

+ }, + new Step() + { + Title = "Install Tailwind CSS (Windows)", + Code = new CodeBlock("App.csproj", "installationTargetsWindows"), + Body = @

+ Modify the main .csproj file that serves your app. + This will download the Tailwind CSS standalone CLI if not found and run it when the app builds. +

+ }, + new Step() + { + Title = "Install Tailwind CSS (Linux)", + Code = new CodeBlock("App.csproj", "installationTargetsLinux"), + Body = @

+ Modify the main .csproj file that serves your app. + This will automatically download the Tailwind CSS standalone CLI if not found, give it execute permissions, and run it when the app builds. +

+ }, + new Step() + { + Title = "Import Tailwind CSS in your CSS file", + Code = new CodeBlock("app.css", "installationConfigTailwindV4"), + Body = @ +

+ Import and configure Tailwind CSS in the main .css file of your app. +

+ + Note: the PATH_TO_NUGET is the path to the folder that contains NuGet packages on your machine. + + }, new Step() { diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationConfigTailwindV4.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfigTailwindV4.html new file mode 100644 index 00000000..95c54489 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfigTailwindV4.html @@ -0,0 +1,6 @@ +
@import 'tailwindcss';
+
+@plugin '{PATH_TO_NUGET}/theme/plugin.js';
+
+@source '{PATH_TO_NUGET}/theme/components/*.cs';
+
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html new file mode 100644 index 00000000..568bef93 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsLinux.html @@ -0,0 +1,9 @@ +
<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss')"> 
+  <Exec Command="wget -O tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64" /> 
+  <Exec Command="chmod u+x tailwindcss" /> 
+</Target>
+
+<Target Name="RunTailwind" AfterTargets="InstallTailwind">
+  <Exec Command="./tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
+</Target>
+
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html new file mode 100644 index 00000000..b835a691 --- /dev/null +++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationTargetsWindows.html @@ -0,0 +1,9 @@ +
<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')"> 
+   <Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe" />
+   <Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" />
+</Target> 
+
+<Target Name="RunTailwind" AfterTargets="InstallTailwind"> 
+  <Exec Command="tailwindcss -i ./wwwroot/app.css -o ./wwwroot/output.css --minify" /> 
+</Target>
+
\ No newline at end of file