Remove Bootstrap and integrate Tailwind CSS by nblasd · Pull Request #491 · TarteelAI/quranic-universal-library

nblasd · 2026-01-05T05:11:59Z

No description provided.

Copilot

Pull request overview

This PR removes Bootstrap CSS dependencies and completes the migration to Tailwind CSS across the application. The changes systematically replace Bootstrap utility classes with their Tailwind equivalents throughout view files, ensuring consistent styling while maintaining the same visual appearance.

Key Changes

Removed Bootstrap stylesheet link from meta tags
Replaced duplicate Tailwind utility classes (e.g., tw-mb-4 tw-mb-2 → tw-tw-mb-4 tw-tw-mb-2)
Converted Bootstrap component classes to Tailwind equivalents (buttons, navigation, modals, alerts)
Updated interactive components (dropdowns, tabs, collapse) to use Stimulus controllers instead of Bootstrap JavaScript

Reviewed changes

Copilot reviewed 300 out of 305 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
app/views/shared/_meta_tags.html.erb	Removed Bootstrap stylesheet link
app/views/word_translations/*.html.erb	Fixed duplicate Tailwind margin/padding classes
app/views/word_text_proofreadings/*.html.erb	Replaced Bootstrap buttons and pagination with Tailwind
app/views/translation_proofreadings/*.html.erb	Converted Bootstrap dropdowns and buttons to Tailwind
app/views/tools/header_alert/*.html.erb	Replaced Bootstrap close buttons with Tailwind SVG implementation
app/views/shared/_nav.html.erb	Updated navigation to use Stimulus collapse controller
app/views/tajweed_words/*.html.erb	Converted Bootstrap offcanvas to Tailwind with Stimulus
Multiple other view files	Fixed duplicate Tailwind classes throughout

Copilot · 2026-01-06T20:47:14Z

app/views/word_translations/group_info.html.erb

        <%= render 'shared/form_errors', object: @word_translation %>

-        <div class="tw-mb-4 tw-mb-2">
+        <div class="tw-tw-mb-4 tw-tw-mb-2">


Duplicate margin-bottom classes with different values. The class contains both tw-tw-mb-4 and tw-tw-mb-2, which will conflict. Keep only one margin-bottom value.

Copilot · 2026-01-06T20:47:15Z

app/views/word_translations/group_info.html.erb


-        <div class="tw-mb-4 tw-flex tw-justify-end tw-mt-3">
+        <div class="tw-tw-mb-4 tw-flex tw-justify-end tw-tw-mt-3">
          <%= form.submit 'Save group translaiton',


Corrected spelling of 'translaiton' to 'translation'.

Suggested change

<%= form.submit 'Save group translaiton',

<%= form.submit 'Save group translation',

Copilot · 2026-01-06T20:47:15Z

app/views/word_translations/group_info.html.erb

+        <div class="tw-tw-mb-4 tw-tw-mb-2">
          <%= form.label :word_range_from %>
-          <%= form.select :word_range_from, options_for_select(words, group_word_from.position), {}, class: 'form-control', data: { controller: 'select2', parent: '#ajax-modal' } %>
+          <%= form.select :word_range_from, options_for_select(words, group_word_from.position), {}, class: 'tw-w-full tw-px-3 tw-py-2 tw-border tw-border-gray-300 tw-rounded-md tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-500 tw-focus:tw-border-transparent', data: { controller: 'select2', parent: '#ajax-modal' } %>


The tw-focus: prefix is incorrect. Tailwind CSS uses focus: (without the tw- prefix) for pseudo-class variants. Change tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-500 tw-focus:tw-border-transparent to focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent.

Copilot · 2026-01-06T20:47:15Z

app/views/word_text_proofreadings/show.html.erb

+    actions << link_to('Next ayah', word_text_proofreading_path(@verse.id + 1), class: 'tw-px-4 tw-py-2 tw-rounded tw-font-medium tw-transition-colors tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white')
  end
-  actions << link_to('Back to filter', word_text_proofreadings_path, class: 'btn btn-info')
+  actions << link_to('Back to filter', word_text_proofreadings_path, class: 'btn btn-outline-info tw-text-sm')


Incomplete Bootstrap to Tailwind migration. The classes still contain btn btn-outline-info which are Bootstrap classes. These should be replaced with equivalent Tailwind classes like tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-border tw-border-blue-500 tw-text-blue-500 hover:tw-bg-blue-500 hover:tw-text-white tw-rounded tw-transition-colors.

Suggested change

actions << link_to('Back to filter', word_text_proofreadings_path, class: 'btn btn-outline-info tw-text-sm')

actions << link_to('Back to filter', word_text_proofreadings_path, class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-border tw-border-blue-500 tw-text-blue-500 hover:tw-bg-blue-500 hover:tw-text-white tw-rounded tw-transition-colors')

Copilot · 2026-01-06T20:47:16Z

app/views/word_text_proofreadings/show.html.erb

-     <%= link_to( 'Back to filter', word_text_proofreadings_path, class: 'btn btn-info') %>
+     <%= link_to( 'Previous ayah', word_text_proofreading_path(@verse.id - 1), class: 'tw-px-4 tw-py-2 tw-rounded tw-font-medium tw-transition-colors tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white') if @verse.id > 1 %>
+     <%= link_to( 'Next ayah', word_text_proofreading_path(@verse.id + 1), class: 'tw-px-4 tw-py-2 tw-rounded tw-font-medium tw-transition-colors tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white') if @verse.id < 6236 %>
+     <%= link_to( 'Back to filter', word_text_proofreadings_path, class: 'btn btn-outline-info tw-text-sm') %>


Incomplete Bootstrap to Tailwind migration. The classes still contain btn btn-outline-info which are Bootstrap classes. These should be replaced with equivalent Tailwind classes like tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-border tw-border-blue-500 tw-text-blue-500 hover:tw-bg-blue-500 hover:tw-text-white tw-rounded tw-transition-colors.

Copilot · 2026-01-06T20:47:16Z

app/views/tools/_header.html.erb

 <div id="resources-header">
  <div class="tw-pb-8 md:tw-pb-14 tw-overflow-hidden tw-pt-[70px] md:tw-pt-[80px] tw-relative tw-border-b" id="hero">
-    <div id="resource-bg">
+    <div id="resource-bg" style="background-image: url('<%= image_path('resource-header-bg.svg') %>');">


Inline style attribute added for background image. Consider moving this to a CSS class or using Tailwind's arbitrary value syntax for better maintainability and consistency.

Suggested change

<div id="resource-bg" style="background-image: url('<%= image_path('resource-header-bg.svg') %>');">

<div id="resource-bg" class="tw-bg-[url('<%= image_path('resource-header-bg.svg') %>')]">

Copilot · 2026-01-06T20:47:16Z

app/views/tajweed_words/show.html.erb


      <div class="tw-flex">
-        <button class="tw-px-4 tw-py-2 tw-rounded tw-font-medium tw-transition-colors tw-bg-blue-400 hover:tw-bg-blue-500 tw-text-white tw-me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#tajweed-rules-sidebar" aria-controls="tajweed-rules-sidebar">
+        <button class="tw-px-4 tw-py-2 tw-rounded tw-font-medium tw-transition-colors tw-bg-blue-400 hover:tw-bg-blue-500 tw-text-white tw-me-2" type="button" data-controller="offcanvas" data-action="click->offcanvas#toggle" data-offcanvas-target-value="#tajweed-rules-sidebar" aria-controls="tajweed-rules-sidebar">


The data attribute data-offcanvas-target-value should be data-offcanvas-target for Stimulus controller targets. The naming convention suggests this is a value, but the actual element should use data-offcanvas-target="offcanvas" on the offcanvas element itself.

Copilot · 2026-01-06T20:47:17Z

app/views/shared/_nav.html.erb

      Tarteel <small style="color: #00a3ff">QUL</small>
    </a>
-    <button class="tw-block md:tw-hidden tw-p-2 tw-rounded tw-border tw-border-gray-300 tw-bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="tw-block md:tw-hidden tw-p-2 tw-rounded tw-border tw-border-gray-300 tw-bg-white" type="button" data-controller="collapse" data-action="click->collapse#toggle" data-collapse-target-value="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">


Similar to the offcanvas issue, data-collapse-target-value should follow Stimulus conventions. The attribute naming suggests this should be a target reference, not a value. Verify the Stimulus collapse controller implementation matches this usage.

Copilot · 2026-01-06T20:47:17Z

app/views/tools/header_alert/_morphology_treebank.html.erb

    </p>

-    <p class="mb-0">
+    <p class="tw-tw-mb-0">


Duplicate tw- prefix in tw-tw-mb-0. Should be tw-mb-0.

Suggested change

<p class="tw-tw-mb-0">

<p class="tw-mb-0">

… variant naming

Copilot

Pull request overview

Copilot reviewed 300 out of 305 changed files in this pull request and generated 14 comments.

Copilot · 2026-01-07T08:35:48Z

app/views/word_translations/_word_translation_field.html.erb

+<div class="tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm tw-tw-mb-5 tw-tw-p-3">
+  <h5 class="tw-text-lg tw-font-semibold tw-tw-mb-3 tw-tw-text-right" dir="rtl">


Duplicate tw- prefix in class names. Classes like tw-tw-mb-5, tw-tw-p-3, tw-tw-mb-3, and tw-tw-text-right should have the redundant prefix removed to become tw-mb-5, tw-p-3, tw-mb-3, and tw-text-right.

Copilot · 2026-01-07T08:35:48Z

app/views/word_translations/_word_translation_field.html.erb


  <div
-    class="tw-p-0 word-translation"
+    class="tw-tw-p-0 word-translation"


Duplicate tw- prefix in tw-tw-p-0 class name should be corrected to tw-p-0.

Suggested change

class="tw-tw-p-0 word-translation"

class="tw-p-0 word-translation"

Copilot · 2026-01-07T08:35:48Z

app/views/word_translations/_word_translation_field.html.erb

    <div class="tw-flex tw-flex-wrap tw-gap-4">
      <div class="tw-w-full md:tw-w-1/2">
-        <div class="tw-mb-4">
+        <div class="tw-tw-mb-4">


Duplicate tw- prefix in tw-tw-mb-4 should be corrected to tw-mb-4.

Copilot · 2026-01-07T08:35:49Z

app/views/word_translations/_word_translation_field.html.erb

                              class: "tw-w-full tw-px-3 tw-py-2 tw-border tw-border-gray-300 tw-rounded-md tw-focus:tw-outline-none tw-focus:tw-ring-2 tw-focus:tw-ring-blue-500 tw-focus:tw-border-transparent #{@language.name.downcase}",
                              placeholder: "Enter #{@language.name} translation of #{word.location}" %>
-          <div class="tw-flex tw-items-center tw-justify-between tw-text-sm tw-text-gray-600 tw-mt-2">
+          <div class="tw-flex tw-items-center tw-justify-between tw-text-sm tw-text-gray-600 tw-tw-mt-2">


Duplicate tw- prefix in tw-tw-mt-2 should be corrected to tw-mt-2.

Suggested change

<div class="tw-flex tw-items-center tw-justify-between tw-text-sm tw-text-gray-600 tw-tw-mt-2">

<div class="tw-flex tw-items-center tw-justify-between tw-text-sm tw-text-gray-600 tw-mt-2">

Copilot · 2026-01-07T08:35:49Z

app/views/word_translations/_word_group_info.html.erb

@@ -1,9 +1,9 @@
-<div class="tw-mb-4" id="<%= dom_id word, :group %>">
+<div class="tw-tw-mb-4" id="<%= dom_id word, :group %>">


Duplicate tw- prefix in tw-tw-mb-4 should be corrected to tw-mb-4.

Copilot · 2026-01-07T08:35:51Z

app/views/word_mistakes/edit.html.erb

  <div class="tw-mb-6">
    <h1 class="tw-text-3xl tw-font-bold">Edit Word Mistakes - Page <%= page_number %></h1>
-    <p class="tw-text-sm tw-text-gray-600 tw-mt-2">Changes save automatically as you type</p>
+    <p class="tw-text-sm tw-text-gray-600 tw-tw-mt-2">Changes save automatically as you type</p>


Duplicate tw- prefix pattern appears throughout this file with classes like tw-tw-mt-2, tw-tw-mb-4, tw-tw-p-3, tw-tw-mb-2, tw-tw-p-2. All should be corrected to remove the redundant tw- prefix.

Copilot · 2026-01-07T08:35:51Z

app/views/word_concordance_labels/word_detail.html.erb

  </div>

-  <div class="page-section tw-mt-4">
+  <div class="page-section tw-tw-mt-4">


Duplicate tw- prefix in tw-tw-mt-4 should be corrected to tw-mt-4.

Suggested change

<div class="page-section tw-tw-mt-4">

<div class="page-section tw-mt-4">

Copilot · 2026-01-07T08:35:52Z

app/views/word_concordance_labels/show.html.erb

 <div class="page-wrapper tw-container tw-max-w-7xl tw-mx-auto tw-px-4">
  <div class="page-section">
-    <div class="tw-px-4 tw-py-3 tw-rounded tw-mb-4 tw-bg-[#d3d3d4] tw-border tw-text-black" role="alert">
+    <div class="tw-px-4 tw-py-3 tw-rounded tw-tw-mb-4 tw-bg-[#d3d3d4] tw-border tw-text-black" role="alert">


Duplicate tw- prefix in tw-tw-mb-4 should be corrected to tw-mb-4.

Suggested change

<div class="tw-px-4 tw-py-3 tw-rounded tw-tw-mb-4 tw-bg-[#d3d3d4] tw-border tw-text-black" role="alert">

<div class="tw-px-4 tw-py-3 tw-rounded tw-mb-4 tw-bg-[#d3d3d4] tw-border tw-text-black" role="alert">

Copilot · 2026-01-07T08:35:52Z

app/views/word_concordance_labels/show.html.erb

-    <%= link_to('Previous ayah', word_concordance_label_path(@verse.id - 1), class: 'btn btn-dark') if previous_ayah %>
-    <%= link_to('Next ayah', word_concordance_label_path(@verse.id + 1), class: 'btn btn-dark') if next_ayah %>
-    <%= link_to('Back to filter', word_concordance_labels_path, class: 'btn btn-info') %>
+  <div class="tw-flex tw-justify-end tw-gap-2 tw-tw-mt-3">


Duplicate tw- prefix in tw-tw-mt-3 should be corrected to tw-mt-3.

Suggested change

<div class="tw-flex tw-justify-end tw-gap-2 tw-tw-mt-3">

<div class="tw-flex tw-justify-end tw-gap-2 tw-mt-3">

Copilot · 2026-01-07T08:35:53Z

app/views/word_concordance_labels/index.html.erb

+        <div class="tw-tw-mb-4">
+          <%= submit_tag 'Filter', class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors', data: { disable_with: 'Please wait..' } %>
+          <%= link_to 'Clear', word_concordance_labels_path, class: 'tw-text-gray-900 hover:tw-text-gray-700 hover:tw-underline' if has_filters?(:filter_verse, :filter_chapter, :filter_juz) %>


Multiple duplicate tw- prefix instances including tw-tw-mb-4, tw-tw-mt-4 throughout the file should be corrected.

- Updated tooltip controller to use fixed positioning for better visibility - Added event listeners to both container div and SVG element for reliable hover detection - Improved tooltip positioning logic to handle viewport boundaries - Removed Bootstrap dependency and replaced with Tailwind CSS styling - Enhanced tooltip styling with better padding and shadow effects

…w files

- Add target value support to collapse controller for trigger elements - Fix toggle behavior to properly manipulate target element instead of trigger - Add proper event handling to prevent event propagation issues - Update trigger visual state (chevron icons, aria-expanded) correctly

- Add hover effect (#46ac7a) to all sortable table headers - Add hover effect (#46ac7a) to footer links - Add hover effect (#46ac7a) to resource name links across system - Add hover effect (#46ac7a) to count badges on resources page - Remove close button from alert messages and associated functionality - Update dropdown controller to close other dropdowns when one opens - Update pagination UI with connected buttons and vertical separators - Update Help button styling to match other help buttons - Update button styles in tools header and related views

nblasd added 2 commits January 5, 2026 09:29

Remove Bootstrap and integrate Tailwind CSS

6855e28

Fix mobile menu toggle and styling

2a208ab

naveed-ahmad requested a review from Copilot January 6, 2026 20:45

Copilot AI reviewed Jan 6, 2026

View reviewed changes

nblasd added 3 commits January 7, 2026 10:11

Refactor: Replace Bootstrap with Tailwind, fix redundant prefixes and…

00969a9

… variant naming

Add tw-invert class to resource-bg in tools header

51642ae

Fix tabs: Tailwind + Stimulus, remove bootstrap tab attrs

05c9564

naveed-ahmad requested a review from Copilot January 7, 2026 08:33

Copilot AI reviewed Jan 7, 2026

View reviewed changes

nblasd added 4 commits January 7, 2026 13:59

Fix duplicate Tailwind prefix: replace tw-tw- with tw- across all vie…

2dccbd1

…w files

naveed-ahmad merged commit 771ef78 into TarteelAI:main Jan 9, 2026
3 checks passed

	<%= form.submit 'Save group translaiton',
	<%= form.submit 'Save group translation',

	actions << link_to('Back to filter', word_text_proofreadings_path, class: 'btn btn-outline-info tw-text-sm')
	actions << link_to('Back to filter', word_text_proofreadings_path, class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-border tw-border-blue-500 tw-text-blue-500 hover:tw-bg-blue-500 hover:tw-text-white tw-rounded tw-transition-colors')

	<div id="resource-bg" style="background-image: url('<%= image_path('resource-header-bg.svg') %>');">
	<div id="resource-bg" class="tw-bg-[url('<%= image_path('resource-header-bg.svg') %>')]">

		<div class="tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm tw-tw-mb-5 tw-tw-p-3">
		<h5 class="tw-text-lg tw-font-semibold tw-tw-mb-3 tw-tw-text-right" dir="rtl">

	class="tw-tw-p-0 word-translation"
	class="tw-p-0 word-translation"

	<div class="tw-flex tw-items-center tw-justify-between tw-text-sm tw-text-gray-600 tw-tw-mt-2">
	<div class="tw-flex tw-items-center tw-justify-between tw-text-sm tw-text-gray-600 tw-mt-2">

		@@ -1,9 +1,9 @@
		<div class="tw-mb-4" id="<%= dom_id word, :group %>">
		<div class="tw-tw-mb-4" id="<%= dom_id word, :group %>">

	<div class="page-section tw-tw-mt-4">
	<div class="page-section tw-mt-4">

	<div class="tw-px-4 tw-py-3 tw-rounded tw-tw-mb-4 tw-bg-[#d3d3d4] tw-border tw-text-black" role="alert">
	<div class="tw-px-4 tw-py-3 tw-rounded tw-mb-4 tw-bg-[#d3d3d4] tw-border tw-text-black" role="alert">

	<div class="tw-flex tw-justify-end tw-gap-2 tw-tw-mt-3">
	<div class="tw-flex tw-justify-end tw-gap-2 tw-mt-3">

Conversation

nblasd commented Jan 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants