SC/Refactor: rw MulitMapLink & associated buttons (#2663)

# Description and Motivation
- replace scss module styles with Tailwind
- replace all @mixin `buttonThatLooksLikeLink()` styled buttons with
same Tailwind class
- remove scss modules
- closes #2507 

## Has this been tested? How?
- static, unit, e2e-local tests all pass

## Screenshots (if appropriate)

## Types of changes

***Refactor / chore***

## New frontend preview link is below in the Netlify comment 😎

frontend/src/cards/ui/MultiMapLink.tsx

@@ -2,7 +2,6 @@ import {
   type DemographicType,
   DEMOGRAPHIC_DISPLAY_TYPES_LOWER_CASE,
 } from '../../data/query/Breakdowns'
-import styles from './MultiMapLink.module.scss'
 
 /*
 Generates the "COMPARES ACROSS GROUPS" button which opens the small multiples modal
@@ -21,7 +20,7 @@ export function MultiMapLink(props: MultiMapLinkProps) {
         onClick={() => {
           props.setMultimapOpen(true)
         }}
-        className={styles.CompareAcrossLink}
+        className='cursor-pointer border-0 bg-transparent p-0 text-alt-green underline'
         aria-label={
           'Open modal to Compare ' +
           props.currentDataType +

frontend/src/cards/ui/UnknownBubblesAlert.tsx

@@ -1,4 +1,3 @@
-import styles from './UnknownBubblesAlert.module.scss'
 import {
   type DemographicType,
   DEMOGRAPHIC_DISPLAY_TYPES_LOWER_CASE,
@@ -33,7 +32,7 @@ export default function UnknownBubblesAlert(props: UnknownBubblesAlertProps) {
       )}{' '}
       <button
         onClick={changeUnknownState}
-        className={styles.UnknownBubblesLink}
+        className='cursor-pointer border-0 bg-transparent p-0 text-alt-green underline'
         aria-label={
           'View the share of ' +
           props.fullDisplayName +

frontend/src/pages/ExploreData/MadLibUI.module.scss

@@ -54,11 +54,6 @@
   font-style: italic;
 }
 
-.UsaButton {
-  @include buttonThatLooksLikeLink();
-  font-style: italic;
-}
-
 .TopicOrLocationSelectorPopover {
   padding: 20px;
 }

frontend/src/pages/ExploreData/TopicOrLocationSelector.tsx

@@ -177,7 +177,7 @@ export default function TopicOrLocationSelector(
                   USA_DISPLAY_NAME
                 ) : (
                   <button
-                    className={styles.UsaButton}
+                    className='cursor-pointer border-0 bg-transparent p-0 italic text-alt-green underline'
                     onClick={handleUsaButton}
                   >
                     United States

frontend/src/styles/globals.scss

@@ -9,15 +9,6 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
 
-@mixin buttonThatLooksLikeLink {
-  text-decoration: underline;
-  background: none !important;
-  border: none !important;
-  padding: 0px;
-  color: $alt-green;
-  cursor: pointer;
-}
-
 // Font Family+Weight Options
 @mixin dmSans400 {
   font-family: 'DM Sans', sans-serif !important;

frontend/tailwind.config.ts

@@ -18,18 +18,17 @@ export default {
     maxHeight: standardSizes,
     maxWidth: standardSizes,
     borderRadius: {
-      sm: '4px',
-      md: '8px',
-      lg: '16px',
-      xl: '30px',
+      'sm': '4px',
+      'md': '8px',
+      'lg': '16px',
+      'xl': '30px',
       '2xl': '40px',
     },
     boxShadow: {
-      raised:
+      'raised':
         'rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px',
       'raised-tighter':
         'rgba(0, 0, 0, 0.1) 0px 3px 3px -2px, rgba(0, 0, 0, 0.08) 0px 6px 7px 0px, rgba(0, 0, 0, 0.06) 0px 2px 9px 1px',
-
     },
     colors: {
       'alert-color': 'rgb(var(--alert-color) / <alpha-value>)',
@@ -101,6 +100,7 @@ export default {
       'time-purple': 'rgb(var(--time-purple) / <alpha-value>)',
       'time-yellow': 'rgb(var(--time-yellow) / <alpha-value>)',
       'toggle-color': 'rgb(var(--toggle-color) / <alpha-value>)',
+      'transparent': '#00000000',
       'unknown-map-even-more':
         'rgb(var(--unknown-map-even-more) / <alpha-value>)',
       'unknown-map-least': 'rgb(var(--unknown-map-least) / <alpha-value>)',
@@ -128,7 +128,7 @@ export default {
       sansTitle: ['DM Sans', 'sans-serif'],
       sansText: ['Inter', 'sans-serif'],
       serif: ['Taviraj', 'serif'],
-      math: ['KaTeX_Math', 'mono']
+      math: ['KaTeX_Math', 'mono'],
     },
     fontSize: {
       smallest: '0.75rem',
@@ -146,18 +146,18 @@ export default {
       biggestHeader: '4rem',
     },
     zIndex: {
-      "z-bottom": 'var(--z-bottom)',
-      "z-middle": 'var(--z-middle)',
-      "z-almost-top": 'var(--z-almost-top)',
-      "z-top": 'var(--z-top)',
+      'z-bottom': 'var(--z-bottom)',
+      'z-middle': 'var(--z-middle)',
+      'z-almost-top': 'var(--z-almost-top)',
+      'z-top': 'var(--z-top)',
     },
     extend: {
       maxHeight: {
-        aimToGo: "255px",
+        aimToGo: '255px',
       },
       maxWidth: {
-        aimToGo: "255px",
-        menu: "320px",
+        aimToGo: '255px',
+        menu: '320px',
         articleLogo: '700px',
         teamHeadshot: '181px',
         teamLogo: '250px',
@@ -167,26 +167,25 @@ export default {
         helperBox: '1200px',
       },
       minHeight: {
-        "preload-article": '750px',
+        'preload-article': '750px',
       },
       height: {
         littleHetLogo: '30px',
         joinEffortLogo: '720px',
       },
       width: {
-        littleHetLogo: '30px',
-        joinEffortLogo: '600px',
-        '90p': '90%'
+        'littleHetLogo': '30px',
+        'joinEffortLogo': '600px',
+        '90p': '90%',
       },
       padding: {
         '1p': '1%',
         '15p': '15%',
-
-      }
+      },
     },
   },
   plugins: [],
   corePlugins: {
     preflight: false,
-  }
+  },
 } satisfies Config