Build Responsive Sidebars with Tailwind UI & ASP.NET Core In C#— Web App Tutorial

3 min readApr 9, 2023

Today, we’re going to explore how you can create a super cool responsive sidebar layout for your web app using Tailwind UI and ASP.NET Core.

Tailwind UI brings modern design to the table, while ASP.NET Core offers a powerful and straightforward framework for building web apps.

Combine the two, and you’ve got a recipe for an amazing user experience that adapts seamlessly to different screen sizes.

Step 1: Set up a new ASP.NET Core web application

Create a new ASP.NET Core web application using the dotnet CLI or Visual Studio. For this example, we'll use the dotnet CLI:

dotnet new webapp -o MyResponsiveSidebarApp
cd MyResponsiveSidebarApp

Step 2: Install Tailwind CSS and configure it

Add the required npm packages for Tailwind CSS:

npm init -y
npm install tailwindcss@latest postcss@latest autoprefixer@latest

Create the configuration files:

npx tailwindcss init -p

This creates a tailwind.config.js and postcss.config.js file in your project.

In tailwind.config.js, add the following content:

module.exports = {
 purge: [‘./**/*.html’, ‘./**/*.cshtml’],
 darkMode: false,
 theme: {
 extend: {},
 },
 variants: {
 extend: {},
 },
 plugins: [
 require(‘@tailwindcss/forms’),
 ],
}

Step 3: Add Tailwind CSS to your styles

Open wwwroot/css/site.css and replace its content with:

@import ‘tailwindcss/base’;
@import ‘tailwindcss/components’;
@import ‘tailwindcss/utilities’;

Step 4: Add the responsive sidebar layout

Open the _Layout.cshtml file located in the Views/Shared folder and replace the existing content with the following code:

<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8">
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
 <link rel=”stylesheet” href=”~/css/site.css”>
 <title>@ViewData[“Title”] — MyResponsiveSidebarApp</title>
</head>
<body class=”bg-gray-100">
 <div class=”flex flex-col md:flex-row min-h-screen”>
 <! — Sidebar →
 <div class=”bg-blue-600 md:w-64 p-4">
 <div class=”text-white font-semibold text-2xl mb-6">
 MyResponsiveSidebarApp
 </div>
 <nav>
 <a href=”#” class=”block text-white mb-2">Home</a>
 <a href=”#” class=”block text-white mb-2">About</a>
 <a href=”#” class=”block text-white mb-2">Contact</a>
 </nav>
 </div>
 <! — Main Content →
 <div class=”flex-1 p-4">
 @RenderBody()
 </div>
 </div>
 <script src=”~/lib/jquery/dist/jquery.min.js”></script>
 <script src=”~/lib/bootstrap/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>

Step 5: Update the `Index.cshtml` file

Open the Index.cshtml file located in the Views/Home folder and replace the existing content with the following code:

@{
 ViewData[“Title”] = “Home Page”;
}
<div class=”container mx-auto”>
 <div class=”text-center my-8">
 <h1 class=”text-4xl font-semibold”>Welcome to MyResponsiveSidebarApp!</h1>
 <p class=”mt-4 text-lg”>This is an ASP.NET Core web application with a responsive sidebar layout using Tailwind UI.</p>
 </div>
</div>

Step 6: Run the application

Start your ASP.NET Core web application using the dotnet CLI or Visual Studio. For this example, we'll use the dotnet CLI:

dotnet watch run

Now, navigate to https://localhost:5001 or http://localhost:5000 in your web browser. You should see the responsive sidebar layout with Tailwind UI in your ASP.NET Core web application.

To make the sidebar responsive, you can add a button for toggling the sidebar visibility on smaller screens. Update the _Layout.cshtml file with the following changes:

Step 7: Add a button for toggling the sidebar visibility

Add a button for toggling the sidebar

<! — Main Content →
<div class=”flex-1 p-4 md:relative”>
 <button id=”sidebarToggle” class=”md:hidden p-1 text-white bg-blue-600 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 <svg xmlns=”http://www.w3.org/2000/svg" class=”h-6 w-6" fill=”none” viewBox=”0 0 24 24" stroke=”currentColor”>
 <path strokeLinecap=”round” strokeLinejoin=”round” strokeWidth=”2" d=”M4 6h16M4 12h16M4 18h16" />
 </svg>
 </button>
 @RenderBody()
</div>

Add a CSS class for hiding the sidebar and some JavaScript to toggle the sidebar visibility

<! — Add this style in the head tag of _Layout.cshtml →
<style>
 .sidebar-hidden {
 transform: translateX(-100%);
 }
</style>
<! — Add this script before the closing body tag of _Layout.cshtml →
<script>
 document.addEventListener(“DOMContentLoaded”, function () {
 const sidebarToggle = document.getElementById(“sidebarToggle”);
 const sidebar = document.querySelector(“.sidebar”);
sidebarToggle.addEventListener(“click”, function () {
 sidebar.classList.toggle(“sidebar-hidden”);
 });
 });
</script>

Add the sidebar and sidebar-hidden classes to the sidebar div:

<! — Sidebar →
<div class=”sidebar sidebar-hidden bg-blue-600 md:w-64 p-4 md:relative md:translate-x-0">
 …
</div>

Now, when you run the application, the sidebar will be hidden by default on smaller screens, and you can toggle its visibility using the button.

Keep in mind that this example uses basic JavaScript for toggling the sidebar. In a real-world application, you might want to use a more sophisticated state management solution, such as React or Vue.js.

Follow NextGen AI for more programming tutorials and stay updated with the latest news on AI.