Introduction
In the evolving world of web development, the importance of a visually appealing and highly responsive user interface cannot be overstated. Achieving this has been made easier with the use of CSS frameworks like TailwindCSS. This blog post will explore how to implement TailwindCSS in a Blazor web application, a modern UI framework by Microsoft.
Setting up TailwindCSS
To kick things off, we need to set up TailwindCSS in our Blazor Web App. The first step is to install Node.js and NPM in your system, if not already installed.
Step 1: Create Blazor Web Application
dotnet new blazor --name Example.Blogs.Tailwind
cd Example.Blogs.TailwindStep 2: Add package.json
Simply respond to all the prompts and, finally, enter “yes” to complete the creation of the package.json file.
Step 3: Add tailwind & postcss packages
npm install -d tailwindcss postcss postcss-cliStep 4: Add tailwindforms, typography and aspect-ratio libraries
We will explore these libraries in our next blog series.
npm install -d @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typographyStep 5: Create tailwindconfig.js
npx tailwindcss initStep 6: Update package.json
We have included the “css:build” code in the scripts section.
{
"name": "example.blogs.tailwind",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"css:build": "npx tailwind build -i ./wwwroot/styles/app.css -o ./wwwroot/css/site.css"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.13",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"postcss-cli": "^11.0.0",
"tailwindcss": "^3.4.4"
}
}Step 7: Update postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
} Step 8: Update tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
content: ["./**/*.{razor,html,cshtml}"],
theme: {
extend: {
colors: {
"azul" : "#076DB7",
"steel-blue": "#5183AD",
"azure-web" : "#DFF4FC",
"green-blue" : "#1366AB",
"french-blue" : "#0072BB",
"header-bg" : "#163b6a"
}
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("@tailwindcss/aspect-ratio"),
],
}Step 9: Create Folder under wwwroot
mkdir styles
cd stylesStep 10: Create app.css file
@tailwind base;
@tailwind components;
@tailwind utilities;Step 11: Update App.razor
<!DOCTYPE html>
<html lang="en" class="h-full bg-white">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="app.css" />
<Link rel="stylesheet" href="css/site.css" />
<link rel="stylesheet" href="Example.Blogs.Tailwind.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body class="h-full">
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>Step 12: Update MainLayout.razor
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
-->
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
<img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
</div>
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
@Body
</div>
</div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>Step 13: Home.razor
@page "/"
<form class="space-y-6" action="#" method="POST">
<div>
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
<div class="mt-2">
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div>
<div class="flex items-center justify-between">
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
<div class="text-sm">
<a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
</div>
</div>
<div class="mt-2">
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div>
<button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</button>
</div>
</form>
<p class="mt-10 text-center text-sm text-gray-500">
Not a member?
<a href="#" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">Start a 14 day free trial</a>
</p>Step 14: Add the below lines in Examples.Blogs.Tailwind.csproj
<Target Name="PostBuild" AfterTargets="PostBuildEvent">
<Exec Command="npm run css:build"/>
</Target>These lines will help us to generate the site.css file dynamically.
Step 15: Run the application
dotnet runStep 16: Output
Conclusion
To set up TailwindCSS in a Blazor web application, install Node.js and NPM, create a Blazor Web Application, add package.json, tailwind & postcss packages, tailwindforms, typography and aspect-ratio libraries, and create tailwindconfig.js. Update package.json, postcss.config.js, tailwind.config.js, App.razor, MainLayout.razor, and Home.razor. Finally, add specific lines in Examples.Blogs.Tailwind.csproj to generate the site.css file dynamically.
