Skip to content

Commit 4286731

Browse files
linkdotnetlinkdotnet
committed
Added Blazor Tailwind4
1 parent 0219349 commit 4286731

19 files changed

+3296
-1
lines changed

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,7 @@ robots.txt
2424
/**/TestResults/*
2525
/**/coverage*.xml
2626
/CoverageReport/
27-
.DS_Store
27+
.DS_Store
28+
29+
# Node
30+
node_modules/

‎BlazorTailwind4/BlazorTailwind4.csproj

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net9.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
10+
<Exec Command="npm run build:css" />
11+
</Target>
12+
</Project>

‎BlazorTailwind4/BlazorTailwind4.sln

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorTailwind4", "BlazorTailwind4.csproj", "{6B426960-A699-4415-9C5F-8B8B8D34A59D}"
4+
EndProject
5+
Global
6+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
7+
Debug|Any CPU = Debug|Any CPU
8+
Release|Any CPU = Release|Any CPU
9+
EndGlobalSection
10+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
11+
{6B426960-A699-4415-9C5F-8B8B8D34A59D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
12+
{6B426960-A699-4415-9C5F-8B8B8D34A59D}.Debug|Any CPU.Build.0 = Debug|Any CPU
13+
{6B426960-A699-4415-9C5F-8B8B8D34A59D}.Release|Any CPU.ActiveCfg = Release|Any CPU
14+
{6B426960-A699-4415-9C5F-8B8B8D34A59D}.Release|Any CPU.Build.0 = Release|Any CPU
15+
EndGlobalSection
16+
EndGlobal

‎BlazorTailwind4/Components/App.razor

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8"/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7+
<base href="/"/>
8+
<link rel="stylesheet" href="dist.css"/>
9+
<link rel="stylesheet" href="@Assets["BlazorTailwind4.styles.css"]"/>
10+
<ImportMap/>
11+
<HeadOutlet/>
12+
</head>
13+
14+
<body>
15+
<Routes/>
16+
<script src="_framework/blazor.web.js"></script>
17+
</body>
18+
19+
</html>

‎BlazorTailwind4/Components/Layout/MainLayout.razor

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@inherits LayoutComponentBase
2+
3+
@Body

‎BlazorTailwind4/Components/Layout/MainLayout.razor.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#blazor-error-ui {
2+
color-scheme: light only;
3+
background: lightyellow;
4+
bottom: 0;
5+
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
6+
box-sizing: border-box;
7+
display: none;
8+
left: 0;
9+
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
10+
position: fixed;
11+
width: 100%;
12+
z-index: 1000;
13+
}
14+
15+
#blazor-error-ui .dismiss {
16+
cursor: pointer;
17+
position: absolute;
18+
right: 0.75rem;
19+
top: 0.5rem;
20+
}

‎BlazorTailwind4/Components/Pages/Error.razor

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/Error"
2+
@using System.Diagnostics
3+
4+
<PageTitle>Error</PageTitle>
5+
6+
<h1 class="text-danger">Error.</h1>
7+
<h2 class="text-danger">An error occurred while processing your request.</h2>
8+
9+
@if (ShowRequestId)
10+
{
11+
<p>
12+
<strong>Request ID:</strong> <code>@RequestId</code>
13+
</p>
14+
}
15+
16+
<h3>Development Mode</h3>
17+
<p>
18+
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
19+
</p>
20+
<p>
21+
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
22+
It can result in displaying sensitive information from exceptions to end users.
23+
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
24+
and restarting the app.
25+
</p>
26+
27+
@code{
28+
[CascadingParameter] private HttpContext? HttpContext { get; set; }
29+
30+
private string? RequestId { get; set; }
31+
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
32+
33+
protected override void OnInitialized() =>
34+
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
35+
36+
}

‎BlazorTailwind4/Components/Pages/Home.razor

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@page "/"
2+
3+
<PageTitle>Home</PageTitle>
4+
5+
<h1 class="p-4 font-bold text-blue-600">Hello, world!</h1>

‎BlazorTailwind4/Components/Routes.razor

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<Router AppAssembly="typeof(Program).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)"/>
4+
<FocusOnNavigate RouteData="routeData" Selector="h1"/>
5+
</Found>
6+
</Router>

‎BlazorTailwind4/Components/_Imports.razor

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@using System.Net.Http
2+
@using System.Net.Http.Json
3+
@using Microsoft.AspNetCore.Components.Forms
4+
@using Microsoft.AspNetCore.Components.Routing
5+
@using Microsoft.AspNetCore.Components.Web
6+
@using static Microsoft.AspNetCore.Components.Web.RenderMode
7+
@using Microsoft.AspNetCore.Components.Web.Virtualization
8+
@using Microsoft.JSInterop
9+
@using BlazorTailwind4
10+
@using BlazorTailwind4.Components

‎BlazorTailwind4/Program.cs

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using BlazorTailwind4.Components;
2+
3+
var builder = WebApplication.CreateBuilder(args);
4+
5+
// Add services to the container.
6+
builder.Services.AddRazorComponents();
7+
8+
var app = builder.Build();
9+
10+
// Configure the HTTP request pipeline.
11+
if (!app.Environment.IsDevelopment())
12+
{
13+
app.UseExceptionHandler("/Error", createScopeForErrors: true);
14+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
15+
app.UseHsts();
16+
}
17+
18+
app.UseHttpsRedirection();
19+
20+
21+
app.UseAntiforgery();
22+
23+
app.MapStaticAssets();
24+
app.MapRazorComponents<App>();
25+
26+
app.Run();

‎BlazorTailwind4/Properties/launchSettings.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"$schema": "https://json.schemastore.org/launchsettings.json",
3+
"profiles": {
4+
"http": {
5+
"commandName": "Project",
6+
"dotnetRunMessages": true,
7+
"launchBrowser": true,
8+
"applicationUrl": "http://localhost:5166",
9+
"environmentVariables": {
10+
"ASPNETCORE_ENVIRONMENT": "Development"
11+
}
12+
},
13+
"https": {
14+
"commandName": "Project",
15+
"dotnetRunMessages": true,
16+
"launchBrowser": true,
17+
"applicationUrl": "https://localhost:7185;http://localhost:5166",
18+
"environmentVariables": {
19+
"ASPNETCORE_ENVIRONMENT": "Development"
20+
}
21+
}
22+
}
23+
}

‎BlazorTailwind4/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Tailwind v4 with Blazor - It just got easier
2+
3+
**Tailwind** version 4 [was just released](https://tailwindcss.com/blog/tailwindcss-v4). With the new CLI, it is just so much easier to use tailwindcss with **Blazor**. So in this post, I will show you how to use the new CLI to create a new Blazor project with Tailwind v4.
4+
5+
Short desclaimer: If you still want to use version 3, I already wrote an article about this some time ago: [*"Blazor with TailwindCSS"*](https://steven-giesel.com/blogPost/351838ba-e308-4a09-b9f6-75bb95c39610/blazor-with-tailwindcss).
6+
7+
Found [here](https://steven-giesel.com/blogPost/364c43d2-b31e-4377-8001-ac75ce78cdc6/tailwind-v4-with-blazor-it-just-got-easier)

‎BlazorTailwind4/appsettings.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"Logging": {
3+
"LogLevel": {
4+
"Default": "Information",
5+
"Microsoft.AspNetCore": "Warning"
6+
}
7+
},
8+
"AllowedHosts": "*"
9+
}

0 commit comments

Comments
 (0)