From 82bfebea62f6a07057e8130af853f6eb62395bbe Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 11:28:17 +0530
Subject: [PATCH 01/21] Replace Bulma color helpers with Tailwind counterparts

---
 src/components/ContentReport/ContentReportForm.vue | 4 ++--
 src/components/ContentReport/OtherIssueForm.vue    | 2 +-
 src/components/Filters/FilterChecklist.vue         | 4 ++--
 src/components/Filters/FiltersList.vue             | 2 +-
 src/components/FooterSection.vue                   | 4 ++--
 src/components/ImageDetails/LegalDisclaimer.vue    | 2 +-
 src/components/ImageDetails/PhotoDetails.vue       | 4 ++--
 src/components/LicenseExplanations.vue             | 4 ++--
 src/components/LicenseIcons.vue                    | 4 ++--
 src/components/SaferBrowsing.vue                   | 2 +-
 10 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
index 7797207491..b570d1386d 100644
--- a/src/components/ContentReport/ContentReportForm.vue
+++ b/src/components/ContentReport/ContentReportForm.vue
@@ -2,7 +2,7 @@
   <div id="content-report-form" class="padding-normal is-clearfix arrow-popup">
     <button
       :aria-label="$t('photo-details.aria.close-form')"
-      class="button close-button is-text tiny is-pulled-right is-block has-background-white"
+      class="button close-button is-text tiny is-pulled-right is-block bg-white"
       @click="closeForm()"
       @keyup.enter="closeForm()"
     >
@@ -77,7 +77,7 @@
       </fieldset>
 
       <p
-        class="caption has-text-weight-semibold has-text-grey margin-bottom-normal"
+        class="caption has-text-weight-semibold text-gray margin-bottom-normal"
       >
         {{ $t('photo-details.content-report.caption') }}
       </p>
diff --git a/src/components/ContentReport/OtherIssueForm.vue b/src/components/ContentReport/OtherIssueForm.vue
index 403a535f77..9fdcac57d9 100644
--- a/src/components/ContentReport/OtherIssueForm.vue
+++ b/src/components/ContentReport/OtherIssueForm.vue
@@ -16,7 +16,7 @@
     </label>
     <div>
       <button
-        class="button other-back-button is-text tiny margin-top-normal has-background-white"
+        class="button other-back-button is-text tiny margin-top-normal bg-white"
         @click="onBackClick()"
         @keyup.enter="onBackClick()"
       >
diff --git a/src/components/Filters/FilterChecklist.vue b/src/components/Filters/FilterChecklist.vue
index a1adb66869..d663b86055 100644
--- a/src/components/Filters/FilterChecklist.vue
+++ b/src/components/Filters/FilterChecklist.vue
@@ -17,12 +17,12 @@
       >
         <i
           v-if="areFiltersExpanded"
-          class="icon angle-up rotImg is-size-5 has-text-grey-light"
+          class="icon angle-up rotImg is-size-5 text-light-gray"
           title="toggle filters visibility"
         />
         <i
           v-else
-          class="icon angle-down is-size-5 has-text-grey-light"
+          class="icon angle-down is-size-5 text-light-gray"
           title="toggle filters visibility"
         />
       </button>
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 1e9189b214..105ee9d59c 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -106,7 +106,7 @@
     </div>
     <div
       v-if="isFilterApplied"
-      class="has-background-white padding-big is-hidden-desktop has-text-centered"
+      class="bg-white padding-big is-hidden-desktop has-text-centered"
     >
       <button class="button tiny margin-right-normal" @click="onClearFilters">
         {{ $t('filter-list.clear') }}
diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index d032667c87..05f0ef120b 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -37,7 +37,7 @@
                   href="https://fontawesome.com/"
                   target="_blank"
                   rel="noopener"
-                  class="has-text-white"
+                  class="text-white"
                 >
                   {{ $t('footer.caption.icons') }}
                 </a>
@@ -59,7 +59,7 @@
             :aria-label="$t('footer.aria.donate')"
             class="donate-section"
           >
-            <span class="title is-5 has-text-white">{{
+            <span class="title is-5 text-white">{{
               $t('footer.donate.work')
             }}</span>
             <p>{{ $t('footer.donate.help') }}</p>
diff --git a/src/components/ImageDetails/LegalDisclaimer.vue b/src/components/ImageDetails/LegalDisclaimer.vue
index 922626db64..cc2d60f3a7 100644
--- a/src/components/ImageDetails/LegalDisclaimer.vue
+++ b/src/components/ImageDetails/LegalDisclaimer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="margin-top-normal margin-bottom-small">
-    <p class="caption has-text-left has-text-grey-dark">
+    <p class="caption has-text-left text-dark-gray">
       {{ $t('photo-details.legal-disclaimer') }}
     </p>
   </div>
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index d8b67cbfa2..dcadd5e463 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -3,7 +3,7 @@
     <div class="column is-three-fifths photo_image-ctr margin-top-normal">
       <a
         v-if="shouldShowBreadcrumb"
-        class="is-block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal has-text-grey-dark has-text-weight-semibold caption"
+        class="is-block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal text-dark-gray has-text-weight-semibold caption"
         :href="breadCrumbURL"
         @click.prevent="onGoBackToSearchResults"
         @keyup.enter.prevent="onGoBackToSearchResults"
@@ -174,7 +174,7 @@
       >
         {{ $t('photo-details.weblink') }}
         <i
-          class="icon external-link margin-left-normal is-size-6 padding-top-smaller has-text-grey-lighter"
+          class="icon external-link margin-left-normal is-size-6 padding-top-smaller text-light-gray"
         />
       </a>
 
diff --git a/src/components/LicenseExplanations.vue b/src/components/LicenseExplanations.vue
index 1f33d2eed6..e780434120 100644
--- a/src/components/LicenseExplanations.vue
+++ b/src/components/LicenseExplanations.vue
@@ -12,8 +12,8 @@
           <i
             :class="{
               icon: true,
-              ['has-text-black']: true,
-              ['has-background-white']: true,
+              ['text-black']: true,
+              ['bg-white']: true,
               ['is-size-4']: true,
               ['margin-right-small']: true,
               [`cc-${getLicenseIcon(li)}`]: true,
diff --git a/src/components/LicenseIcons.vue b/src/components/LicenseIcons.vue
index 6d2a6454c9..c1157fa33c 100644
--- a/src/components/LicenseIcons.vue
+++ b/src/components/LicenseIcons.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="photo-license-icons">
     <i
-      class="icon cc-logo is-size-4 has-text-black has-background-white"
+      class="icon cc-logo is-size-4 text-black has-background-white"
       title="CC"
     >
       <!-- Closing i and opening template tag must be adjacent to prevent whitespace --> </i
@@ -11,7 +11,7 @@
         :key="i"
         :class="{
           icon: true,
-          ['has-text-black']: true,
+          ['text-black']: true,
           ['has-background-white']: true,
           ['is-size-4']: true,
           [`cc-${l}`]: true,
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index b7acbfc62b..12cdc62156 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -16,7 +16,7 @@
         class="padding-normal is-clearfix arrow-popup arrow-popup--anchor-right"
       >
         <button
-          class="button close-button is-text tiny is-pulled-right is-block has-text-grey-light"
+          class="button close-button is-text tiny is-pulled-right is-block text-light-gray"
           @keypress.enter="toggleShowForm"
           @click="toggleShowForm"
         >

From 9efe63cfd29762e21c915933ff1197f20f3fd146 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 13:21:34 +0530
Subject: [PATCH 02/21] Replace Bulma font-size helpers with Tailwind
 counterparts

---
 src/components/AppModal.vue                        | 2 +-
 src/components/Filters/FilterChecklist.vue         | 4 ++--
 src/components/Filters/FiltersList.vue             | 4 ++--
 src/components/FooterSection.vue                   | 4 ++--
 src/components/ImageDetails/PhotoDetails.vue       | 4 ++--
 src/components/ImageDetails/SocialShareButtons.vue | 6 +++---
 src/components/LicenseExplanations.vue             | 2 +-
 src/components/LicenseIcons.vue                    | 7 ++-----
 src/components/SearchTypeTabs.vue                  | 2 +-
 src/styles/components/tabs.scss                    | 1 -
 10 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/AppModal.vue b/src/components/AppModal.vue
index dc66ff0c7e..35e0fdc24f 100644
--- a/src/components/AppModal.vue
+++ b/src/components/AppModal.vue
@@ -12,7 +12,7 @@
           </slot>
           <button
             type="button"
-            class="close-button has-color-gray is-size-6 is-size-4-touch"
+            class="close-button has-color-gray text-lgr desk:text-base"
             :aria-label="$t('browse-page.aria.close')"
             @click="$emit('close')"
             @keypress.enter="$emit('close')"
diff --git a/src/components/Filters/FilterChecklist.vue b/src/components/Filters/FilterChecklist.vue
index d663b86055..9d37d10aeb 100644
--- a/src/components/Filters/FilterChecklist.vue
+++ b/src/components/Filters/FilterChecklist.vue
@@ -17,12 +17,12 @@
       >
         <i
           v-if="areFiltersExpanded"
-          class="icon angle-up rotImg is-size-5 text-light-gray"
+          class="icon angle-up rotImg text-lg text-light-gray"
           title="toggle filters visibility"
         />
         <i
           v-else
-          class="icon angle-down is-size-5 text-light-gray"
+          class="icon angle-down text-lg text-light-gray"
           title="toggle filters visibility"
         />
       </button>
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 105ee9d59c..cd49849283 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -14,10 +14,10 @@
         @keyup.enter="onToggleSearchGridFilter()"
       >
         <span
-          class="has-color-transition-blue is-hidden-touch is-size-7 is-lowercase"
+          class="has-color-transition-blue is-hidden-touch text-sm is-lowercase"
           >{{ $t('filter-list.hide') }}</span
         >
-        <span class="margin-right-normal is-size-5 is-hidden-desktop">
+        <span class="margin-right-normal text-lg is-hidden-desktop">
           <i class="icon cross" />
         </span>
       </button>
diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index 05f0ef120b..caec70b951 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -45,10 +45,10 @@
             </i18n>
             <div class="margin-top-smaller">
               <i
-                class="icon cc-logo margin-right-small is-size-4 is-color-white"
+                class="icon cc-logo margin-right-small text-lgr is-color-white"
               />
               <i
-                class="icon cc-by margin-right-small is-size-4 is-color-white"
+                class="icon cc-by margin-right-small text-lgr is-color-white"
               />
             </div>
           </div>
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index dcadd5e463..ee01a9beb3 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -34,7 +34,7 @@
           @click.prevent="toggleReportFormVisibility"
           @keypress.enter.prevent="toggleReportFormVisibility"
         >
-          <span class="has-color-transition-blue margin-left-small is-size-7">
+          <span class="has-color-transition-blue margin-left-small text-sm">
             <i class="icon flag margin-right-small" />
             {{ $t('photo-details.content-report.title') }}
           </span>
@@ -174,7 +174,7 @@
       >
         {{ $t('photo-details.weblink') }}
         <i
-          class="icon external-link margin-left-normal is-size-6 padding-top-smaller text-light-gray"
+          class="icon external-link margin-left-normal text-base padding-top-smaller text-light-gray"
         />
       </a>
 
diff --git a/src/components/ImageDetails/SocialShareButtons.vue b/src/components/ImageDetails/SocialShareButtons.vue
index 4ee92d9b61..2296eb4bda 100644
--- a/src/components/ImageDetails/SocialShareButtons.vue
+++ b/src/components/ImageDetails/SocialShareButtons.vue
@@ -9,7 +9,7 @@
         @click="onSocialMediaLinkClick('Facebook')"
         @keyup.enter="onSocialMediaLinkClick('Facebook')"
       >
-        <i class="icon facebook colored margin-right-normal is-size-1" />
+        <i class="icon facebook colored margin-right-normal text-6xl" />
       </a>
       <a
         :aria-label="$t('photo-details.aria.share.twitter')"
@@ -19,7 +19,7 @@
         @click="onSocialMediaLinkClick('Twitter')"
         @keyup.enter="onSocialMediaLinkClick('Twitter')"
       >
-        <i class="icon twitter colored margin-right-normal is-size-1" />
+        <i class="icon twitter colored margin-right-normal text-6xl" />
       </a>
       <a
         :aria-label="$t('photo-details.aria.share.pinterest')"
@@ -29,7 +29,7 @@
         @click="onSocialMediaLinkClick('Pinterest')"
         @keyup.enter="onSocialMediaLinkClick('Pinterest')"
       >
-        <i class="icon pinterest colored is-size-1" />
+        <i class="icon pinterest colored text-6xl" />
       </a>
     </div>
   </div>
diff --git a/src/components/LicenseExplanations.vue b/src/components/LicenseExplanations.vue
index e780434120..979444277f 100644
--- a/src/components/LicenseExplanations.vue
+++ b/src/components/LicenseExplanations.vue
@@ -14,7 +14,7 @@
               icon: true,
               ['text-black']: true,
               ['bg-white']: true,
-              ['is-size-4']: true,
+              ['text-lgr']: true,
               ['margin-right-small']: true,
               [`cc-${getLicenseIcon(li)}`]: true,
             }"
diff --git a/src/components/LicenseIcons.vue b/src/components/LicenseIcons.vue
index c1157fa33c..568f674ebe 100644
--- a/src/components/LicenseIcons.vue
+++ b/src/components/LicenseIcons.vue
@@ -1,9 +1,6 @@
 <template>
   <span class="photo-license-icons">
-    <i
-      class="icon cc-logo is-size-4 text-black has-background-white"
-      title="CC"
-    >
+    <i class="icon cc-logo text-lgr text-black has-background-white" title="CC">
       <!-- Closing i and opening template tag must be adjacent to prevent whitespace --> </i
     ><template v-for="(l, i) in getLicenseIcon(license)">
       <i
@@ -13,7 +10,7 @@
           icon: true,
           ['text-black']: true,
           ['has-background-white']: true,
-          ['is-size-4']: true,
+          ['text-lgr']: true,
           [`cc-${l}`]: true,
         }"
         :alt="`${l.toUpperCase()}`"
diff --git a/src/components/SearchTypeTabs.vue b/src/components/SearchTypeTabs.vue
index 859135b4b9..b8cab897c1 100644
--- a/src/components/SearchTypeTabs.vue
+++ b/src/components/SearchTypeTabs.vue
@@ -38,7 +38,7 @@ export default {
     tabClass(tabSlug, tabClass) {
       return {
         [tabClass]: true,
-        'is-size-5': true,
+        'text-lg': true,
         'is-active': tabSlug === this.activeTab,
       }
     },
diff --git a/src/styles/components/tabs.scss b/src/styles/components/tabs.scss
index 8154ffff70..745165da3c 100644
--- a/src/styles/components/tabs.scss
+++ b/src/styles/components/tabs.scss
@@ -29,7 +29,6 @@ $tabs-font-size: 1rem;
     border-image-outset: unset;
     border-image-repeat: unset;
     font-weight: 700;
-    font-size: $font-size-body-normal;
     margin: 0 1rem -0.125rem 1rem;
     padding: 0.5rem 0 1rem;
     position: relative;

From 9b54eef721bd7646a4487450a53af17af6ca8b2b Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 13:27:52 +0530
Subject: [PATCH 03/21] Replace Bulma text alignment helpers with Tailwind
 counterparts

---
 src/components/ContentReport/DmcaNotice.vue  | 4 ++--
 src/components/ContentReport/DoneMessage.vue | 4 ++--
 src/components/ContentReport/ReportError.vue | 4 +---
 src/components/Filters/FiltersList.vue       | 2 +-
 src/components/HeroSection.vue               | 6 ++----
 5 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/ContentReport/DmcaNotice.vue b/src/components/ContentReport/DmcaNotice.vue
index 15bffb31b7..821f0e2529 100644
--- a/src/components/ContentReport/DmcaNotice.vue
+++ b/src/components/ContentReport/DmcaNotice.vue
@@ -3,7 +3,7 @@
     <i18n
       path="photo-details.content-report.dmca.content"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
+      class="is-block padding-horizontal-big margin-top-large text-center"
     >
       <template #link>
         <a
@@ -19,7 +19,7 @@
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-normal has-text-centered"
+      class="is-block padding-horizontal-big margin-top-normal text-center"
     >
       <template #link>
         <a
diff --git a/src/components/ContentReport/DoneMessage.vue b/src/components/ContentReport/DoneMessage.vue
index dc734d9d93..e36fb84cf7 100644
--- a/src/components/ContentReport/DoneMessage.vue
+++ b/src/components/ContentReport/DoneMessage.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="margin-vertical-large">
-    <span class="is-block padding-horizontal-big has-text-centered">
+    <span class="is-block padding-horizontal-big text-center">
       {{ $t('photo-details.content-report.dmca.thanks') }}
     </span>
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="span"
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
+      class="is-block padding-horizontal-big margin-top-large text-center"
     >
       <template #link>
         <a
diff --git a/src/components/ContentReport/ReportError.vue b/src/components/ContentReport/ReportError.vue
index 529644ddaf..ee06f105bb 100644
--- a/src/components/ContentReport/ReportError.vue
+++ b/src/components/ContentReport/ReportError.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <span
-      class="is-block padding-horizontal-big margin-top-large has-text-centered"
-    >
+    <span class="is-block padding-horizontal-big margin-top-large text-center">
       {{ $t('photo-details.content-report.dmca.error') }}
     </span>
     <button
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index cd49849283..8250f55886 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -106,7 +106,7 @@
     </div>
     <div
       v-if="isFilterApplied"
-      class="bg-white padding-big is-hidden-desktop has-text-centered"
+      class="bg-white padding-big is-hidden-desktop text-center"
     >
       <button class="button tiny margin-right-normal" @click="onClearFilters">
         {{ $t('filter-list.clear') }}
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 020a538252..c45e4ed5b3 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- eslint-disable vuejs-accessibility/no-autofocus -->
   <div class="hero">
-    <div class="hero-center has-text-centered">
+    <div class="hero-center text-center">
       <h1 class="title is-2 padding-bottom-normal">
         {{ $t('hero.title') }}
       </h1>
@@ -32,9 +32,7 @@
             {{ $t('hero.search.button') }}
           </button>
         </div>
-        <div
-          class="caption has-text-centered margin-top-big has-text-weight-medium"
-        >
+        <div class="caption margin-top-big has-text-weight-medium">
           <i18n path="hero.caption.content" tag="p">
             <template #link>
               <a

From 52e9d9eda0db75a5c9f9e1d3e3769426cb392749 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 13:32:29 +0530
Subject: [PATCH 04/21] Replace Bulma font-weight helpers with Tailwind
 counterparts

---
 src/components/ContentReport/ContentReportForm.vue | 4 +---
 src/components/ContentReport/OtherIssueForm.vue    | 2 +-
 src/components/Filters/FilterDisplay.vue           | 2 +-
 src/components/HeroSection.vue                     | 4 ++--
 src/components/ImageDetails/ImageAttribution.vue   | 4 ++--
 src/components/ImageDetails/PhotoDetails.vue       | 4 ++--
 src/components/MetaSearch/MetaSearchForm.vue       | 2 +-
 src/components/SaferBrowsing.vue                   | 2 +-
 src/components/SearchGridCell.vue                  | 2 +-
 src/components/SearchGridManualLoad.vue            | 2 +-
 src/components/SearchRating.vue                    | 2 +-
 11 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
index b570d1386d..fc3c3384b7 100644
--- a/src/components/ContentReport/ContentReportForm.vue
+++ b/src/components/ContentReport/ContentReportForm.vue
@@ -76,9 +76,7 @@
         </div>
       </fieldset>
 
-      <p
-        class="caption has-text-weight-semibold text-gray margin-bottom-normal"
-      >
+      <p class="caption font-semibold text-gray margin-bottom-normal">
         {{ $t('photo-details.content-report.caption') }}
       </p>
 
diff --git a/src/components/ContentReport/OtherIssueForm.vue b/src/components/ContentReport/OtherIssueForm.vue
index 9fdcac57d9..f7e5ecd7cb 100644
--- a/src/components/ContentReport/OtherIssueForm.vue
+++ b/src/components/ContentReport/OtherIssueForm.vue
@@ -10,7 +10,7 @@
       <textarea
         id="issue"
         v-model="otherReasonDescription"
-        class="reason padding-small has-text-weight-semibold"
+        class="reason padding-small font-semibold"
         placeholder="Issue description required (with at least 20 characters)"
       />
     </label>
diff --git a/src/components/Filters/FilterDisplay.vue b/src/components/Filters/FilterDisplay.vue
index 4988c2b2d8..5279393bbb 100644
--- a/src/components/Filters/FilterDisplay.vue
+++ b/src/components/Filters/FilterDisplay.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="filter-display" aria-live="polite">
-    <span v-if="anyFilterApplied" class="caption has-text-weight-semibold">{{
+    <span v-if="anyFilterApplied" class="caption font-semibold">{{
       $t('filters.filter-by')
     }}</span>
     <FilterBlock
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index c45e4ed5b3..83acac3d4a 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -5,7 +5,7 @@
       <h1 class="title is-2 padding-bottom-normal">
         {{ $t('hero.title') }}
       </h1>
-      <h2 class="title is-5 b-header has-text-weight-medium">
+      <h2 class="title is-5 b-header font-medium">
         {{ $t('hero.subtitle') }}
       </h2>
       <form
@@ -32,7 +32,7 @@
             {{ $t('hero.search.button') }}
           </button>
         </div>
-        <div class="caption margin-top-big has-text-weight-medium">
+        <div class="caption margin-top-big font-medium">
           <i18n path="hero.caption.content" tag="p">
             <template #link>
               <a
diff --git a/src/components/ImageDetails/ImageAttribution.vue b/src/components/ImageDetails/ImageAttribution.vue
index fa75766bcc..e0415c6add 100644
--- a/src/components/ImageDetails/ImageAttribution.vue
+++ b/src/components/ImageDetails/ImageAttribution.vue
@@ -12,7 +12,7 @@
       <i18n
         path="photo-details.reuse.tool.content"
         tag="span"
-        class="caption has-text-weight-semibold"
+        class="caption font-semibold"
       >
         <template #link>
           <a
@@ -53,7 +53,7 @@
       <i18n
         path="photo-details.reuse.license.content"
         tag="span"
-        class="caption has-text-weight-semibold"
+        class="caption font-semibold"
       >
         <template #link>
           <a
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index ee01a9beb3..3802df539e 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -3,7 +3,7 @@
     <div class="column is-three-fifths photo_image-ctr margin-top-normal">
       <a
         v-if="shouldShowBreadcrumb"
-        class="is-block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal text-dark-gray has-text-weight-semibold caption"
+        class="is-block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal text-dark-gray font-semibold caption"
         :href="breadCrumbURL"
         @click.prevent="onGoBackToSearchResults"
         @keyup.enter.prevent="onGoBackToSearchResults"
@@ -59,7 +59,7 @@
         </h1>
         <i18n
           v-if="image.creator"
-          class="caption has-text-weight-semibold"
+          class="caption font-semibold"
           path="photo-details.creator"
           tag="span"
         >
diff --git a/src/components/MetaSearch/MetaSearchForm.vue b/src/components/MetaSearch/MetaSearchForm.vue
index ad72b4f67d..9890feb20f 100644
--- a/src/components/MetaSearch/MetaSearchForm.vue
+++ b/src/components/MetaSearch/MetaSearchForm.vue
@@ -25,7 +25,7 @@
 
     <MetaSourceList :type="type" :query="metaQuery" />
 
-    <p class="caption has-text-weight-semibold max-w-lg">
+    <p class="caption font-semibold max-w-lg">
       {{ $t('meta-search.caption') }}
     </p>
   </section>
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index 12cdc62156..7b85f0fe04 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -22,7 +22,7 @@
         >
           <i class="icon cross" />
         </button>
-        <p class="caption has-text-weight-semibold padding-right-big">
+        <p class="caption font-semibold padding-right-big">
           {{ $t('browse-page.safer-browsing.caption') }}
         </p>
 
diff --git a/src/components/SearchGridCell.vue b/src/components/SearchGridCell.vue
index c2a1e22ffe..2d14c0764e 100644
--- a/src/components/SearchGridCell.vue
+++ b/src/components/SearchGridCell.vue
@@ -32,7 +32,7 @@
       <figcaption
         class="overlay overlay__bottom padding-vertical-small padding-horizontal-normal"
       >
-        <span class="caption has-text-weight-semibold">{{ image.title }}</span>
+        <span class="caption font-semibold">{{ image.title }}</span>
       </figcaption>
     </figure>
   </div>
diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
index 5ac5dd626f..3d0bbf8b80 100644
--- a/src/components/SearchGridManualLoad.vue
+++ b/src/components/SearchGridManualLoad.vue
@@ -8,7 +8,7 @@
   >
     <div ref="gridItems" class="search-grid_ctr">
       <div v-show="!isFetchingImages && includeAnalytics" class="results-meta">
-        <span class="caption has-text-weight-semibold">
+        <span class="caption font-semibold">
           {{ _imagesCount }}
         </span>
         <div class="is-hidden-touch mr-auto padding-left-big">
diff --git a/src/components/SearchRating.vue b/src/components/SearchRating.vue
index 8187a3e044..35169e912a 100644
--- a/src/components/SearchRating.vue
+++ b/src/components/SearchRating.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="caption has-text-weight-semibold">
+  <div class="caption font-semibold">
     <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
     <div v-if="status == 'NOT_SENT'">
       <span>{{ $t('browse-page.search-rating.content') }}</span>

From 84e5794cb8096238f05a1e08c41e3b4bbd580d71 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 13:32:59 +0530
Subject: [PATCH 05/21] Replace Bulma text transform helpers with Tailwind
 counterparts

---
 src/components/Filters/FiltersList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 8250f55886..63b8b6b557 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -14,7 +14,7 @@
         @keyup.enter="onToggleSearchGridFilter()"
       >
         <span
-          class="has-color-transition-blue is-hidden-touch text-sm is-lowercase"
+          class="has-color-transition-blue is-hidden-touch text-sm lowercase"
           >{{ $t('filter-list.hide') }}</span
         >
         <span class="margin-right-normal text-lg is-hidden-desktop">

From 6aa6cf3b44d1295efd333edc49a6521d352b54a8 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 13:37:18 +0530
Subject: [PATCH 06/21] Replace Bulma layout helpers with Tailwind counterparts

---
 src/components/ContentReport/ContentReportForm.vue | 2 +-
 src/components/ContentReport/DmcaNotice.vue        | 4 ++--
 src/components/ContentReport/DoneMessage.vue       | 4 ++--
 src/components/ContentReport/ReportError.vue       | 2 +-
 src/components/Filters/FiltersList.vue             | 2 +-
 src/components/ImageDetails/CopyLicense.vue        | 2 +-
 src/components/ImageDetails/ImageAttribution.vue   | 2 +-
 src/components/ImageDetails/ImageInfo.vue          | 2 +-
 src/components/ImageDetails/PhotoDetails.vue       | 2 +-
 src/components/LicenseExplanations.vue             | 2 +-
 src/components/SaferBrowsing.vue                   | 2 +-
 src/components/SearchGridManualLoad.vue            | 2 +-
 12 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
index fc3c3384b7..0f6daffc09 100644
--- a/src/components/ContentReport/ContentReportForm.vue
+++ b/src/components/ContentReport/ContentReportForm.vue
@@ -2,7 +2,7 @@
   <div id="content-report-form" class="padding-normal is-clearfix arrow-popup">
     <button
       :aria-label="$t('photo-details.aria.close-form')"
-      class="button close-button is-text tiny is-pulled-right is-block bg-white"
+      class="button close-button is-text tiny is-pulled-right block bg-white"
       @click="closeForm()"
       @keyup.enter="closeForm()"
     >
diff --git a/src/components/ContentReport/DmcaNotice.vue b/src/components/ContentReport/DmcaNotice.vue
index 821f0e2529..195cc85361 100644
--- a/src/components/ContentReport/DmcaNotice.vue
+++ b/src/components/ContentReport/DmcaNotice.vue
@@ -3,7 +3,7 @@
     <i18n
       path="photo-details.content-report.dmca.content"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-large text-center"
+      class="block padding-horizontal-big margin-top-large text-center"
     >
       <template #link>
         <a
@@ -19,7 +19,7 @@
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="p"
-      class="is-block padding-horizontal-big margin-top-normal text-center"
+      class="block padding-horizontal-big margin-top-normal text-center"
     >
       <template #link>
         <a
diff --git a/src/components/ContentReport/DoneMessage.vue b/src/components/ContentReport/DoneMessage.vue
index e36fb84cf7..53c0e16fec 100644
--- a/src/components/ContentReport/DoneMessage.vue
+++ b/src/components/ContentReport/DoneMessage.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="margin-vertical-large">
-    <span class="is-block padding-horizontal-big text-center">
+    <span class="block padding-horizontal-big text-center">
       {{ $t('photo-details.content-report.dmca.thanks') }}
     </span>
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="span"
-      class="is-block padding-horizontal-big margin-top-large text-center"
+      class="block padding-horizontal-big margin-top-large text-center"
     >
       <template #link>
         <a
diff --git a/src/components/ContentReport/ReportError.vue b/src/components/ContentReport/ReportError.vue
index ee06f105bb..8236754953 100644
--- a/src/components/ContentReport/ReportError.vue
+++ b/src/components/ContentReport/ReportError.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="is-block padding-horizontal-big margin-top-large text-center">
+    <span class="block padding-horizontal-big margin-top-large text-center">
       {{ $t('photo-details.content-report.dmca.error') }}
     </span>
     <button
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 63b8b6b557..73366bd537 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="filterlist-header">
       <h4
-        class="padding-top-big padding-left-big padding-right-normal is-inline-block"
+        class="padding-top-big padding-left-big padding-right-normal inline-block"
       >
         {{ $t('filter-list.filter-by') }}
       </h4>
diff --git a/src/components/ImageDetails/CopyLicense.vue b/src/components/ImageDetails/CopyLicense.vue
index 6d787be4a4..8dd3660897 100644
--- a/src/components/ImageDetails/CopyLicense.vue
+++ b/src/components/ImageDetails/CopyLicense.vue
@@ -54,7 +54,7 @@
           ref="photoAttribution"
           path="photo-details.reuse.credit.text"
           tag="span"
-          class="photo_usage-attribution is-block"
+          class="photo_usage-attribution block"
         >
           <template #title>
             <a
diff --git a/src/components/ImageDetails/ImageAttribution.vue b/src/components/ImageDetails/ImageAttribution.vue
index e0415c6add..18a816e91c 100644
--- a/src/components/ImageDetails/ImageAttribution.vue
+++ b/src/components/ImageDetails/ImageAttribution.vue
@@ -34,7 +34,7 @@
         ref="photoAttribution"
         path="photo-details.reuse.attribution.main"
         tag="span"
-        class="photo_usage-attribution is-block"
+        class="photo_usage-attribution block"
       >
         <template #link>
           <a
diff --git a/src/components/ImageDetails/ImageInfo.vue b/src/components/ImageDetails/ImageInfo.vue
index 026dbc96af..6b623e802a 100644
--- a/src/components/ImageDetails/ImageInfo.vue
+++ b/src/components/ImageDetails/ImageInfo.vue
@@ -39,7 +39,7 @@
       </dl>
     </div>
     <div class="margin-bottom-big">
-      <h5 class="is-block margin-bottom-small b-header">
+      <h5 class="margin-bottom-small b-header">
         {{ $t('photo-details.information.tags') }}
       </h5>
       <PhotoTags :tags="image.tags" :show-header="false" />
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index 3802df539e..40ee83a8e7 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -3,7 +3,7 @@
     <div class="column is-three-fifths photo_image-ctr margin-top-normal">
       <a
         v-if="shouldShowBreadcrumb"
-        class="is-block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal text-dark-gray font-semibold caption"
+        class="block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal text-dark-gray font-semibold caption"
         :href="breadCrumbURL"
         @click.prevent="onGoBackToSearchResults"
         @keyup.enter.prevent="onGoBackToSearchResults"
diff --git a/src/components/LicenseExplanations.vue b/src/components/LicenseExplanations.vue
index 979444277f..daa9443c24 100644
--- a/src/components/LicenseExplanations.vue
+++ b/src/components/LicenseExplanations.vue
@@ -6,7 +6,7 @@
           :key="index"
           :class="{
             ['margin-vertical-small']: true,
-            ['is-flex']: true,
+            ['flex']: true,
           }"
         >
           <i
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index 7b85f0fe04..7ad2ca91c7 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -16,7 +16,7 @@
         class="padding-normal is-clearfix arrow-popup arrow-popup--anchor-right"
       >
         <button
-          class="button close-button is-text tiny is-pulled-right is-block text-light-gray"
+          class="button close-button is-text tiny is-pulled-right block text-light-gray"
           @keypress.enter="toggleShowForm"
           @click="toggleShowForm"
         >
diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
index 3d0bbf8b80..0086a8b350 100644
--- a/src/components/SearchGridManualLoad.vue
+++ b/src/components/SearchGridManualLoad.vue
@@ -14,7 +14,7 @@
         <div class="is-hidden-touch mr-auto padding-left-big">
           <SearchRating v-if="_query.q" :search-term="_query.q" />
         </div>
-        <div class="is-hidden-desktop is-block">
+        <div class="is-hidden-desktop block">
           <SearchRating v-if="_query.q" :search-term="searchTerm" />
         </div>
         <SaferBrowsing />

From 8ca1f768c934112b42c110c6a752ed0cbacbf6e0 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 13:42:00 +0530
Subject: [PATCH 07/21] Replace Bulma visibility helpers with Tailwind
 counterparts

---
 src/components/EmbeddedNavSection.vue   | 2 +-
 src/components/Filters/FiltersList.vue  | 8 ++++----
 src/components/NavSection.vue           | 2 +-
 src/components/SearchGridManualLoad.vue | 4 ++--
 src/pages/search.vue                    | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/EmbeddedNavSection.vue b/src/components/EmbeddedNavSection.vue
index f88ba541b8..7885a209b9 100644
--- a/src/components/EmbeddedNavSection.vue
+++ b/src/components/EmbeddedNavSection.vue
@@ -38,7 +38,7 @@
           type="search"
           :placeholder="navSearchPlaceholder"
         />
-        <div class="is-sr-only">
+        <div class="sr-only">
           <button
             :aria-label="$t('header.aria.sr-search')"
             tabindex="-1"
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 73366bd537..0fe2600d9e 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -14,10 +14,10 @@
         @keyup.enter="onToggleSearchGridFilter()"
       >
         <span
-          class="has-color-transition-blue is-hidden-touch text-sm lowercase"
+          class="has-color-transition-blue hidden desk:block text-sm lowercase"
           >{{ $t('filter-list.hide') }}</span
         >
-        <span class="margin-right-normal text-lg is-hidden-desktop">
+        <span class="margin-right-normal text-lg desk:hidden">
           <i class="icon cross" />
         </span>
       </button>
@@ -98,7 +98,7 @@
     </form>
     <div
       v-if="isFilterApplied"
-      class="margin-big padding-bottom-normal clear-filters is-hidden-touch"
+      class="margin-big padding-bottom-normal clear-filters hidden desk:block"
     >
       <button class="button tiny" @click="onClearFilters">
         {{ $t('filter-list.clear') }}
@@ -106,7 +106,7 @@
     </div>
     <div
       v-if="isFilterApplied"
-      class="bg-white padding-big is-hidden-desktop text-center"
+      class="bg-white padding-big desk:hidden text-center"
     >
       <button class="button tiny margin-right-normal" @click="onClearFilters">
         {{ $t('filter-list.clear') }}
diff --git a/src/components/NavSection.vue b/src/components/NavSection.vue
index 55eea1c3a2..5c358cbca2 100644
--- a/src/components/NavSection.vue
+++ b/src/components/NavSection.vue
@@ -40,7 +40,7 @@
             type="search"
             :placeholder="navSearchPlaceholder"
           />
-          <div class="is-sr-only">
+          <div class="sr-only">
             <button
               :aria-label="$t('header.aria.sr-search')"
               tabindex="-1"
diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
index 0086a8b350..c463d14d15 100644
--- a/src/components/SearchGridManualLoad.vue
+++ b/src/components/SearchGridManualLoad.vue
@@ -11,10 +11,10 @@
         <span class="caption font-semibold">
           {{ _imagesCount }}
         </span>
-        <div class="is-hidden-touch mr-auto padding-left-big">
+        <div class="hidden desk:block mr-auto padding-left-big">
           <SearchRating v-if="_query.q" :search-term="_query.q" />
         </div>
-        <div class="is-hidden-desktop block">
+        <div class="desk:hidden">
           <SearchRating v-if="_query.q" :search-term="searchTerm" />
         </div>
         <SaferBrowsing />
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 1b4db1c565..02dae0a7dc 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="browse-page">
     <div class="search columns">
-      <div class="is-hidden-desktop">
+      <div class="desk:hidden">
         <AppModal v-if="isFilterVisible" @close="onToggleSearchGridFilter">
           <SearchGridFilter @onSearchFilterChanged="onSearchFormSubmit" />
         </AppModal>
       </div>
       <aside
         v-if="isFilterVisible"
-        class="column is-narrow grid-sidebar is-paddingless is-hidden-touch full-height-sticky"
+        class="column is-narrow grid-sidebar is-paddingless hidden desk:block full-height-sticky"
       >
         <SearchGridFilter @onSearchFilterChanged="onSearchFormSubmit" />
       </aside>

From e157bdd2c6c0d00b4f8286bf5245c7abd2788627 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 15:12:13 +0530
Subject: [PATCH 08/21] Replace Bulma spacing helpers with Tailwind
 counterparts

---
 src/components/AppModal.vue                   |  5 +--
 .../ContentReport/ContentReportForm.vue       | 16 +++----
 src/components/ContentReport/DmcaNotice.vue   |  8 ++--
 src/components/ContentReport/DoneMessage.vue  |  6 +--
 .../ContentReport/OtherIssueForm.vue          | 10 ++---
 src/components/ContentReport/ReportError.vue  |  6 +--
 src/components/CopyButton.vue                 |  6 +--
 src/components/Filters/FilterBlock.vue        |  6 +--
 src/components/Filters/FilterChecklist.vue    | 10 ++---
 src/components/Filters/FiltersList.vue        | 22 +++-------
 .../Filters/LicenseExplanationTooltip.vue     |  6 +--
 src/components/FooterSection.vue              | 12 ++---
 src/components/HeroSection.vue                |  6 +--
 src/components/HomeLicenseFilter.vue          |  2 +-
 src/components/ImageDetails/CopyLicense.vue   |  4 +-
 .../ImageDetails/ImageAttribution.vue         |  8 ++--
 src/components/ImageDetails/ImageInfo.vue     | 14 +++---
 .../ImageDetails/LegalDisclaimer.vue          |  2 +-
 src/components/ImageDetails/PhotoDetails.vue  | 28 ++++++------
 src/components/ImageDetails/ReuseSurvey.vue   |  2 +-
 .../ImageDetails/SocialShareButtons.vue       |  4 +-
 src/components/LicenseExplanations.vue        |  6 +--
 src/components/MetaSearch/MetaSearchForm.vue  |  6 +--
 src/components/MetaSearch/MetaSourceList.vue  |  8 ++--
 src/components/NavSection.vue                 |  2 +-
 src/components/PhotoTags.vue                  |  4 +-
 src/components/SaferBrowsing.vue              |  8 ++--
 src/components/SearchGridCell.vue             |  6 +--
 src/components/SearchGridForm.vue             |  4 +-
 src/components/SearchGridManualLoad.vue       |  8 +---
 src/pages/about.vue                           |  2 +-
 src/pages/feedback.vue                        | 12 ++---
 src/pages/meta-search.vue                     | 38 ++++++----------
 src/pages/photos/_id.vue                      |  7 +--
 src/pages/search-help.vue                     | 44 ++++++-------------
 src/pages/sources.vue                         | 34 +++++---------
 36 files changed, 152 insertions(+), 220 deletions(-)

diff --git a/src/components/AppModal.vue b/src/components/AppModal.vue
index 35e0fdc24f..fc37f1370b 100644
--- a/src/components/AppModal.vue
+++ b/src/components/AppModal.vue
@@ -3,10 +3,7 @@
   <div ref="modal" class="overlay app-modal" @click.self="$emit('close')">
     <FocusTrap :active="true">
       <div class="modal relative" aria-modal="true" role="dialog">
-        <header
-          v-if="title"
-          class="modal-header padding-top-bigger padding-left-bigger padding-right-normal padding-bottom-small"
-        >
+        <header v-if="title" class="modal-header pt-8 pl-8 pr-4 pb-2">
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
index 0f6daffc09..1a2636ff01 100644
--- a/src/components/ContentReport/ContentReportForm.vue
+++ b/src/components/ContentReport/ContentReportForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="content-report-form" class="padding-normal is-clearfix arrow-popup">
+  <div id="content-report-form" class="p-4 is-clearfix arrow-popup">
     <button
       :aria-label="$t('photo-details.aria.close-form')"
       class="button close-button is-text tiny is-pulled-right block bg-white"
@@ -28,16 +28,16 @@
       @sendContentReport="sendContentReport"
     />
     <form v-else>
-      <h5 class="b-header margin-bottom-normal">
+      <h5 class="b-header mb-4">
         {{ $t('photo-details.content-report.title') }}
       </h5>
-      <fieldset class="margin-bottom-normal">
-        <legend class="margin-bottom-normal">
+      <fieldset class="mb-4">
+        <legend class="mb-4">
           {{ $t('photo-details.content-report.issue') }}
         </legend>
 
         <div>
-          <label for="dmca" class="margin-left-small">
+          <label for="dmca" class="ml-2">
             <input
               id="dmca"
               v-model="selectedReason"
@@ -50,7 +50,7 @@
         </div>
 
         <div>
-          <label for="mature" class="margin-left-small">
+          <label for="mature" class="ml-2">
             <input
               id="mature"
               v-model="selectedReason"
@@ -63,7 +63,7 @@
         </div>
 
         <div>
-          <label for="other" class="margin-left-small">
+          <label for="other" class="ml-2">
             <input
               id="other"
               v-model="selectedReason"
@@ -76,7 +76,7 @@
         </div>
       </fieldset>
 
-      <p class="caption font-semibold text-gray margin-bottom-normal">
+      <p class="caption font-semibold text-gray mb-4">
         {{ $t('photo-details.content-report.caption') }}
       </p>
 
diff --git a/src/components/ContentReport/DmcaNotice.vue b/src/components/ContentReport/DmcaNotice.vue
index 195cc85361..02f8a81fd4 100644
--- a/src/components/ContentReport/DmcaNotice.vue
+++ b/src/components/ContentReport/DmcaNotice.vue
@@ -3,7 +3,7 @@
     <i18n
       path="photo-details.content-report.dmca.content"
       tag="p"
-      class="block padding-horizontal-big margin-top-large text-center"
+      class="block px-6 mt-10 text-center"
     >
       <template #link>
         <a
@@ -19,7 +19,7 @@
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="p"
-      class="block padding-horizontal-big margin-top-normal text-center"
+      class="block px-6 mt-4 text-center"
     >
       <template #link>
         <a
@@ -33,12 +33,12 @@
     </i18n>
 
     <button
-      class="button is-text tiny margin-top-normal is-shadowless"
+      class="button is-text tiny mt-4 is-shadowless"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
       <span
-        ><i class="icon chevron-left margin-right-small" />
+        ><i class="icon chevron-left mr-2" />
         {{ $t('photo-details.content-report.back') }}</span
       >
     </button>
diff --git a/src/components/ContentReport/DoneMessage.vue b/src/components/ContentReport/DoneMessage.vue
index 53c0e16fec..c9aac07b1c 100644
--- a/src/components/ContentReport/DoneMessage.vue
+++ b/src/components/ContentReport/DoneMessage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="margin-vertical-large">
-    <span class="block padding-horizontal-big text-center">
+  <div class="my-10">
+    <span class="block px-6 text-center">
       {{ $t('photo-details.content-report.dmca.thanks') }}
     </span>
     <i18n
       path="photo-details.content-report.dmca.provider"
       tag="span"
-      class="block padding-horizontal-big margin-top-large text-center"
+      class="block px-6 mt-10 text-center"
     >
       <template #link>
         <a
diff --git a/src/components/ContentReport/OtherIssueForm.vue b/src/components/ContentReport/OtherIssueForm.vue
index f7e5ecd7cb..eec89c63d1 100644
--- a/src/components/ContentReport/OtherIssueForm.vue
+++ b/src/components/ContentReport/OtherIssueForm.vue
@@ -3,25 +3,25 @@
     <h4 class="b-header">
       {{ $t('photo-details.content-report.title') }}
     </h4>
-    <legend class="margin-bottom-small">
+    <legend class="mb-2">
       {{ $t('photo-details.content-report.issue-description') }}
     </legend>
     <label for="issue">
       <textarea
         id="issue"
         v-model="otherReasonDescription"
-        class="reason padding-small font-semibold"
+        class="reason p-2 font-semibold"
         placeholder="Issue description required (with at least 20 characters)"
       />
     </label>
     <div>
       <button
-        class="button other-back-button is-text tiny margin-top-normal bg-white"
+        class="button other-back-button is-text tiny mt-4 bg-white"
         @click="onBackClick()"
         @keyup.enter="onBackClick()"
       >
         <span>
-          <i class="icon chevron-left margin-right-small" />
+          <i class="icon chevron-left mr-2" />
           {{ $t('photo-details.content-report.back') }}
         </span>
       </button>
@@ -29,7 +29,7 @@
       <button
         type="button"
         :disabled="!descriptionHasMoreThan20Chars"
-        class="button submit-other-button tiny is-success margin-top-normal is-pulled-right"
+        class="button submit-other-button tiny is-success mt-4 is-pulled-right"
         @click="sendContentReport()"
         @keyup.enter="sendContentReport()"
       >
diff --git a/src/components/ContentReport/ReportError.vue b/src/components/ContentReport/ReportError.vue
index 8236754953..e930c1db07 100644
--- a/src/components/ContentReport/ReportError.vue
+++ b/src/components/ContentReport/ReportError.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <span class="block padding-horizontal-big margin-top-large text-center">
+    <span class="block px-6 mt-10 text-center">
       {{ $t('photo-details.content-report.dmca.error') }}
     </span>
     <button
-      class="button is-text tiny margin-top-normal is-shadowless"
+      class="button is-text tiny mt-4 is-shadowless"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
       <span>
-        <i class="icon chevron-left margin-right-small" />
+        <i class="icon chevron-left mr-2" />
         {{ $t('photo-details.content-report.back') }}
       </span>
     </button>
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index ee468b0f15..2f405c15f9 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -2,15 +2,15 @@
   <button
     :id="id"
     type="button"
-    class="button tiny donate is-paddingless margin-top-normal padding-horizontal-normal"
+    class="button tiny donate px-4 py-0 mt-4"
     :data-clipboard-target="el"
   >
     <span v-if="!success">
-      <i class="icon cc-share margin-right-small" />
+      <i class="icon cc-share mr-2" />
       {{ $t('photo-details.copy.copy') }}
     </span>
     <span v-else>
-      <i class="icon cc-share margin-right-small" />
+      <i class="icon cc-share mr-2" />
       {{ $t('photo-details.copy.copied') }}
     </span>
   </button>
diff --git a/src/components/Filters/FilterBlock.vue b/src/components/Filters/FilterBlock.vue
index a61c08ed99..834575dc70 100644
--- a/src/components/Filters/FilterBlock.vue
+++ b/src/components/Filters/FilterBlock.vue
@@ -7,7 +7,7 @@
     <span>{{ $props.label }}</span>
     <span
       :aria-label="$t('browse-page.aria.remove-filter')"
-      class="close margin-left-small"
+      class="close ml-2"
       tabindex="0"
       @click="onClickIsolatedFilter"
       @keyup.enter="onClickIsolatedFilter"
@@ -16,12 +16,12 @@
   </button>
   <button
     v-else
-    class="filter-block button tiny tag margin-horizontal-smaller"
+    class="filter-block button tiny tag mx-1"
     :aria-label="label + 'filter'"
   >
     <span>{{ $t($props.label) }}</span>
     <span
-      class="close margin-left-small padding-small"
+      class="close ml-2 p-2"
       tabindex="0"
       @click="onClick"
       @keyup.enter="onClick"
diff --git a/src/components/Filters/FilterChecklist.vue b/src/components/Filters/FilterChecklist.vue
index 9d37d10aeb..660195a6da 100644
--- a/src/components/Filters/FilterChecklist.vue
+++ b/src/components/Filters/FilterChecklist.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="filters padding-vertical-big padding-left-big padding-right-normal"
+    class="filters py-6 pl-6 pr-4"
     @click="hideLicenseExplanationVisibility()"
     @keyup.enter="hideLicenseExplanationVisibility()"
   >
@@ -13,7 +13,7 @@
       <button
         v-if="!filtersExpandedByDefault"
         :aria-label="'filters list for' + title + 'category'"
-        class="filter-visibility-toggle is-white padding-vertical-small"
+        class="filter-visibility-toggle is-white py-2"
       >
         <i
           v-if="areFiltersExpanded"
@@ -31,14 +31,14 @@
       <div
         v-for="(item, index) in options"
         :key="index"
-        class="margin-top-small filter-checkbox-wrapper"
+        class="mt-2 filter-checkbox-wrapper"
       >
         <label class="checkbox" :for="item.code" :disabled="block(item)">
           <input
             :id="item.code"
             :key="index"
             type="checkbox"
-            class="filter-checkbox margin-right-small"
+            class="filter-checkbox mr-2"
             :checked="item.checked"
             :disabled="block(item)"
             @change="onValueChange"
@@ -57,7 +57,7 @@
           tabindex="0"
           src="@/assets/help_icon.svg"
           alt="help"
-          class="license-help padding-top-smallest padding-right-smaller"
+          class="license-help pr-1"
           @click.stop="toggleLicenseExplanationVisibility(item.code)"
           @keyup.enter="toggleLicenseExplanationVisibility(item.code)"
         />
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 0fe2600d9e..03d0428199 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -1,15 +1,13 @@
 <template>
   <div>
     <div class="filterlist-header">
-      <h4
-        class="padding-top-big padding-left-big padding-right-normal inline-block"
-      >
+      <h4 class="pt-6 pl-6 pr-4 inline-block">
         {{ $t('filter-list.filter-by') }}
       </h4>
 
       <button
         type="button"
-        class="button is-text tiny is-paddingless margin-top-big margin-right-small report is-shadowless is-pulled-right"
+        class="button is-text tiny is-paddingless mt-6 mr-2 report is-shadowless is-pulled-right"
         @click="onToggleSearchGridFilter()"
         @keyup.enter="onToggleSearchGridFilter()"
       >
@@ -17,7 +15,7 @@
           class="has-color-transition-blue hidden desk:block text-sm lowercase"
           >{{ $t('filter-list.hide') }}</span
         >
-        <span class="margin-right-normal text-lg desk:hidden">
+        <span class="mr-4 text-lg desk:hidden">
           <i class="icon cross" />
         </span>
       </button>
@@ -80,10 +78,7 @@
         filter-type="sizes"
         @filterChanged="onUpdateFilter"
       />
-      <div
-        v-if="activeTab == 'image'"
-        class="margin-normal filter-option small-filter margin-bottom-normal"
-      >
+      <div v-if="activeTab == 'image'" class="m-4 filter-option small-filter">
         <label for="creator" :aria-label="$t('browse-page.aria.creator')">
           <input
             id="creator"
@@ -98,17 +93,14 @@
     </form>
     <div
       v-if="isFilterApplied"
-      class="margin-big padding-bottom-normal clear-filters hidden desk:block"
+      class="m-6 pb-4 clear-filters hidden desk:block"
     >
       <button class="button tiny" @click="onClearFilters">
         {{ $t('filter-list.clear') }}
       </button>
     </div>
-    <div
-      v-if="isFilterApplied"
-      class="bg-white padding-big desk:hidden text-center"
-    >
-      <button class="button tiny margin-right-normal" @click="onClearFilters">
+    <div v-if="isFilterApplied" class="bg-white p-6 desk:hidden text-center">
+      <button class="button tiny mr-4" @click="onClearFilters">
         {{ $t('filter-list.clear') }}
       </button>
       <button
diff --git a/src/components/Filters/LicenseExplanationTooltip.vue b/src/components/Filters/LicenseExplanationTooltip.vue
index 1df82f1f01..01f9febec6 100644
--- a/src/components/Filters/LicenseExplanationTooltip.vue
+++ b/src/components/Filters/LicenseExplanationTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="license-explanation-tooltip padding-small">
+  <div class="license-explanation-tooltip p-2">
     <h5 v-if="(license === 'cc0') | (license === 'pdm')" class="b-header">
       {{ license.toUpperCase() }}
     </h5>
@@ -12,7 +12,7 @@
       v-if="(license === 'cc0') | (license === 'pdm')"
       path="filters.license-explanation.tool"
       tag="p"
-      class="caption is-pulled-right margin-small"
+      class="caption is-pulled-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
@@ -24,7 +24,7 @@
       v-else
       path="filters.license-explanation.license"
       tag="p"
-      class="caption is-pulled-right margin-small"
+      class="caption is-pulled-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index caec70b951..53c041098c 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -13,7 +13,7 @@
           <LocaleSelector />
         </section>
         <div class="column is-half">
-          <div class="attribution margin-top-bigger">
+          <div class="attribution mt-8">
             <i18n path="footer.caption.label" tag="p" class="caption">
               <template #noted>
                 <a
@@ -43,13 +43,9 @@
                 </a>
               </template>
             </i18n>
-            <div class="margin-top-smaller">
-              <i
-                class="icon cc-logo margin-right-small text-lgr is-color-white"
-              />
-              <i
-                class="icon cc-by margin-right-small text-lgr is-color-white"
-              />
+            <div class="mt-1">
+              <i class="icon cc-logo mr-2 text-lgr is-color-white" />
+              <i class="icon cc-by mr-2 text-lgr is-color-white" />
             </div>
           </div>
         </div>
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 83acac3d4a..571f555771 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -2,14 +2,14 @@
   <!-- eslint-disable vuejs-accessibility/no-autofocus -->
   <div class="hero">
     <div class="hero-center text-center">
-      <h1 class="title is-2 padding-bottom-normal">
+      <h1 class="title is-2 pb-4">
         {{ $t('hero.title') }}
       </h1>
       <h2 class="title is-5 b-header font-medium">
         {{ $t('hero.subtitle') }}
       </h2>
       <form
-        class="hero-search__form margin-top-larger"
+        class="hero-search__form mt-12"
         role="search"
         method="get"
         action="/search"
@@ -32,7 +32,7 @@
             {{ $t('hero.search.button') }}
           </button>
         </div>
-        <div class="caption margin-top-big font-medium">
+        <div class="caption mt-6 font-medium">
           <i18n path="hero.caption.content" tag="p">
             <template #link>
               <a
diff --git a/src/components/HomeLicenseFilter.vue b/src/components/HomeLicenseFilter.vue
index 5dd3709513..8e7b1eb631 100644
--- a/src/components/HomeLicenseFilter.vue
+++ b/src/components/HomeLicenseFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="home-license-filter margin-top-xl">
+  <fieldset class="home-license-filter mt-16">
     <legend>
       {{ $t('hero.license-filter.label') }}
     </legend>
diff --git a/src/components/ImageDetails/CopyLicense.vue b/src/components/ImageDetails/CopyLicense.vue
index 8dd3660897..21c1f893ab 100644
--- a/src/components/ImageDetails/CopyLicense.vue
+++ b/src/components/ImageDetails/CopyLicense.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="copy-license margin-vertical-normal">
-    <h5 class="b-header margin-bottom-normal">
+  <div class="copy-license my-4">
+    <h5 class="b-header mb-4">
       {{ $t('photo-details.reuse.copy-license.title') }}
     </h5>
     <section class="tabs boxed">
diff --git a/src/components/ImageDetails/ImageAttribution.vue b/src/components/ImageDetails/ImageAttribution.vue
index 18a816e91c..2689e6fb62 100644
--- a/src/components/ImageDetails/ImageAttribution.vue
+++ b/src/components/ImageDetails/ImageAttribution.vue
@@ -2,9 +2,9 @@
   <section class="sidebar_section">
     <div
       v-if="fullLicenseName.includes('cc0') || fullLicenseName.includes('pdm')"
-      class="photo-attribution margin-bottom-big"
+      class="photo-attribution mb-6"
     >
-      <h5 class="b-header margin-bottom-big">
+      <h5 class="b-header mb-6">
         {{ $t('photo-details.reuse.tool-header') }}
       </h5>
       <LicenseExplanations :license="image.license" />
@@ -26,8 +26,8 @@
         </template>
       </i18n>
     </div>
-    <div v-else class="photo-attribution margin-bottom-big">
-      <h5 class="b-header margin-bottom-big">
+    <div v-else class="photo-attribution mb-6">
+      <h5 class="b-header mb-6">
         {{ $t('photo-details.reuse.license-header') }}
       </h5>
       <i18n
diff --git a/src/components/ImageDetails/ImageInfo.vue b/src/components/ImageDetails/ImageInfo.vue
index 6b623e802a..44f70362e2 100644
--- a/src/components/ImageDetails/ImageInfo.vue
+++ b/src/components/ImageDetails/ImageInfo.vue
@@ -1,12 +1,12 @@
 <template>
   <section class="sidebar_section">
-    <div class="margin-bottom-big">
+    <div class="mb-6">
       <dl>
-        <dt class="margin-bottom-small">
+        <dt class="mb-2">
           {{ $t('photo-details.information.type') }}
         </dt>
         <dd>{{ prettyImageType }}</dd>
-        <dt class="margin-bottom-small">
+        <dt class="mb-2">
           {{ $t('photo-details.information.dimensions') }}
         </dt>
         <dd>
@@ -15,13 +15,13 @@
           <!-- eslint-enable -->
           {{ $t('photo-details.information.pixels') }}
         </dd>
-        <dt v-if="providerName != sourceName" class="margin-bottom-small">
+        <dt v-if="providerName != sourceName" class="mb-2">
           {{ $t('photo-details.information.provider') }}
         </dt>
         <dd v-if="providerName != sourceName">
           {{ providerName }}
         </dd>
-        <dt class="margin-bottom-small">
+        <dt class="mb-2">
           {{ $t('photo-details.information.source') }}
         </dt>
         <dd>
@@ -38,8 +38,8 @@
         </dd>
       </dl>
     </div>
-    <div class="margin-bottom-big">
-      <h5 class="margin-bottom-small b-header">
+    <div class="mb-6">
+      <h5 class="mb-2 b-header">
         {{ $t('photo-details.information.tags') }}
       </h5>
       <PhotoTags :tags="image.tags" :show-header="false" />
diff --git a/src/components/ImageDetails/LegalDisclaimer.vue b/src/components/ImageDetails/LegalDisclaimer.vue
index cc2d60f3a7..dfab187600 100644
--- a/src/components/ImageDetails/LegalDisclaimer.vue
+++ b/src/components/ImageDetails/LegalDisclaimer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="margin-top-normal margin-bottom-small">
+  <div class="mt-4 mb-2">
     <p class="caption has-text-left text-dark-gray">
       {{ $t('photo-details.legal-disclaimer') }}
     </p>
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index 40ee83a8e7..92da9e45e4 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="photo columns is-desktop is-marginless padding-bottom-xl">
-    <div class="column is-three-fifths photo_image-ctr margin-top-normal">
+  <div class="photo columns is-desktop is-marginless pb-16">
+    <div class="column is-three-fifths photo_image-ctr mt-4">
       <a
         v-if="shouldShowBreadcrumb"
-        class="block photo_breadcrumb has-text-left margin-left-normal margin-bottom-normal text-dark-gray font-semibold caption"
+        class="block photo_breadcrumb has-text-left ml-4 mb-4 text-dark-gray font-semibold caption"
         :href="breadCrumbURL"
         @click.prevent="onGoBackToSearchResults"
         @keyup.enter.prevent="onGoBackToSearchResults"
       >
-        <i class="icon chevron-left margin-right-small" />
+        <i class="icon chevron-left mr-2" />
         {{ $t('photo-details.back') }}
       </a>
 
@@ -28,19 +28,19 @@
 
       <LegalDisclaimer />
 
-      <div class="margin-bottom-smaller has-text-left">
+      <div class="mb-1 has-text-left">
         <button
-          class="button is-text tiny is-paddingless report is-shadowless margin-top-small"
+          class="button is-text tiny is-paddingless report is-shadowless mt-2"
           @click.prevent="toggleReportFormVisibility"
           @keypress.enter.prevent="toggleReportFormVisibility"
         >
-          <span class="has-color-transition-blue margin-left-small text-sm">
-            <i class="icon flag margin-right-small" />
+          <span class="has-color-transition-blue ml-2 text-sm">
+            <i class="icon flag mr-2" />
             {{ $t('photo-details.content-report.title') }}
           </span>
         </button>
       </div>
-      <div class="margin-top-small has-text-left">
+      <div class="mt-2 has-text-left">
         <ContentReportForm
           v-if="isReportFormVisible"
           :image="image"
@@ -51,9 +51,9 @@
     <div
       role="region"
       :aria-label="$t('photo-details.aria.details')"
-      class="column image-info margin-left-larger"
+      class="column image-info ml-12"
     >
-      <div class="margin-top-normal margin-bottom-normal">
+      <div class="my-4">
         <h1 class="title is-5 b-header">
           {{ image.title }}
         </h1>
@@ -168,14 +168,12 @@
         :href="image.foreign_landing_url"
         target="_blank"
         rel="noopener"
-        class="button is-success margin-bottom-small margin-top-normal"
+        class="button is-success mb-2 mt-4"
         @click="onPhotoSourceLinkClicked"
         @keyup.enter="onPhotoSourceLinkClicked"
       >
         {{ $t('photo-details.weblink') }}
-        <i
-          class="icon external-link margin-left-normal text-base padding-top-smaller text-light-gray"
-        />
+        <i class="icon external-link ml-4 text-base pt-1 text-light-gray" />
       </a>
 
       <ReuseSurvey v-if="activeTab < 2" :image="image" />
diff --git a/src/components/ImageDetails/ReuseSurvey.vue b/src/components/ImageDetails/ReuseSurvey.vue
index f9550a6d88..a2a707e583 100644
--- a/src/components/ImageDetails/ReuseSurvey.vue
+++ b/src/components/ImageDetails/ReuseSurvey.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="reuse-survey caption margin-top-smaller">
+  <div class="reuse-survey caption mt-1">
     {{ $t('photo-details.survey.content') }}
     <a
       :href="formLink"
diff --git a/src/components/ImageDetails/SocialShareButtons.vue b/src/components/ImageDetails/SocialShareButtons.vue
index 2296eb4bda..13fa4696c6 100644
--- a/src/components/ImageDetails/SocialShareButtons.vue
+++ b/src/components/ImageDetails/SocialShareButtons.vue
@@ -9,7 +9,7 @@
         @click="onSocialMediaLinkClick('Facebook')"
         @keyup.enter="onSocialMediaLinkClick('Facebook')"
       >
-        <i class="icon facebook colored margin-right-normal text-6xl" />
+        <i class="icon facebook colored mr-4 text-6xl" />
       </a>
       <a
         :aria-label="$t('photo-details.aria.share.twitter')"
@@ -19,7 +19,7 @@
         @click="onSocialMediaLinkClick('Twitter')"
         @keyup.enter="onSocialMediaLinkClick('Twitter')"
       >
-        <i class="icon twitter colored margin-right-normal text-6xl" />
+        <i class="icon twitter colored mr-4 text-6xl" />
       </a>
       <a
         :aria-label="$t('photo-details.aria.share.pinterest')"
diff --git a/src/components/LicenseExplanations.vue b/src/components/LicenseExplanations.vue
index daa9443c24..bc99577d84 100644
--- a/src/components/LicenseExplanations.vue
+++ b/src/components/LicenseExplanations.vue
@@ -1,11 +1,11 @@
 <template>
   <div v-if="license">
-    <ul class="margin-vertical-small">
+    <ul class="my-2">
       <template v-for="(li, index) in splitLicenses">
         <li
           :key="index"
           :class="{
-            ['margin-vertical-small']: true,
+            ['my-2']: true,
             ['flex']: true,
           }"
         >
@@ -15,7 +15,7 @@
               ['text-black']: true,
               ['bg-white']: true,
               ['text-lgr']: true,
-              ['margin-right-small']: true,
+              ['mr-2']: true,
               [`cc-${getLicenseIcon(li)}`]: true,
             }"
             :alt="`${li.toUpperCase()}`"
diff --git a/src/components/MetaSearch/MetaSearchForm.vue b/src/components/MetaSearch/MetaSearchForm.vue
index 9890feb20f..d8e816bbad 100644
--- a/src/components/MetaSearch/MetaSearchForm.vue
+++ b/src/components/MetaSearch/MetaSearchForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <section :key="type" class="padding-big meta-search">
-    <header class="margin-bottom-large">
+  <section :key="type" class="p-6 meta-search">
+    <header class="mb-10">
       <i18n
         :path="
           supported
@@ -8,7 +8,7 @@
             : 'meta-search.form.unsupported-title'
         "
         tag="h4"
-        class="b-header margin-bottom-small"
+        class="b-header mb-2"
       >
         <template #type>
           {{ type }}
diff --git a/src/components/MetaSearch/MetaSourceList.vue b/src/components/MetaSearch/MetaSourceList.vue
index cc2d1e4d16..192df363b2 100644
--- a/src/components/MetaSearch/MetaSourceList.vue
+++ b/src/components/MetaSearch/MetaSourceList.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="margin-bottom-large">
-    <ul class="buttons is-centered margin-top-big">
+  <div class="mb-10">
+    <ul class="buttons is-centered mt-6">
       <li v-for="source in sources" :key="source">
         <a
           target="_blank"
           rel="nofollow noreferrer"
           :href="getSourceUrl(source)"
-          class="button small margin-right-small is-opaque"
+          class="button small mr-2 is-opaque"
         >
           {{ source }}
           <sup class="">
-            <i class="margin-left-small icon external-link" />
+            <i class="ml-2 icon external-link" />
           </sup>
         </a>
       </li>
diff --git a/src/components/NavSection.vue b/src/components/NavSection.vue
index 5c358cbca2..c7501a1462 100644
--- a/src/components/NavSection.vue
+++ b/src/components/NavSection.vue
@@ -26,7 +26,7 @@
       </a>
     </div>
     <div :class="{ ['navbar-menu']: true, ['is-active']: isBurgerMenuActive }">
-      <div v-if="showNavSearch" class="margin-left-big">
+      <div v-if="showNavSearch" class="ml-6">
         <form
           class="hero_search-form"
           role="search"
diff --git a/src/components/PhotoTags.vue b/src/components/PhotoTags.vue
index f0b779c08e..be3b919a1e 100644
--- a/src/components/PhotoTags.vue
+++ b/src/components/PhotoTags.vue
@@ -3,11 +3,11 @@
     <h3 v-if="showHeader" class="b-header">
       {{ $t('photo-details.information.tags') }}
     </h3>
-    <div class="margin-top-normal">
+    <div class="mt-4">
       <template v-for="(tag, index) in getValidTags()">
         <button
           :key="index"
-          class="button tag margin-smaller"
+          class="button tag m-1"
           @click="searchByTagName(tag.name)"
           @keyup.enter="searchByTagName(tag.name)"
         >
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index 7ad2ca91c7..dc411aeea0 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -7,13 +7,13 @@
     >
       <span class="has-color-transition-blue" style="white-space: nowrap">
         {{ $t('browse-page.safer-browsing.title') }}
-        <i class="icon flag margin-left-small" />
+        <i class="icon flag ml-2" />
       </span>
     </button>
     <FocusTrap :active="true">
       <div
         v-show="showForm"
-        class="padding-normal is-clearfix arrow-popup arrow-popup--anchor-right"
+        class="p-4 is-clearfix arrow-popup arrow-popup--anchor-right"
       >
         <button
           class="button close-button is-text tiny is-pulled-right block text-light-gray"
@@ -22,11 +22,11 @@
         >
           <i class="icon cross" />
         </button>
-        <p class="caption font-semibold padding-right-big">
+        <p class="caption font-semibold pr-6">
           {{ $t('browse-page.safer-browsing.caption') }}
         </p>
 
-        <label class="checkbox margin-top-small" for="mature">
+        <label class="checkbox mt-2" for="mature">
           <input
             id="mature"
             class="filter-checkbox"
diff --git a/src/components/SearchGridCell.vue b/src/components/SearchGridCell.vue
index 2d14c0764e..babfc9df83 100644
--- a/src/components/SearchGridCell.vue
+++ b/src/components/SearchGridCell.vue
@@ -26,12 +26,10 @@
           @error="onImageLoadError($event, image)"
         />
       </NuxtLink>
-      <figcaption class="overlay overlay__top padding-small">
+      <figcaption class="overlay overlay__top p-2">
         <LicenseIcons :license="image.license" />
       </figcaption>
-      <figcaption
-        class="overlay overlay__bottom padding-vertical-small padding-horizontal-normal"
-      >
+      <figcaption class="overlay overlay__bottom py-2 px-4">
         <span class="caption font-semibold">{{ image.title }}</span>
       </figcaption>
     </figure>
diff --git a/src/components/SearchGridForm.vue b/src/components/SearchGridForm.vue
index 42ca186836..ca31c42222 100644
--- a/src/components/SearchGridForm.vue
+++ b/src/components/SearchGridForm.vue
@@ -3,7 +3,7 @@
   <form
     role="search"
     method="post"
-    class="search-form padding-normal"
+    class="search-form p-4"
     @submit.prevent="onSubmit"
   >
     <button
@@ -16,7 +16,7 @@
       {{ $t('filters.title') }}
     </button>
     <div
-      class="search-field field has-addons control search-control has-icons-left margin-left-small"
+      class="search-field field has-addons control search-control has-icons-left ml-2"
     >
       <label for="searchInput" class="search-field__label control label">
         <input
diff --git a/src/components/SearchGridManualLoad.vue b/src/components/SearchGridManualLoad.vue
index c463d14d15..38c116d4f6 100644
--- a/src/components/SearchGridManualLoad.vue
+++ b/src/components/SearchGridManualLoad.vue
@@ -11,7 +11,7 @@
         <span class="caption font-semibold">
           {{ _imagesCount }}
         </span>
-        <div class="hidden desk:block mr-auto padding-left-big">
+        <div class="hidden desk:block mr-auto pl-6">
           <SearchRating v-if="_query.q" :search-term="_query.q" />
         </div>
         <div class="desk:hidden">
@@ -26,7 +26,7 @@
           :image="image"
         />
       </div>
-      <div class="padding-bottom-big">
+      <div class="pb-6">
         <div class="load-more">
           <button
             v-show="!isFetchingImages && includeAnalytics"
@@ -274,8 +274,4 @@ label {
     font-size: 0.8rem;
   }
 }
-
-.mr-auto {
-  margin-right: auto;
-}
 </style>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 11b0fe6246..1d9fce7292 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -2,7 +2,7 @@
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div>
-        <h1 class="title is-2 margin-bottom-large">
+        <h1 class="title is-2 mb-10">
           {{ $t('about.title') }}
         </h1>
         <div class="content">
diff --git a/src/pages/feedback.vue b/src/pages/feedback.vue
index 9252750dbd..e2ab573602 100644
--- a/src/pages/feedback.vue
+++ b/src/pages/feedback.vue
@@ -1,15 +1,11 @@
 <template>
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="padding-bottom-big">
-        <h1 id="feedback" class="title is-2 margin-bottom-large">
+      <div class="pb-6">
+        <h1 id="feedback" class="title is-2 mb-10">
           {{ $t('feedback.title') }}
         </h1>
-        <i18n
-          path="feedback.description.content"
-          tag="p"
-          class="margin-bottom-large"
-        >
+        <i18n path="feedback.description.content" tag="p" class="mb-6">
           <template #openverse>
             <a
               href="https://wordpress.slack.com/messages/openverse/"
@@ -24,7 +20,7 @@
             >
           </template>
         </i18n>
-        <section class="tabs margin-top-big">
+        <section class="tabs mt-6">
           <div role="tablist" :aria-label="$t('feedback.title')">
             <button
               v-for="(name, index) in tabs"
diff --git a/src/pages/meta-search.vue b/src/pages/meta-search.vue
index 6b4b3e7348..9c7df21cde 100644
--- a/src/pages/meta-search.vue
+++ b/src/pages/meta-search.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="section margin-bottom-large">
+  <div class="section mb-10">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="margin-bottom-large">
+      <div class="mb-10">
         <h1 class="title is-2">
           {{ $t('meta-search-page.title') }}
         </h1>
       </div>
 
-      <i18n path="meta-search-page.intro" tag="p" class="margin-bottom-normal">
+      <i18n path="meta-search-page.intro" tag="p" class="mb-4">
         <template #link>
           <a aria-label="sources" href="/sources">{{
             $t('meta-search-page.link')
@@ -33,48 +33,36 @@
           </li>
         </ol>
       </div>
-      <i18n
-        path="meta-search-page.images.info"
-        tag="p"
-        class="margin-bottom-small"
-      >
+      <i18n path="meta-search-page.images.info" tag="p" class="mb-2">
         <template #use>
           <strong>{{ $t('meta-search-page.use') }}</strong>
         </template>
       </i18n>
-      <figure class="image margin-vertical-large">
+      <figure class="image my-10">
         <img
           src="@/assets/meta-search-images.gif"
           alt="Meta Search Images - Cars"
         />
       </figure>
-      <h4 class="b-header margin-top-large">
+      <h4 class="b-header mt-10">
         {{ $t('meta-search-page.audio-video.title') }}
       </h4>
       <p>{{ $t('meta-search-page.audio-video.content') }}</p>
-      <i18n
-        path="meta-search-page.audio-video.filter"
-        tag="p"
-        class="margin-vertical-small"
-      >
+      <i18n path="meta-search-page.audio-video.filter" tag="p" class="my-2">
         <template #use>
           <strong>{{ $t('meta-search-page.use') }}</strong>
         </template>
       </i18n>
-      <figure class="image margin-vertical-large">
+      <figure class="image my-10">
         <img
           src="@/assets/meta-search-audio.gif"
           alt="Meta Search Audio - Drums"
         />
       </figure>
-      <h4 class="b-header margin-top-large">
+      <h4 class="b-header mt-10">
         {{ $t('meta-search-page.new.title') }}
       </h4>
-      <i18n
-        path="meta-search-page.new.content"
-        tag="p"
-        class="margin-bottom-small"
-      >
+      <i18n path="meta-search-page.new.content" tag="p" class="mb-2">
         <template #issue>
           <a
             aria-label="issue"
@@ -90,17 +78,17 @@
           >
         </template>
       </i18n>
-      <h4 class="b-header margin-top-large">
+      <h4 class="b-header mt-10">
         {{ $t('meta-search-page.why.title') }}
       </h4>
       <p>{{ $t('meta-search-page.why.content') }}</p>
-      <figure class="image margin-vertical-large">
+      <figure class="image my-10">
         <img
           src="@/assets/cc-meta-search.gif"
           alt="Old CC Meta Search Portal Demo"
         />
       </figure>
-      <p class="margin-vertical-small">
+      <p class="my-2">
         {{ $t('meta-search-page.why.new') }}
       </p>
       <i18n path="meta-search-page.why.feedback" tag="p">
diff --git a/src/pages/photos/_id.vue b/src/pages/photos/_id.vue
index cb5778c120..2a5af6fcaf 100644
--- a/src/pages/photos/_id.vue
+++ b/src/pages/photos/_id.vue
@@ -12,13 +12,10 @@
       :social-sharing-enabled="socialSharingEnabled"
       @onImageLoaded="onImageLoaded"
     />
-    <div class="padding-normal margin-vertical-big">
+    <div class="p-4 my-6">
       <PhotoTags :tags="tags" :show-header="true" />
     </div>
-    <aside
-      :aria-label="$t('photo-details.aria.related')"
-      class="padding-normal margin-vertical-big"
-    >
+    <aside :aria-label="$t('photo-details.aria.related')" class="p-4 my-6">
       <RelatedImages
         :related-images="relatedImages"
         :images-count="imagesCount"
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index 5c6415c203..fd5270bba2 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="margin-bottom-large">
+      <div class="mb-10">
         <h1 class="title is-2">
           {{ $t('search-guide.title') }}
         </h1>
@@ -9,7 +9,7 @@
           {{ $t('search-guide.intro') }}
         </p>
 
-        <h2 class="margin-top-large title is-3">
+        <h2 class="mt-10 title is-3">
           {{ $t('search-guide.exact.title') }}
         </h2>
         <i18n path="search-guide.exact.content" tag="p">
@@ -25,11 +25,11 @@
           </template>
         </i18n>
 
-        <h3 class="margin-vertical-normal">
+        <h3 class="my-4">
           {{ $t('search-guide.combine.title') }}
         </h3>
 
-        <p class="margin-vertical-normal">
+        <p class="my-4">
           {{ $t('search-guide.combine.description') }}
         </p>
         <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
@@ -103,11 +103,7 @@
           </i18n>
         </ul>
 
-        <i18n
-          path="search-guide.example.and.description"
-          tag="p"
-          class="margin-vertical-normal"
-        >
+        <i18n path="search-guide.example.and.description" tag="p" class="my-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.and.aria-label')"
@@ -121,11 +117,7 @@
           </template>
         </i18n>
 
-        <i18n
-          path="search-guide.example.or"
-          tag="p"
-          class="margin-vertical-normal"
-        >
+        <i18n path="search-guide.example.or" tag="p" class="my-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.or.aria-label')"
@@ -142,7 +134,7 @@
         <i18n
           path="search-guide.example.negate.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #operator>
             <em
@@ -154,11 +146,7 @@
           </template>
         </i18n>
 
-        <i18n
-          path="search-guide.example.negate.content"
-          tag="p"
-          class="margin-bottom-normal"
-        >
+        <i18n path="search-guide.example.negate.content" tag="p" class="mb-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.negate.aria-label')"
@@ -175,7 +163,7 @@
         <i18n
           path="search-guide.example.prefix.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #operator>
             <em :aria-label="$t('search-guide.example.prefix.aria-label')"
@@ -184,11 +172,7 @@
           </template>
         </i18n>
 
-        <i18n
-          path="search-guide.example.prefix.content"
-          tag="p"
-          class="margin-bottom-normal"
-        >
+        <i18n path="search-guide.example.prefix.content" tag="p" class="mb-4">
           <template #link>
             <a
               :aria-label="$t('search-guide.example.prefix.aria-label')"
@@ -205,7 +189,7 @@
         <i18n
           path="search-guide.example.precedence.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #highlight>
             <em>( and )</em>
@@ -215,7 +199,7 @@
         <i18n
           path="search-guide.example.precedence.content"
           tag="p"
-          class="margin-bottom-normal"
+          class="mb-4"
         >
           <template #link>
             <a
@@ -233,7 +217,7 @@
         <i18n
           path="search-guide.example.fuzziness.description"
           tag="p"
-          class="margin-top-normal"
+          class="mt-4"
         >
           <template #highlight>
             <em aria-label="tilde N">~N</em>
@@ -248,7 +232,7 @@
         <i18n
           path="search-guide.example.fuzziness.content"
           tag="p"
-          class="margin-bottom-normal"
+          class="mb-4"
         >
           <template #link>
             <a
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index b8647a7117..14dfb6d817 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -1,22 +1,18 @@
 <template>
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-      <div class="margin-bottom-large">
-        <h1 class="title is-2 margin-bottom-large">
+      <div class="mb-10">
+        <h1 class="title is-2 mb-10">
           {{ $t('sources.title') }}
         </h1>
-        <div class="margin-bottom-large">
+        <div class="mb-10">
           <h3 class="title subtitle is-normal is-3">
             {{ $t('sources.cc-content.where') }}
           </h3>
-          <p class="margin-vertical-normal">
+          <p class="my-4">
             {{ $t('sources.cc-content.content') }}
           </p>
-          <i18n
-            path="sources.cc-content.provider"
-            tag="p"
-            class="margin-vertical-normal"
-          >
+          <i18n path="sources.cc-content.provider" tag="p" class="my-4">
             <template #flickr>
               <a aria-label="flickr" href="https://www.flickr.com/">{{
                 $t('sources.cc-content.flickr')
@@ -28,11 +24,7 @@
               }}</a>
             </template>
           </i18n>
-          <i18n
-            path="sources.cc-content.europeana"
-            tag="p"
-            class="margin-vertical-normal"
-          >
+          <i18n path="sources.cc-content.europeana" tag="p" class="my-4">
             <template #link>
               <a aria-label="europeana" href="https://www.europeana.eu/en">{{
                 $t('sources.cc-content.europeana-link')
@@ -47,11 +39,11 @@
             </template>
           </i18n>
         </div>
-        <div class="margin-bottom-large">
+        <div class="mb-10">
           <h3 class="title subtitle is-normal is-3">
             {{ $t('sources.new-content.next') }}
           </h3>
-          <p class="margin-vertical-normal">
+          <p class="my-4">
             {{ $t('sources.new-content.integrate') }}
           </p>
           <div class="content">
@@ -69,19 +61,17 @@
           </div>
         </div>
 
-        <h3 class="title subtitle is-3 margin-vertical-normal">
+        <h3 class="title subtitle is-3 my-4">
           {{ $t('sources.suggestions') }}
         </h3>
         <a
           href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C+%F0%9F%A7%B9+status%3A+ticket+work+required%2C+%E2%98%81%EF%B8%8F+provider%3A+any&template=new-source-suggestion.md&title=%5BSource+Suggestion%5D+Insert+source+name+here"
-          class="button is-primary padding-vertical-bigger"
+          class="button is-primary py-8"
           target="_blank"
           rel="noopener noreferrer"
         >
           {{ $t('sources.issue-button') }}
-          <i
-            class="icon external-link margin-horizontal-small margin-top-small"
-          />
+          <i class="icon external-link mx-2 mt-2" />
         </a>
       </div>
       <i18n path="sources.detail" tag="p">
@@ -94,7 +84,7 @@
       <table
         :aria-label="$t('about.aria.sources')"
         role="region"
-        class="table is-striped margin-bottom-large margin-top-normal"
+        class="table is-striped mt-4 mb-10"
       >
         <thead>
           <tr>

From 8822b2169a01a8c041e1247749c4b8a388c84248 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 15:16:19 +0530
Subject: [PATCH 09/21] Replace Bulma's `has-text-left` with Tailwind's
 `text-left`

---
 src/components/ImageDetails/LegalDisclaimer.vue | 2 +-
 src/components/ImageDetails/PhotoDetails.vue    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ImageDetails/LegalDisclaimer.vue b/src/components/ImageDetails/LegalDisclaimer.vue
index dfab187600..2af5c1b50f 100644
--- a/src/components/ImageDetails/LegalDisclaimer.vue
+++ b/src/components/ImageDetails/LegalDisclaimer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-4 mb-2">
-    <p class="caption has-text-left text-dark-gray">
+    <p class="caption text-left text-dark-gray">
       {{ $t('photo-details.legal-disclaimer') }}
     </p>
   </div>
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index 92da9e45e4..90f545855f 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -3,7 +3,7 @@
     <div class="column is-three-fifths photo_image-ctr mt-4">
       <a
         v-if="shouldShowBreadcrumb"
-        class="block photo_breadcrumb has-text-left ml-4 mb-4 text-dark-gray font-semibold caption"
+        class="block photo_breadcrumb text-left ml-4 mb-4 text-dark-gray font-semibold caption"
         :href="breadCrumbURL"
         @click.prevent="onGoBackToSearchResults"
         @keyup.enter.prevent="onGoBackToSearchResults"
@@ -28,7 +28,7 @@
 
       <LegalDisclaimer />
 
-      <div class="mb-1 has-text-left">
+      <div class="mb-1 text-left">
         <button
           class="button is-text tiny is-paddingless report is-shadowless mt-2"
           @click.prevent="toggleReportFormVisibility"
@@ -40,7 +40,7 @@
           </span>
         </button>
       </div>
-      <div class="mt-2 has-text-left">
+      <div class="mt-2 text-left">
         <ContentReportForm
           v-if="isReportFormVisible"
           :image="image"

From ab1bed70a7285bdc41f053faebe7fc9c5042049a Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 15:45:32 +0530
Subject: [PATCH 10/21] Fix Bulma's miscellaneous helpers with Tailwind
 counterparts

---
 src/components/ContentReport/ContentReportForm.vue   | 6 +++---
 src/components/ContentReport/DmcaNotice.vue          | 2 +-
 src/components/ContentReport/OtherIssueForm.vue      | 2 +-
 src/components/ContentReport/ReportError.vue         | 2 +-
 src/components/Filters/FiltersList.vue               | 2 +-
 src/components/Filters/LicenseExplanationTooltip.vue | 4 ++--
 src/components/ImageDetails/PhotoDetails.vue         | 2 +-
 src/components/SaferBrowsing.vue                     | 9 +++------
 src/components/SearchRating.vue                      | 4 ++--
 9 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/ContentReport/ContentReportForm.vue b/src/components/ContentReport/ContentReportForm.vue
index 1a2636ff01..677a7d4707 100644
--- a/src/components/ContentReport/ContentReportForm.vue
+++ b/src/components/ContentReport/ContentReportForm.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="content-report-form" class="p-4 is-clearfix arrow-popup">
+  <div id="content-report-form" class="p-4 arrow-popup">
     <button
       :aria-label="$t('photo-details.aria.close-form')"
-      class="button close-button is-text tiny is-pulled-right block bg-white"
+      class="button close-button is-text tiny float-right block bg-white"
       @click="closeForm()"
       @keyup.enter="closeForm()"
     >
@@ -83,7 +83,7 @@
       <button
         type="button"
         :disabled="selectedReason === null"
-        class="button next-button tiny is-success is-pulled-right"
+        class="button next-button tiny is-success float-right"
         @click="onIssueSelected()"
         @keyup.enter="onIssueSelected()"
       >
diff --git a/src/components/ContentReport/DmcaNotice.vue b/src/components/ContentReport/DmcaNotice.vue
index 02f8a81fd4..23241e815c 100644
--- a/src/components/ContentReport/DmcaNotice.vue
+++ b/src/components/ContentReport/DmcaNotice.vue
@@ -33,7 +33,7 @@
     </i18n>
 
     <button
-      class="button is-text tiny mt-4 is-shadowless"
+      class="button is-text tiny mt-4"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
diff --git a/src/components/ContentReport/OtherIssueForm.vue b/src/components/ContentReport/OtherIssueForm.vue
index eec89c63d1..edd6f35893 100644
--- a/src/components/ContentReport/OtherIssueForm.vue
+++ b/src/components/ContentReport/OtherIssueForm.vue
@@ -29,7 +29,7 @@
       <button
         type="button"
         :disabled="!descriptionHasMoreThan20Chars"
-        class="button submit-other-button tiny is-success mt-4 is-pulled-right"
+        class="button submit-other-button tiny is-success mt-4 float-right"
         @click="sendContentReport()"
         @keyup.enter="sendContentReport()"
       >
diff --git a/src/components/ContentReport/ReportError.vue b/src/components/ContentReport/ReportError.vue
index e930c1db07..afa9b8f880 100644
--- a/src/components/ContentReport/ReportError.vue
+++ b/src/components/ContentReport/ReportError.vue
@@ -4,7 +4,7 @@
       {{ $t('photo-details.content-report.dmca.error') }}
     </span>
     <button
-      class="button is-text tiny mt-4 is-shadowless"
+      class="button is-text tiny mt-4"
       @click="onBackClick()"
       @keyup.enter="onBackClick()"
     >
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 03d0428199..6d5dd7d822 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -7,7 +7,7 @@
 
       <button
         type="button"
-        class="button is-text tiny is-paddingless mt-6 mr-2 report is-shadowless is-pulled-right"
+        class="button is-text tiny is-paddingless mt-6 mr-2 report float-right"
         @click="onToggleSearchGridFilter()"
         @keyup.enter="onToggleSearchGridFilter()"
       >
diff --git a/src/components/Filters/LicenseExplanationTooltip.vue b/src/components/Filters/LicenseExplanationTooltip.vue
index 01f9febec6..259eef7b30 100644
--- a/src/components/Filters/LicenseExplanationTooltip.vue
+++ b/src/components/Filters/LicenseExplanationTooltip.vue
@@ -12,7 +12,7 @@
       v-if="(license === 'cc0') | (license === 'pdm')"
       path="filters.license-explanation.tool"
       tag="p"
-      class="caption is-pulled-right m-2"
+      class="caption float-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
@@ -24,7 +24,7 @@
       v-else
       path="filters.license-explanation.license"
       tag="p"
-      class="caption is-pulled-right m-2"
+      class="caption float-right m-2"
     >
       <template #link>
         <a target="_blank" :href="`${getLicenseDeedLink(license)}`">{{
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index 90f545855f..070396850c 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -30,7 +30,7 @@
 
       <div class="mb-1 text-left">
         <button
-          class="button is-text tiny is-paddingless report is-shadowless mt-2"
+          class="button is-text tiny is-paddingless report mt-2"
           @click.prevent="toggleReportFormVisibility"
           @keypress.enter.prevent="toggleReportFormVisibility"
         >
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index dc411aeea0..99be829938 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="safer-browsing" @keyup.esc="closeShowForm">
     <button
-      class="button is-text tiny is-paddingless rating is-shadowless"
+      class="button is-text tiny is-paddingless rating"
       @keypress.enter="toggleShowForm"
       @click="toggleShowForm"
     >
@@ -11,12 +11,9 @@
       </span>
     </button>
     <FocusTrap :active="true">
-      <div
-        v-show="showForm"
-        class="p-4 is-clearfix arrow-popup arrow-popup--anchor-right"
-      >
+      <div v-show="showForm" class="p-4 arrow-popup arrow-popup--anchor-right">
         <button
-          class="button close-button is-text tiny is-pulled-right block text-light-gray"
+          class="button close-button is-text tiny float-right block text-light-gray"
           @keypress.enter="toggleShowForm"
           @click="toggleShowForm"
         >
diff --git a/src/components/SearchRating.vue b/src/components/SearchRating.vue
index 35169e912a..18c834cc33 100644
--- a/src/components/SearchRating.vue
+++ b/src/components/SearchRating.vue
@@ -5,7 +5,7 @@
       <span>{{ $t('browse-page.search-rating.content') }}</span>
       <button
         :aria-label="$t('browse-page.aria.relevance.yes')"
-        class="button is-text tiny is-paddingless rating rating-yes is-shadowless"
+        class="button is-text tiny is-paddingless rating rating-yes"
         @click="sendSearchRatingEvent(true)"
         @keyup.enter="sendSearchRatingEvent(true)"
       >
@@ -14,7 +14,7 @@
       •
       <button
         :aria-label="$t('browse-page.aria.relevance.no')"
-        class="button is-text tiny is-paddingless rating rating-no is-shadowless"
+        class="button is-text tiny is-paddingless rating rating-no"
         @click="sendSearchRatingEvent(false)"
         @keyup.enter="sendSearchRatingEvent(false)"
       >

From 8393aa630b7d295c6e2181d09b802ca5b20a798a Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 15:58:55 +0530
Subject: [PATCH 11/21] Handle Bulma's `is-paddingless` and `is-marginless`
 helpers

---
 src/components/Filters/FiltersList.vue       | 2 +-
 src/components/ImageDetails/CopyLicense.vue  | 2 +-
 src/components/ImageDetails/PhotoDetails.vue | 4 ++--
 src/components/SaferBrowsing.vue             | 2 +-
 src/components/SearchRating.vue              | 4 ++--
 src/pages/search.vue                         | 2 +-
 tailwind.config.js                           | 1 +
 7 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index 6d5dd7d822..a1d2ddc0a9 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -7,7 +7,7 @@
 
       <button
         type="button"
-        class="button is-text tiny is-paddingless mt-6 mr-2 report float-right"
+        class="button is-text tiny p-0 mt-6 mr-2 report float-right"
         @click="onToggleSearchGridFilter()"
         @keyup.enter="onToggleSearchGridFilter()"
       >
diff --git a/src/components/ImageDetails/CopyLicense.vue b/src/components/ImageDetails/CopyLicense.vue
index 21c1f893ab..608d1628c8 100644
--- a/src/components/ImageDetails/CopyLicense.vue
+++ b/src/components/ImageDetails/CopyLicense.vue
@@ -121,7 +121,7 @@
         <label for="attribution-html">
           <textarea
             id="attribution-html"
-            class="textarea monospace is-paddingless"
+            class="textarea monospace p-0"
             :value="attributionHtml"
             cols="30"
             rows="4"
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index 070396850c..ba4c0d7d8f 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="photo columns is-desktop is-marginless pb-16">
+  <div class="photo columns is-desktop m-0 pb-16">
     <div class="column is-three-fifths photo_image-ctr mt-4">
       <a
         v-if="shouldShowBreadcrumb"
@@ -30,7 +30,7 @@
 
       <div class="mb-1 text-left">
         <button
-          class="button is-text tiny is-paddingless report mt-2"
+          class="button is-text tiny p-0 report mt-2"
           @click.prevent="toggleReportFormVisibility"
           @keypress.enter.prevent="toggleReportFormVisibility"
         >
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index 99be829938..18a3f94406 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="safer-browsing" @keyup.esc="closeShowForm">
     <button
-      class="button is-text tiny is-paddingless rating"
+      class="button is-text tiny p-0 rating"
       @keypress.enter="toggleShowForm"
       @click="toggleShowForm"
     >
diff --git a/src/components/SearchRating.vue b/src/components/SearchRating.vue
index 18c834cc33..2446e5e55e 100644
--- a/src/components/SearchRating.vue
+++ b/src/components/SearchRating.vue
@@ -5,7 +5,7 @@
       <span>{{ $t('browse-page.search-rating.content') }}</span>
       <button
         :aria-label="$t('browse-page.aria.relevance.yes')"
-        class="button is-text tiny is-paddingless rating rating-yes"
+        class="button is-text tiny p-0 rating rating-yes"
         @click="sendSearchRatingEvent(true)"
         @keyup.enter="sendSearchRatingEvent(true)"
       >
@@ -14,7 +14,7 @@
       •
       <button
         :aria-label="$t('browse-page.aria.relevance.no')"
-        class="button is-text tiny is-paddingless rating rating-no"
+        class="button is-text tiny p-0 rating rating-no"
         @click="sendSearchRatingEvent(false)"
         @keyup.enter="sendSearchRatingEvent(false)"
       >
diff --git a/src/pages/search.vue b/src/pages/search.vue
index 02dae0a7dc..5aff420577 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -8,7 +8,7 @@
       </div>
       <aside
         v-if="isFilterVisible"
-        class="column is-narrow grid-sidebar is-paddingless hidden desk:block full-height-sticky"
+        class="column is-narrow grid-sidebar p-0 hidden desk:block full-height-sticky"
       >
         <SearchGridFilter @onSearchFilterChanged="onSearchFormSubmit" />
       </aside>
diff --git a/tailwind.config.js b/tailwind.config.js
index 884caa7ccd..69d6f2a704 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,6 +30,7 @@ module.exports = {
     },
     spacing: {
       // Indexed by multiples of baseline (~ `0.25rem`)
+      0: '0',
       1: '0.25rem',
       2: '0.50rem',
       4: '1.00rem',

From a14d1f681a6f396624895c9c2869496e46920b6b Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 15:59:29 +0530
Subject: [PATCH 12/21] Patch over button icon spacing issues

---
 src/styles/components/button.sass | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/styles/components/button.sass b/src/styles/components/button.sass
index 4c15fc17d9..f414bd7f39 100644
--- a/src/styles/components/button.sass
+++ b/src/styles/components/button.sass
@@ -67,15 +67,15 @@ $button-colors: $colors
     &.is-large
       height: 1.5em
       width: 1.5em
-    &:first-child:not(:last-child)
-      +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}), false)
-      +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem))
-    &:last-child:not(:first-child)
-      +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem), false)
-      +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}))
-    &:first-child:last-child
-      margin-left: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
-      margin-right: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
+    //&:first-child:not(:last-child)
+    //  +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}), false)
+    //  +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem))
+    //&:last-child:not(:first-child)
+    //  +ltr-property("margin", var(--button-padding-horizontal-fourth, 0.2rem), false)
+    //  +ltr-property("margin", calc(-1 / 2 * var(--button-padding-horizontal) - #{$button-border-width}))
+    //&:first-child:last-child
+    //  margin-left: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
+    //  margin-right: calc(-1 / 2 * var(--button-padding-horizontal) - var(--button-border-width))
   // States
   &:hover,
   &.is-hovered

From 2172695ab10314c6f69b062be7144c40721cd68b Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 16:00:52 +0530
Subject: [PATCH 13/21] Push down the 'external-link' icon

---
 src/components/MetaSearch/MetaSourceList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MetaSearch/MetaSourceList.vue b/src/components/MetaSearch/MetaSourceList.vue
index 192df363b2..69dcd697d1 100644
--- a/src/components/MetaSearch/MetaSourceList.vue
+++ b/src/components/MetaSearch/MetaSourceList.vue
@@ -9,7 +9,7 @@
           class="button small mr-2 is-opaque"
         >
           {{ source }}
-          <sup class="">
+          <sup class="top-0">
             <i class="ml-2 icon external-link" />
           </sup>
         </a>

From 98577c9f88b2bfe4464e3b00c671b3d40fc504ba Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 16:02:34 +0530
Subject: [PATCH 14/21] Force zero margin where `m-0` has equal specificity
 with `columns`

---
 src/components/ImageDetails/PhotoDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index ba4c0d7d8f..78db849f98 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="photo columns is-desktop m-0 pb-16">
+  <div class="photo columns is-desktop pb-16" :style="{ margin: 0 }">
     <div class="column is-three-fifths photo_image-ctr mt-4">
       <a
         v-if="shouldShowBreadcrumb"

From 8001995007800acfb35e7b1d0ecbcd478826740d Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 16:07:27 +0530
Subject: [PATCH 15/21] Replace usages of the `has-color-*` helper

---
 src/components/AppModal.vue                  | 6 +-----
 src/components/EmbeddedNavSection.vue        | 2 +-
 src/components/Filters/FiltersList.vue       | 7 +++----
 src/components/ImageDetails/PhotoDetails.vue | 2 +-
 src/components/NavSection.vue                | 2 +-
 src/components/SaferBrowsing.vue             | 2 +-
 6 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/AppModal.vue b/src/components/AppModal.vue
index fc37f1370b..3715314879 100644
--- a/src/components/AppModal.vue
+++ b/src/components/AppModal.vue
@@ -9,7 +9,7 @@
           </slot>
           <button
             type="button"
-            class="close-button has-color-gray text-lgr desk:text-base"
+            class="close-button text-gray text-lgr desk:text-base"
             :aria-label="$t('browse-page.aria.close')"
             @click="$emit('close')"
             @keypress.enter="$emit('close')"
@@ -81,10 +81,6 @@ export default {
   background: #00000094;
 }
 
-.has-color-gray {
-  color: rgb(176, 176, 176);
-}
-
 .modal-header {
   display: flex;
   justify-content: space-around;
diff --git a/src/components/EmbeddedNavSection.vue b/src/components/EmbeddedNavSection.vue
index 7885a209b9..4bc2a7177e 100644
--- a/src/components/EmbeddedNavSection.vue
+++ b/src/components/EmbeddedNavSection.vue
@@ -9,7 +9,7 @@
         height="24"
       />
     </NuxtLink>
-    <div class="navbar-brand has-color-white">
+    <div class="navbar-brand text-white">
       <a
         role="button"
         :class="{ ['navbar-burger']: true, ['is-active']: isBurgerMenuActive }"
diff --git a/src/components/Filters/FiltersList.vue b/src/components/Filters/FiltersList.vue
index a1d2ddc0a9..b2513d5526 100644
--- a/src/components/Filters/FiltersList.vue
+++ b/src/components/Filters/FiltersList.vue
@@ -11,10 +11,9 @@
         @click="onToggleSearchGridFilter()"
         @keyup.enter="onToggleSearchGridFilter()"
       >
-        <span
-          class="has-color-transition-blue hidden desk:block text-sm lowercase"
-          >{{ $t('filter-list.hide') }}</span
-        >
+        <span class="text-trans-blue hidden desk:block text-sm lowercase">{{
+          $t('filter-list.hide')
+        }}</span>
         <span class="mr-4 text-lg desk:hidden">
           <i class="icon cross" />
         </span>
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index 78db849f98..009150b574 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -34,7 +34,7 @@
           @click.prevent="toggleReportFormVisibility"
           @keypress.enter.prevent="toggleReportFormVisibility"
         >
-          <span class="has-color-transition-blue ml-2 text-sm">
+          <span class="text-trans-blue ml-2 text-sm">
             <i class="icon flag mr-2" />
             {{ $t('photo-details.content-report.title') }}
           </span>
diff --git a/src/components/NavSection.vue b/src/components/NavSection.vue
index c7501a1462..b87a173b1b 100644
--- a/src/components/NavSection.vue
+++ b/src/components/NavSection.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :aria-label="$t('header.aria.primary')" class="navbar">
-    <div class="navbar-brand has-color-white">
+    <div class="navbar-brand text-white">
       <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
       <NuxtLink class="logo" :to="localePath('/')">
         <img
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
index 18a3f94406..58ecac9b16 100644
--- a/src/components/SaferBrowsing.vue
+++ b/src/components/SaferBrowsing.vue
@@ -5,7 +5,7 @@
       @keypress.enter="toggleShowForm"
       @click="toggleShowForm"
     >
-      <span class="has-color-transition-blue" style="white-space: nowrap">
+      <span class="text-trans-blue" style="white-space: nowrap">
         {{ $t('browse-page.safer-browsing.title') }}
         <i class="icon flag ml-2" />
       </span>

From 655505b41f2d5cc5379063c8fdbf411852f44bf0 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 16:10:09 +0530
Subject: [PATCH 16/21] Remove redundant `is-color-*` helper

---
 src/components/FooterSection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index 53c041098c..14bcf8f538 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -44,8 +44,8 @@
               </template>
             </i18n>
             <div class="mt-1">
-              <i class="icon cc-logo mr-2 text-lgr is-color-white" />
-              <i class="icon cc-by mr-2 text-lgr is-color-white" />
+              <i class="icon cc-logo mr-2 text-lgr" />
+              <i class="icon cc-by mr-2 text-lgr" />
             </div>
           </div>
         </div>

From 83a55a497e16faeb21224e744970f34a9aefe0e5 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 23:26:24 +0530
Subject: [PATCH 17/21] Add a spacing token for `7.50rem`

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index 700ae4b90a..54ea150346 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,6 +45,7 @@ module.exports = {
       12: '3.00rem',
       16: '4.00rem',
       24: '6.00rem',
+      30: '7.50rem',
     },
     fontSize: {
       // Body

From 781203c2d4ce47ddaff6648bc4607a75bef35927 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Wed, 28 Jul 2021 23:27:00 +0530
Subject: [PATCH 18/21] Massively reduce code with Tailwind utilities

---
 src/pages/extension.vue | 188 +++++++++++++++-------------------------
 1 file changed, 68 insertions(+), 120 deletions(-)

diff --git a/src/pages/extension.vue b/src/pages/extension.vue
index 0e91b50744..7416a32469 100644
--- a/src/pages/extension.vue
+++ b/src/pages/extension.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="hero-section">
-      <div :class="['container', isEmbedded ? '' : 'is-fluid']">
-        <div class="intro">
-          <h2 class="title is-2 margin-bottom-large">
+    <div class="hero-section border-b">
+      <div class="container pt-16" :class="[isEmbedded ? '' : 'is-fluid']">
+        <div class="intro text-center mx-auto">
+          <h2 class="title is-2 mb-10">
             {{ $t('extension.description.intro') }}
           </h2>
         </div>
@@ -11,7 +11,7 @@
         <!-- eslint-disable vuejs-accessibility/media-has-caption -->
         <video
           ref="heroVid"
-          class="screenshot"
+          class="screenshot block w-full mx-auto"
           autoplay
           loop
           muted
@@ -25,55 +25,42 @@
         <!-- eslint-enable vuejs-accessibility/media-has-caption -->
       </div>
     </div>
-    <div :class="['features', isEmbedded ? '' : 'is-fluid']">
-      <figure>
-        <img
-          class="screenshot"
-          src="~/assets/screenshots/extension_feat_1.png"
-          alt="WIP"
-        />
-      </figure>
-      <div class="description">
-        <h2>{{ $t('extension.features.search.heading') }}</h2>
-        <p class="margin-top-normal">
-          {{ $t('extension.features.search.content') }}
-        </p>
-      </div>
-
-      <div class="description reversed">
-        <h2>{{ $t('extension.features.bookmark.heading') }}</h2>
-        <p class="margin-top-normal">
-          {{ $t('extension.features.bookmark.content') }}
-        </p>
-      </div>
-      <figure>
-        <img
-          class="screenshot reversed"
-          src="~/assets/screenshots/extension_feat_2.png"
-          alt="WIP"
-        />
-      </figure>
-
-      <figure>
-        <img
-          class="screenshot"
-          src="~/assets/screenshots/extension_feat_3.png"
-          alt="WIP"
-        />
-      </figure>
-      <div class="description">
-        <h2>{{ $t('extension.features.use.heading') }}</h2>
-        <p class="margin-top-normal">
-          {{ $t('extension.features.use.content') }}
-        </p>
-      </div>
+    <div
+      class="features grid grid-cols-1 tab:grid-cols-2 gap-x-12 gap-y-30 py-30 mx-auto"
+      :class="[isEmbedded ? '' : 'is-fluid']"
+    >
+      <template v-for="(feature, index) in features">
+        <figure
+          :key="`figure-${index}`"
+          :data-index="index"
+          class="flex flex-col justify-center items-center"
+          :style="{ '--cell-idx': index * 2 }"
+        >
+          <img
+            class="screenshot w-full rounded border"
+            :src="feature.image"
+            :alt="$t(`extension.features.${feature.key}.heading`)"
+          />
+        </figure>
+        <div
+          :key="`description-${index}`"
+          :data-index="index"
+          class="description flex flex-col justify-center items-center"
+          :style="{ '--cell-idx': index * 2 + 1 }"
+        >
+          <h2>{{ $t(`extension.features.${feature.key}.heading`) }}</h2>
+          <p class="mt-4">
+            {{ $t(`extension.features.${feature.key}.content`) }}
+          </p>
+        </div>
+      </template>
     </div>
     <div class="section">
       <div
-        class="container conclusion margin-bottom-xxl"
+        class="container conclusion mb-24"
         :class="[isEmbedded ? '' : 'is-fluid']"
       >
-        <h2>{{ $t('extension.conclusion') }}</h2>
+        <h2 class="text-center mx-auto">{{ $t('extension.conclusion') }}</h2>
         <ExtensionBrowsers class="margin-top-large" />
       </div>
     </div>
@@ -86,6 +73,10 @@ import iframeHeight from '~/mixins/iframeHeight'
 
 import ExtensionBrowsers from '~/components/ExtensionBrowsers.vue'
 
+import feature1 from '~/assets/screenshots/extension_feat_1.png'
+import feature2 from '~/assets/screenshots/extension_feat_2.png'
+import feature3 from '~/assets/screenshots/extension_feat_3.png'
+
 const AboutPage = {
   name: 'about-page',
   components: { ExtensionBrowsers },
@@ -96,7 +87,13 @@ const AboutPage = {
       : 'with-nav-search'
   },
   data() {
+    const features = [
+      { key: 'search', image: feature1 },
+      { key: 'bookmark', image: feature2 },
+      { key: 'use', image: feature3 },
+    ]
     return {
+      features,
       isPlaying: true,
     }
   },
@@ -124,118 +121,69 @@ $video-actual-width: 1140px; // Video has internal padding
 
 .hero-section {
   background-color: $color-wp-gray-0;
-  border-bottom: 1px solid $color-transition-gray;
+  border-color: $color-transition-gray;
 
   .container {
-    padding-top: 64px;
-
     .intro {
-      text-align: center;
       max-width: 880px;
-      margin: auto;
     }
 
     .screenshot {
-      display: block;
-
-      width: 100%;
       max-width: $video-max-width;
-      margin: auto;
-
-      border-radius: 0.5rem 0.5rem 0 0;
     }
   }
 }
 
 .features {
-  display: grid;
-  grid-template-columns: 1fr;
-  @include from($tablet) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  column-gap: 3rem;
-  row-gap: 7.5em;
-
-  padding-top: 7.5em;
-  padding-bottom: 7.5em;
-
   max-width: $video-actual-width;
-  margin: auto;
 
-  figure {
-    img {
-      border-radius: 0.25rem;
-
-      border: 1px solid rgba(30, 30, 30, 0.2);
-      filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1))
-        drop-shadow(0px 20px 33px rgba(0, 0, 0, 0.07));
-
-      width: 100%;
-      max-width: 30rem;
-    }
+  figure,
+  .description {
+    order: var(--cell-idx);
+    @apply text-center;
 
     @include from($tablet) {
       &:nth-of-type(odd) {
-        text-align: left;
+        @apply text-left items-start;
       }
 
       &:nth-of-type(even) {
-        text-align: right;
+        @apply text-right items-end;
       }
     }
   }
 
-  .description {
-    display: flex;
-    flex-direction: column;
-
-    align-items: center;
-    justify-content: center;
+  figure {
+    img {
+      border-color: rgba(30, 30, 30, 0.2);
+      filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1))
+        drop-shadow(0px 20px 33px rgba(0, 0, 0, 0.07));
+      max-width: 30rem;
+    }
+  }
 
+  .description {
     h2,
     p {
-      text-align: center;
       max-width: 30rem;
     }
-
-    @include from($tablet) {
-      &:nth-of-type(odd) {
-        align-items: flex-start;
-
-        h2,
-        p {
-          text-align: left;
-        }
-      }
-
-      &:nth-of-type(even) {
-        align-items: flex-end;
-
-        h2,
-        p {
-          text-align: right;
-        }
-      }
-    }
   }
 
-  @include mobile() {
-    img.reversed {
-      order: 3;
+  @include from($tablet) {
+    // Rearrange middle row on two column layouts for zig-zag appearance
+    figure[data-index='1'] {
+      order: 4;
     }
 
-    .description.reversed {
-      order: 4;
+    .description[data-index='1'] {
+      order: 3;
     }
   }
 }
 
 .conclusion {
   h2 {
-    text-align: center;
-
     max-width: 40rem;
-    margin: auto;
   }
 }
 </style>

From 864fa1bc68868563f1f1cb239d271fcc43a21f8d Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Fri, 30 Jul 2021 12:30:33 +0530
Subject: [PATCH 19/21] Fix leftover margin helpers

---
 src/components/ExtensionBrowsers.vue | 8 ++------
 src/pages/extension.vue              | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/ExtensionBrowsers.vue b/src/components/ExtensionBrowsers.vue
index caa783b52b..1ce3a849b8 100644
--- a/src/components/ExtensionBrowsers.vue
+++ b/src/components/ExtensionBrowsers.vue
@@ -5,14 +5,10 @@
         target="_blank"
         rel="nofollow noreferrer"
         :href="browser.extUrl"
-        class="browser-button button small margin-right-small is-opaque"
+        class="browser-button button small mr-2 is-opaque"
       >
         {{ $t(`browsers.${key}`) }}
-        <img
-          class="margin-left-small"
-          :src="browser.logo"
-          :alt="$t(`browsers.${key}`)"
-        />
+        <img class="ml-2" :src="browser.logo" :alt="$t(`browsers.${key}`)" />
       </a>
     </li>
   </ul>
diff --git a/src/pages/extension.vue b/src/pages/extension.vue
index 7416a32469..859e1602c5 100644
--- a/src/pages/extension.vue
+++ b/src/pages/extension.vue
@@ -61,7 +61,7 @@
         :class="[isEmbedded ? '' : 'is-fluid']"
       >
         <h2 class="text-center mx-auto">{{ $t('extension.conclusion') }}</h2>
-        <ExtensionBrowsers class="margin-top-large" />
+        <ExtensionBrowsers class="mt-6" />
       </div>
     </div>
   </div>

From 66506ad75efd964fb5f20f4d9ae2e15d43db47cc Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Fri, 30 Jul 2021 12:31:05 +0530
Subject: [PATCH 20/21] Replace Bulma `monospace` with Tailwind `font-mono`

---
 src/components/ImageDetails/CopyLicense.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImageDetails/CopyLicense.vue b/src/components/ImageDetails/CopyLicense.vue
index 608d1628c8..e9cb0cbe9f 100644
--- a/src/components/ImageDetails/CopyLicense.vue
+++ b/src/components/ImageDetails/CopyLicense.vue
@@ -121,7 +121,7 @@
         <label for="attribution-html">
           <textarea
             id="attribution-html"
-            class="textarea monospace p-0"
+            class="textarea font-mono p-0"
             :value="attributionHtml"
             cols="30"
             rows="4"

From 6b22edf5b79684d98081148098c69a30ad0398bf Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Fri, 30 Jul 2021 15:34:57 +0530
Subject: [PATCH 21/21] Remove usage of `is-*` and make headers consistently
 sized

---
 src/components/FooterSection.vue             |  2 +-
 src/components/HeroSection.vue               |  6 +++---
 src/components/ImageDetails/PhotoDetails.vue |  2 +-
 src/pages/about.vue                          |  2 +-
 src/pages/extension.vue                      |  6 ++++--
 src/pages/feedback.vue                       |  2 +-
 src/pages/meta-search.vue                    | 22 ++++++++++----------
 src/pages/search-help.vue                    |  8 +++----
 src/pages/sources.vue                        | 12 ++++-------
 9 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index 14bcf8f538..2ac11c3f7d 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -55,7 +55,7 @@
             :aria-label="$t('footer.aria.donate')"
             class="donate-section"
           >
-            <span class="title is-5 text-white">{{
+            <span class="font-bold text-2xl text-white">{{
               $t('footer.donate.work')
             }}</span>
             <p>{{ $t('footer.donate.help') }}</p>
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 571f555771..6370253e27 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -2,10 +2,10 @@
   <!-- eslint-disable vuejs-accessibility/no-autofocus -->
   <div class="hero">
     <div class="hero-center text-center">
-      <h1 class="title is-2 pb-4">
+      <h1 class="text-5xl pb-4">
         {{ $t('hero.title') }}
       </h1>
-      <h2 class="title is-5 b-header font-medium">
+      <h2 class="text-2xl font-medium">
         {{ $t('hero.subtitle') }}
       </h2>
       <form
@@ -32,7 +32,7 @@
             {{ $t('hero.search.button') }}
           </button>
         </div>
-        <div class="caption mt-6 font-medium">
+        <div class="text-sm mt-6 font-medium">
           <i18n path="hero.caption.content" tag="p">
             <template #link>
               <a
diff --git a/src/components/ImageDetails/PhotoDetails.vue b/src/components/ImageDetails/PhotoDetails.vue
index 009150b574..140f9d4934 100644
--- a/src/components/ImageDetails/PhotoDetails.vue
+++ b/src/components/ImageDetails/PhotoDetails.vue
@@ -54,7 +54,7 @@
       class="column image-info ml-12"
     >
       <div class="my-4">
-        <h1 class="title is-5 b-header">
+        <h1 class="text-2xl">
           {{ image.title }}
         </h1>
         <i18n
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 1d9fce7292..d155f4e843 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -2,7 +2,7 @@
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div>
-        <h1 class="title is-2 mb-10">
+        <h1 class="text-5xl mb-10">
           {{ $t('about.title') }}
         </h1>
         <div class="content">
diff --git a/src/pages/extension.vue b/src/pages/extension.vue
index 859e1602c5..f5a30c64ca 100644
--- a/src/pages/extension.vue
+++ b/src/pages/extension.vue
@@ -3,7 +3,7 @@
     <div class="hero-section border-b">
       <div class="container pt-16" :class="[isEmbedded ? '' : 'is-fluid']">
         <div class="intro text-center mx-auto">
-          <h2 class="title is-2 mb-10">
+          <h2 class="text-5xl mb-10">
             {{ $t('extension.description.intro') }}
           </h2>
         </div>
@@ -48,7 +48,9 @@
           class="description flex flex-col justify-center items-center"
           :style="{ '--cell-idx': index * 2 + 1 }"
         >
-          <h2>{{ $t(`extension.features.${feature.key}.heading`) }}</h2>
+          <h2 class="text-5xl">
+            {{ $t(`extension.features.${feature.key}.heading`) }}
+          </h2>
           <p class="mt-4">
             {{ $t(`extension.features.${feature.key}.content`) }}
           </p>
diff --git a/src/pages/feedback.vue b/src/pages/feedback.vue
index e2ab573602..4004c703df 100644
--- a/src/pages/feedback.vue
+++ b/src/pages/feedback.vue
@@ -2,7 +2,7 @@
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="pb-6">
-        <h1 id="feedback" class="title is-2 mb-10">
+        <h1 id="feedback" class="text-5xl mb-10">
           {{ $t('feedback.title') }}
         </h1>
         <i18n path="feedback.description.content" tag="p" class="mb-6">
diff --git a/src/pages/meta-search.vue b/src/pages/meta-search.vue
index 9c7df21cde..fba7021ef6 100644
--- a/src/pages/meta-search.vue
+++ b/src/pages/meta-search.vue
@@ -2,7 +2,7 @@
   <div class="section mb-10">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="mb-10">
-        <h1 class="title is-2">
+        <h1 class="text-5xl">
           {{ $t('meta-search-page.title') }}
         </h1>
       </div>
@@ -15,13 +15,13 @@
         </template>
       </i18n>
       <p>{{ $t('meta-search-page.license') }}</p>
-      <h4 class="b-header">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.content') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.content-types') }}</p>
-      <h4 class="b-header">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.images.title') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.images.content') }}</p>
       <div class="content">
         <ol>
@@ -44,9 +44,9 @@
           alt="Meta Search Images - Cars"
         />
       </figure>
-      <h4 class="b-header mt-10">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.audio-video.title') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.audio-video.content') }}</p>
       <i18n path="meta-search-page.audio-video.filter" tag="p" class="my-2">
         <template #use>
@@ -59,9 +59,9 @@
           alt="Meta Search Audio - Drums"
         />
       </figure>
-      <h4 class="b-header mt-10">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.new.title') }}
-      </h4>
+      </h2>
       <i18n path="meta-search-page.new.content" tag="p" class="mb-2">
         <template #issue>
           <a
@@ -78,9 +78,9 @@
           >
         </template>
       </i18n>
-      <h4 class="b-header mt-10">
+      <h2 class="mt-10 mb-4 text-2xl">
         {{ $t('meta-search-page.why.title') }}
-      </h4>
+      </h2>
       <p>{{ $t('meta-search-page.why.content') }}</p>
       <figure class="image my-10">
         <img
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index fd5270bba2..112b301b4d 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -2,14 +2,14 @@
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="mb-10">
-        <h1 class="title is-2">
+        <h1 class="text-5xl">
           {{ $t('search-guide.title') }}
         </h1>
         <p>
           {{ $t('search-guide.intro') }}
         </p>
 
-        <h2 class="mt-10 title is-3">
+        <h2 class="mt-10 text-2xl mb-4">
           {{ $t('search-guide.exact.title') }}
         </h2>
         <i18n path="search-guide.exact.content" tag="p">
@@ -25,9 +25,9 @@
           </template>
         </i18n>
 
-        <h3 class="my-4">
+        <h2 class="my-4 text-2xl">
           {{ $t('search-guide.combine.title') }}
-        </h3>
+        </h2>
 
         <p class="my-4">
           {{ $t('search-guide.combine.description') }}
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index 14dfb6d817..f995a3ab17 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -2,11 +2,11 @@
   <div class="section">
     <div :class="['container', isEmbedded ? '' : 'is-fluid']">
       <div class="mb-10">
-        <h1 class="title is-2 mb-10">
+        <h1 class="text-5xl mb-10">
           {{ $t('sources.title') }}
         </h1>
         <div class="mb-10">
-          <h3 class="title subtitle is-normal is-3">
+          <h3 class="text-2xl">
             {{ $t('sources.cc-content.where') }}
           </h3>
           <p class="my-4">
@@ -40,7 +40,7 @@
           </i18n>
         </div>
         <div class="mb-10">
-          <h3 class="title subtitle is-normal is-3">
+          <h3 class="text-2xl">
             {{ $t('sources.new-content.next') }}
           </h3>
           <p class="my-4">
@@ -61,7 +61,7 @@
           </div>
         </div>
 
-        <h3 class="title subtitle is-3 my-4">
+        <h3 class="text-2xl my-4">
           {{ $t('sources.suggestions') }}
         </h3>
         <a
@@ -192,10 +192,6 @@ export default SourcePage
 $table-border: 1px solid $color-light-gray;
 $table-border-radius: 4px;
 
-.title.is-3 {
-  font-size: 1.1875rem;
-}
-
 .button.is-primary {
   font-size: 1.1875rem;
   font-weight: 700;