Skip to content

Replace Bootstrap with Tailwind CSS #4

Description

@wendellmva

Summary

Replace the legacy Bootstrap 3.4.1 + jQuery + Office UI Fabric frontend with Tailwind CSS.

Current Stack (to remove)

  • Bootstrap 3.4.1
  • jQuery 3.5.1
  • Office UI Fabric Core 11.0.0

New Stack

  • Tailwind CSS (via standalone CLI - no npm required)
  • Alpine.js 3.x (upgrade from 2.8.1)
  • Lucide icons (replace Office UI Fabric icons)

Tasks

  • Set up Tailwind CSS standalone CLI build
  • Create tailwind.config.js
  • Create Styles/input.css with Tailwind directives
  • Migrate _Layout.cshtml to Tailwind classes
  • Migrate Index.cshtml (package search page)
  • Migrate Package.cshtml (package details page)
  • Migrate Upload.cshtml (upload instructions)
  • Replace Office UI Fabric icons with Lucide
  • Update libman.json to remove old libraries
  • Delete old wwwroot/css/site.css
  • Modernize wwwroot/js/site.js (remove IE detection)
  • Upgrade Alpine.js to 3.x

Component Migration

Bootstrap Tailwind
.navbar-inverse bg-slate-900 text-white
.btn .btn-default px-4 py-2 bg-white border rounded
.container max-w-7xl mx-auto px-4
.form-control w-full px-3 py-2 border rounded-md

Files to Modify

  • src/BaGet.Web/libman.json
  • src/BaGet.Web/Pages/Shared/_Layout.cshtml
  • src/BaGet.Web/Pages/Index.cshtml
  • src/BaGet.Web/Pages/Package.cshtml
  • src/BaGet.Web/Pages/Upload.cshtml
  • src/BaGet.Web/wwwroot/css/site.css
  • src/BaGet.Web/wwwroot/js/site.js

Dependencies

  • Depends on .NET 9 upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Medium priorityfeatureNew feature

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions