Skip to content

[2.0] Flowbite and tailwind to the latest versions #6012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: next-2.0
Choose a base branch
from
Open

[2.0] Flowbite and tailwind to the latest versions #6012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
270a39f
safe list to txt file while keeping all the original classes
tesar-tech Mar 10, 2025
71a67c3
tailwind config(s) to one blazorise.tailwind.prebuild.css that works …
tesar-tech Mar 10, 2025
8d734c5
building blazorise.tailwind.mi
tesar-tech Mar 10, 2025
84bdf1e
update to new file and flowbite v3
tesar-tech Mar 10, 2025
6509c8f
rm old css, target the scss build to the correct location.
tesar-tech Mar 10, 2025
0b15208
Merge branch 'next-2.0' into dev/next-2.0/Flowbite-and-tailwind-to-la…
stsrki Mar 11, 2025
d0dc4c1
upgrade to classes name for v4. change from text-md to text-base
tesar-tech Mar 13, 2025
caad6aa
docs for tw v4
tesar-tech Mar 13, 2025
941697b
Remove unused @tailwind directives
stsrki Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions Demos/Blazorise.Demo.Tailwind/wwwroot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,12 @@
<link rel="manifest" href="manifest.json">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.4/dist/flowbite.min.css" />
<link rel="stylesheet" href="https://unpkg.com/flowbite@3.1.2/dist/flowbite.min.css" />
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>

<script src="_content/Blazorise.Tailwind/blazorise.tailwind.config.js?v=1.7.5.0"></script>

<link href="_content/Blazorise.Tailwind/blazorise.tailwind.min.css?v=1.7.5.0" rel="stylesheet" />

<link href="_content/Blazorise/blazorise.css?v=1.7.5.0" rel="stylesheet" />
<link href="_content/Blazorise.Tailwind/blazorise.tailwind.css?v=1.7.5.0" rel="stylesheet" />
<link href="_content/Blazorise.Sidebar/blazorise.sidebar.css?v=1.7.5.0" rel="stylesheet" />
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css?v=1.7.5.0" rel="stylesheet" />
<link href="_content/Blazorise.TreeView/blazorise.treeview.css?v=1.7.5.0" rel="stylesheet" />
Expand All @@ -39,7 +37,7 @@
</div>
</div>

<script src="https://unpkg.com/flowbite@1.5.4/dist/flowbite.js"></script>
<script src="https://unpkg.com/flowbite@3.1.2/dist/flowbite.js"></script>

<!-- EXTENSIONS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
Expand Down
16 changes: 3 additions & 13 deletions Documentation/Blazorise.Docs/Models/Snippets.generated.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11607,24 +11607,14 @@ protected override void OnInitialized()
.AddTailwindProviders()
.AddFontAwesomeIcons();";

public const string TailwindGuideSourceFiles1Example = @"<link href=""https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap"" rel=""stylesheet"">
<link rel=""stylesheet"" href=""https://unpkg.com/[email protected]/dist/flowbite.min.css"" />
<link href=""_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css"" rel=""stylesheet"">

<script src=""https://cdn.tailwindcss.com""></script>
<script src=""_content/Blazorise.Tailwind/blazorise.tailwind.config.js?v=1.7.5.0""></script>

<link href=""_content/Blazorise/blazorise.css?v=1.7.5.0"" rel=""stylesheet"" />
<link href=""_content/Blazorise.Tailwind/blazorise.tailwind.css?v=1.7.5.0"" rel=""stylesheet"" />";

public const string TailwindGuideSourceFiles2Example = @"<script src=""https://unpkg.com/[email protected]/dist/flowbite.js""></script>";
public const string TailwindGuideSourceFiles2Example = @"<script src=""https://unpkg.com/[email protected]/dist/flowbite.js""></script>";

public const string TailwindGuideSourceFiles3Example = @"<link href=""https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap"" rel=""stylesheet"">
<link rel=""stylesheet"" href=""https://unpkg.com/flowbite@1.5.4/dist/flowbite.min.css"" />
<link rel=""stylesheet"" href=""https://unpkg.com/flowbite@3.1.2/dist/flowbite.min.css"" />
<link href=""_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css"" rel=""stylesheet"">

<link href=""_content/Blazorise/blazorise.css?v=1.7.5.0"" rel=""stylesheet"" />
<link href=""_content/Blazorise.Tailwind/blazorise.tailwind.prod.css?v=1.7.5.0"" rel=""stylesheet"" />";
<link href=""_content/Blazorise.Tailwind/blazorise.tailwind.min.css?v=1.7.5.0"" rel=""stylesheet"" />";

public const string TailwindGuideUsingExample = @"@using Blazorise";

Expand Down
7 changes: 7 additions & 0 deletions Documentation/Blazorise.Docs/Pages/Blog/2025-01-15_MigrationTo2/Index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,10 @@ All input components have been updated to use a single `Value` parameter instead
### Link

Removed `Match.Custom` enum value from the `Match` parameter. This change was made to simplify the API and make it more consistent across all components.

### Tailwind v4 and Flowbite v3

For a production-ready solution with the Blazorise.Tailwind provider, follow the setup described in the
[integration guide](/docs/usage/tailwind/).

The change lies in the version of the Flowbite CSS and JS files. Additionally, all the necessary classes for Blazorise are now in `blazorise.tailwind.min.css` instead of `blazorise.tailwind.prod.css`.
8 changes: 8 additions & 0 deletions Documentation/Blazorise.Docs/Pages/Blog/2025-01-15_MigrationTo2/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,12 @@
Removed <Code>Match.Custom</Code> enum value from the <Code>Match</Code> parameter. This change was made to simplify the API and make it more consistent across all components.
</BlogPageParagraph>

<Heading Size="HeadingSize.Is3">
Tailwind v4 and Flowbite v3
</Heading>

<BlogPageParagraph>
For production ready solution with Blazorise.Tailwind probider the settup got bit simpler.Markdig.Syntax.Inlines.LineBreakInlineNow you need to reference
</BlogPageParagraph>

<BlogPagePostInto UserName="Mladen Macanović" ImageName="mladen" PostedOn="January 15th, 2025" Read="4 min" />
2 changes: 1 addition & 1 deletion .../Blazorise.Docs/Pages/Docs/Guides/Tailwind/Code/TailwindGuideSourceFiles2ExampleCode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">script</span> <span class="htmlAttributeName">src</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://unpkg.com/flowbite<span class="atSign">&#64;</span>1.5.4/dist/flowbite.js</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span><span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">script</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">script</span> <span class="htmlAttributeName">src</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://unpkg.com/flowbite<span class="atSign">&#64;</span>3.1.2/dist/flowbite.js</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span><span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">script</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
</div>
4 changes: 2 additions & 2 deletions .../Blazorise.Docs/Pages/Docs/Guides/Tailwind/Code/TailwindGuideSourceFiles3ExampleCode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://fonts.googleapis.com/css2?family=Inter:wght<span class="atSign">&#64;</span>300;400;500;600;700;800&amp;amp;display=swap</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://unpkg.com/flowbite<span class="atSign">&#64;</span>1.5.4/dist/flowbite.min.css</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">https://unpkg.com/flowbite<span class="atSign">&#64;</span>3.1.2/dist/flowbite.min.css</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>

<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise/blazorise.css?v=1.7.5.0</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise.Tailwind/blazorise.tailwind.prod.css?v=1.7.5.0</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">_content/Blazorise.Tailwind/blazorise.tailwind.min.css?v=1.7.5.0</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
</pre></div>
</div>
9 changes: 0 additions & 9 deletions ...azorise.Docs/Pages/Docs/Guides/Tailwind/Examples/TailwindGuideSourceFiles1Example.snippet
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion ...azorise.Docs/Pages/Docs/Guides/Tailwind/Examples/TailwindGuideSourceFiles2Example.snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<script src="https://unpkg.com/flowbite@1.5.4/dist/flowbite.js"></script>
 <script src="https://unpkg.com/flowbite@3.1.2/dist/flowbite.js"></script>
4 changes: 2 additions & 2 deletions ...azorise.Docs/Pages/Docs/Guides/Tailwind/Examples/TailwindGuideSourceFiles3Example.snippet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.4/dist/flowbite.min.css" />
<link rel="stylesheet" href="https://unpkg.com/flowbite@3.1.2/dist/flowbite.min.css" />
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

<link href="_content/Blazorise/blazorise.css?v=1.7.5.0" rel="stylesheet" />
<link href="_content/Blazorise.Tailwind/blazorise.tailwind.prod.css?v=1.7.5.0" rel="stylesheet" />
<link href="_content/Blazorise.Tailwind/blazorise.tailwind.min.css?v=1.7.5.0" rel="stylesheet" />
33 changes: 5 additions & 28 deletions Documentation/Blazorise.Docs/Pages/Docs/Guides/Tailwind/TailwindGuidePage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,11 @@
</DocsPageUnorderedList>
</DocsPageParagraph>

<Heading Size="HeadingSize.Is3">
Using in Development
</Heading>

<DocsPageParagraph>
For development, you should use the JIT version of the CSS files. We have already included the necessary files in the <Strong>Blazorise.Tailwind</Strong> package.
</DocsPageParagraph>

<DocsPageSection>
<DocsPageSectionHeader>
Add these lines inside the <Code Tag>head</Code> section:
</DocsPageSectionHeader>
<DocsPageSectionSource Code="TailwindGuideSourceFiles1Example" />
<DocsPageSectionSource Code="TailwindGuideSourceFiles3Example" />
</DocsPageSection>

<DocsPageSection>
Expand All @@ -88,31 +80,16 @@
<DocsPageSectionSource Code="TailwindGuideSourceFiles2Example" />
</DocsPageSection>

<Heading Size="HeadingSize.Is3">
Using in Production
</Heading>

<DocsPageParagraph>
For production, you should use the prebuilt version of the CSS files. We have already included the necessary files in the <Strong>Blazorise.Tailwind</Strong> package.
</DocsPageParagraph>

<DocsPageParagraph>
If you're interested in integrating Tailwind CSS with your Blazor projects, check out our blog post that guides you through the process of <Anchor To="blog/blazor-and-tailwind-quick-setup-without-npm" Title="Link to use Tailwind CSS with Blazorise">using Tailwind CSS with Blazor</Anchor>.
</DocsPageParagraph>

<DocsPageSection>
<DocsPageSectionHeader>
Add these lines inside the <Code Tag>head</Code> section:
</DocsPageSectionHeader>
<DocsPageSectionSource Code="TailwindGuideSourceFiles3Example" />
</DocsPageSection>

<Alert Color="Color.Info" Visible>
<AlertDescription>
<Strong>Note:</Strong> Don't forget to remove Bootstrap JS and CSS files that comes with the default Blazor project template.
</AlertDescription>
</Alert>

<DocsPageParagraph>
If you're interested in integrating Tailwind CSS with your Blazor projects, check out our blog post that guides you through the process of <Anchor To="blog/blazor-and-tailwind-quick-setup-without-npm" Title="Link to use Tailwind CSS with Blazorise">using Tailwind CSS with Blazor</Anchor>.
</DocsPageParagraph>

<DocsPageSubtitle>
Add Imports
</DocsPageSubtitle>
Expand Down
Loading
Loading