Update tailwind config

src/assets/scss/main.scss

@@ -73,6 +73,7 @@ body {
   padding-top: 60px;
 }
 
+
 .act-link {
   @apply bg-gray-300;
 }
@@ -197,11 +198,11 @@ button:focus {
   
 }
 
-text-6xl {
+.text-6xl {
   font-family: "Roboto", sans-serif !important;
 }
 
-text-5xl {
+.text-5xl {
   font-family: "Roboto", sans-serif !important;
 }
 

src/components/custom/NewsFilterHeader.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="top-16 left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
     <header
-      class="flex items-center justify-between flex-wrap container mx-auto px-4 py-1 sm:px-0 transition-all transition-500"
+      class="
+        flex
+        items-center
+        justify-between
+        flex-wrap
+        container
+        mx-auto
+        px-4
+        py-1
+        sm:px-0
+        transition-all transition-500
+      "
     >
       <div class="flex items-center justify-between px-4 py-2 sm:p-0">
         <div class="sm:hidden ml-auto">
@@ -40,14 +51,29 @@
         class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0"
       >
         <ul
-          class="list-none sm:flex justify-left capitalize transition-all transition-500"
+          class="
+            list-none
+            sm:flex
+            justify-left
+            capitalize
+            transition-all transition-500
+          "
         >
           <!-- Topics -->
           <li class="py-1 mx-5">
             <div class="relative" x-data="{ open: false }">
               <button
                 @click="setActive(0)"
-                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+                class="
+                  flex flex-row
+                  items-center
+                  w-full
+                  md:w-auto
+                  md:inline
+                  md:mt-0
+                  md:ml-4
+                  animated-link
+                "
               >
                 <span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
                 <svg
@@ -57,7 +83,17 @@
                     'rotate-180': active == 0,
                     'rotate-0': !active == 0,
                   }"
-                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+                  class="
+                    inline
+                    w-4
+                    h-4
+                    mt-1
+                    ml-1
+                    transition-transform
+                    duration-200
+                    transform
+                    md:-mt-1
+                  "
                 >
                   <path
                     fill-rule="evenodd"
@@ -75,11 +111,28 @@
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
-                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+                class="
+                  absolute
+                  w-full
+                  mt-2
+                  origin-top-right
+                  rounded-md
+                  shadow-lg
+                  md:w-48
+                  z-30
+                "
               >
                 <div
                   v-if="open"
-                  class="w-64 max-h-10 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
+                  class="
+                    w-64
+                    px-2
+                    py-2
+                    bg-white
+                    rounded-md
+                    shadow
+                    dark:bg-gray-700
+                  "
                 >
                   <a
                     v-for="topic in topics"
@@ -88,7 +141,30 @@
                       setTopic(topic);
                       open = false;
                     "
-                    class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                    class="
+                      cursor-pointer
+                      block
+                      px-4
+                      py-2
+                      mt-2
+                      text-sm
+                      font-semibold
+                      bg-transparent
+                      rounded-lg
+                      dark:bg-transparent
+                      dark:hover:bg-gray-600
+                      dark-:focus:bg-gray-600
+                      dark:focus:text-white
+                      dark:hover:text-white
+                      dark:text-gray-200
+                      md:mt-0
+                      hover:text-gray-900
+                      focus:text-gray-900
+                      hover:bg-gray-200
+                      focus:bg-gray-200
+                      focus:outline-none
+                      focus:shadow-outline
+                    "
                     >{{ topic.replace(/_/g, " ") }}</a
                   >
                 </div>
@@ -101,7 +177,16 @@
             <div class="relative" x-data="{ open: false }">
               <button
                 @click="setActive(1)"
-                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+                class="
+                  flex flex-row
+                  items-center
+                  w-full
+                  md:w-auto
+                  md:inline
+                  md:mt-0
+                  md:ml-4
+                  animated-link
+                "
               >
                 <span class="capitalize">{{ year }}</span>
                 <svg
@@ -111,7 +196,17 @@
                     'rotate-180': active == 1,
                     'rotate-0': !active == 1,
                   }"
-                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+                  class="
+                    inline
+                    w-4
+                    h-4
+                    mt-1
+                    ml-1
+                    transition-transform
+                    duration-200
+                    transform
+                    md:-mt-1
+                  "
                 >
                   <path
                     fill-rule="evenodd"
@@ -129,16 +224,56 @@
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
-                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+                class="
+                  absolute
+                  w-full
+                  mt-2
+                  origin-top-right
+                  rounded-md
+                  shadow-lg
+                  md:w-48
+                  z-30
+                "
               >
                 <div
                   v-if="open"
-                  class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
+                  class="
+                    w-64
+                    px-2
+                    py-2
+                    bg-white
+                    rounded-md
+                    shadow
+                    dark:bg-gray-700
+                  "
                 >
                   <a
                     v-for="year in years"
                     :key="year"
-                    class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                    class="
+                      cursor-pointer
+                      block
+                      px-4
+                      py-2
+                      mt-2
+                      text-sm
+                      font-semibold
+                      bg-transparent
+                      rounded-lg
+                      dark:bg-transparent
+                      dark:hover:bg-gray-600
+                      dark-:focus:bg-gray-600
+                      dark:focus:text-white
+                      dark:hover:text-white
+                      dark:text-gray-200
+                      md:mt-0
+                      hover:text-gray-900
+                      focus:text-gray-900
+                      hover:bg-gray-200
+                      focus:bg-gray-200
+                      focus:outline-none
+                      focus:shadow-outline
+                    "
                     @click.self="
                       setYear(year);
                       open = false;
@@ -155,7 +290,16 @@
             <div class="relative" x-data="{ open: false }">
               <button
                 @click="setActive(2)"
-                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+                class="
+                  flex flex-row
+                  items-center
+                  w-full
+                  md:w-auto
+                  md:inline
+                  md:mt-0
+                  md:ml-4
+                  animated-link
+                "
               >
                 <span class="capitalize">{{ month }}</span>
                 <svg
@@ -165,7 +309,17 @@
                     'rotate-180': active == 2,
                     'rotate-0': !active == 2,
                   }"
-                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+                  class="
+                    inline
+                    w-4
+                    h-4
+                    mt-1
+                    ml-1
+                    transition-transform
+                    duration-200
+                    transform
+                    md:-mt-1
+                  "
                 >
                   <path
                     fill-rule="evenodd"
@@ -183,16 +337,58 @@
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
-                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+                class="
+                  absolute
+                  w-full
+                  mt-2
+                  origin-top-right
+                  rounded-md
+                  shadow-lg
+                  md:w-48
+                  z-30
+                "
               >
                 <div
                   v-if="open"
-                  class="w-64 overflow-y-auto h-40 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
+                  class="
+                    w-64
+                    overflow-y-auto
+                    h-40
+                    px-2
+                    py-2
+                    bg-white
+                    rounded-md
+                    shadow
+                    dark:bg-gray-700
+                  "
                 >
                   <a
                     v-for="month in months"
                     :key="month"
-                    class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                    class="
+                      cursor-pointer
+                      block
+                      px-4
+                      py-2
+                      mt-2
+                      text-sm
+                      font-semibold
+                      bg-transparent
+                      rounded-lg
+                      dark:bg-transparent
+                      dark:hover:bg-gray-600
+                      dark-:focus:bg-gray-600
+                      dark:focus:text-white
+                      dark:hover:text-white
+                      dark:text-gray-200
+                      md:mt-0
+                      hover:text-gray-900
+                      focus:text-gray-900
+                      hover:bg-gray-200
+                      focus:bg-gray-200
+                      focus:outline-none
+                      focus:shadow-outline
+                    "
                     @click.self="
                       setMonth(month);
                       open = false;

src/components/custom/TagFilterHeader.vue

@@ -117,7 +117,6 @@
                   v-if="open"
                   class="
                     w-64
-                    max-h-10
                     px-2
                     py-2
                     bg-white

src/components/marketing/sections/blog-sections/3_column_cards.vue

@@ -1,17 +1,5 @@
 <template>
-  <div
+  <div class="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
-    class="
-      relative
-      bg-gray-50
-      pt-16
-      pb-20
-      px-4
-      sm:px-6
-      lg:pt-24
-      lg:pb-28
-      lg:px-8
-    "
-  >
     <div class="absolute inset-0">
       <div class="bg-white h-1/3 sm:h-2/3"></div>
     </div>

tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
   purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
   theme: {
     borderWidth: {
-      default: '1px',
+      DEFAULT: '1px',
       '0': '0',
       '2': '2px',
       '3': '3px',
@@ -43,16 +43,203 @@ module.exports = {
     corePlugins: {
       container: false
     },
-    extend: {},
+    fontSize: {
+      'xs': '.75rem',
+      'sm': '.875rem',
+      'base': '1rem',
+      'lg': '1.125rem',
+      'xl': '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+      '7xl': '5rem',
+    },
+    colors: {
+      current: "currentColor",
+      transparent: "transparent",
+      white: "#ffffff",
+      black: "#000000",
+      gray: {
+        50: "#f9fafb",
+        100: "#F7FAFC",
+        200: "#EDF2F7",
+        300: "#E2E8F0",
+        400: "#CBD5E0",
+        500: "#A0AEC0",
+        600: "#718096",
+        700: "#4A5568",
+        800: "#2D3748",
+        900: "#1A202C",
+      },
+      red: {
+        50: "#fdf2f2",
+        100: "#FFF5F5",
+        200: "#FED7D7",
+        300: "#FEB2B2",
+        400: "#FC8181",
+        500: "#F56565",
+        600: "#E53E3E",
+        700: "#C53030",
+        800: "#9B2C2C",
+        900: "#742A2A",
+      },
+      orange: {
+        50: "#fff8f1",
+        100: "#feecdc",
+        200: "#fcd9bd",
+        300: "#fdba8c",
+        400: "#ff8a4c",
+        500: "#ff5a1f",
+        600: "#d03801",
+        700: "#b43403",
+        800: "#8a2c0d",
+        900: "#73230d",
+      },
+      yellow: {
+        50: "#fdfdea",
+        100: "#fdf6b2",
+        200: "#fce96a",
+        300: "#faca15",
+        400: "#e3a008",
+        500: "#c27803",
+        600: "#9f580a",
+        700: "#8e4b10",
+        800: "#723b13",
+        900: "#633112",
+      },
+      green: {
+        50: "#f3faf7",
+        100: "#def7ec",
+        200: "#bcf0da",
+        300: "#84e1bc",
+        400: "#31c48d",
+        500: "#0e9f6e",
+        600: "#057a55",
+        700: "#046c4e",
+        800: "#03543f",
+        900: "#014737",
+      },
+      teal: {
+        50: "#edfafa",
+        100: "#E6FFFA",
+        200: "#B2F5EA",
+        300: "#81E6D9",
+        400: "#4FD1C5",
+        500: "#38B2AC",
+        600: "#319795",
+        700: "#2C7A7B",
+        800: "#285E61",
+        900: "#234E52",
+      },
+      blue: {
+        50: "#ebf5ff",
+        100: "#EBF8FF",
+        200: "#BEE3F8",
+        300: "#90CDF4",
+        400: "#63B3ED",
+        500: "#4299E1",
+        600: "#3182CE",
+        700: "#2B6CB0",
+        800: "#2C5282",
+        900: "#2A4365",
+      },
+      indigo: {
+        50: "#f0f5ff",
+        100: "#e5edff",
+        200: "#cddbfe",
+        300: "#b4c6fc",
+        400: "#8da2fb",
+        500: "#6875f5",
+        600: "#5850ec",
+        700: "#5145cd",
+        800: "#42389d",
+        900: "#362f78",
+      },
+      purple: {
+        50: "#f6f5ff",
+        100: "#edebfe",
+        200: "#dcd7fe",
+        300: "#cabffd",
+        400: "#ac94fa",
+        500: "#9061f9",
+        600: "#7e3af2",
+        700: "#6c2bd9",
+        800: "#5521b5",
+        900: "#4a1d96",
+      },
+      pink: {
+        50: "#fdf2f8",
+        100: "#fce8f3",
+        200: "#fad1e8",
+        300: "#f8b4d9",
+        400: "#f17eb8",
+        500: "#e74694",
+        600: "#d61f69",
+        700: "#bf125d",
+        800: "#99154b",
+        900: "#751a3d",
+      },
+    },
+    extend: {
+      backgroundColor: ['group-focus', 'active'],
+      borderColor: ['group-focus'],
+      boxShadow: ['group-focus'],
+      opacity: ['group-focus'],
+      textColor: ['group-focus', 'active'],
+      textDecoration: ['group-focus'],
+      boxShadow: {
+        solid: '0 0 0 2px currentColor',
+        outline: `0 0 0 3px rgba(156, 163, 175, .5)`,
+        'outline-gray': `0 0 0 3px rgba(254, 202, 202, .5)`,
+        'outline-blue': `0 0 0 3px rgba(191, 219, 254, .5)`,
+        'outline-green': `0 0 0 3px rgba(167, 243, 208, .5)`,
+        'outline-yellow': `0 0 0 3px rgba(253, 230, 138, .5)`,
+        'outline-red': `0 0 0 3px rgba(254, 202, 202, .5)`,
+        'outline-pink': `0 0 0 3px rgba(251, 207, 232, .5)`,
+        'outline-purple': `0 0 0 3px rgba(221, 214, 254,, .5)`,
+        'outline-indigo': `0 0 0 3px rgba(199, 210, 254, .5)`,
+      },
+      padding: {
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '2/4': '50%',
+        '3/4': '75%',
+        '1/5': '20%',
+        '2/5': '40%',
+        '3/5': '60%',
+        '4/5': '80%',
+        '1/6': '16.666667%',
+        '2/6': '33.333333%',
+        '3/6': '50%',
+        '4/6': '66.666667%',
+        '5/6': '83.333333%',
+        '1/12': '8.333333%',
+        '2/12': '16.666667%',
+        '3/12': '25%',
+        '4/12': '33.333333%',
+        '5/12': '41.666667%',
+        '6/12': '50%',
+        '7/12': '58.333333%',
+        '8/12': '66.666667%',
+        '9/12': '75%',
+        '10/12': '83.333333%',
+        '11/12': '91.666667%',
+        full: '100%',
+      }
+    },
     radialGradients: {
       shapes: { // defaults to this value
-        'default': 'ellipse',
+        'DEFAULT': 'ellipse',
       },
       sizes: { // defaults to this value
-        'default': '',
+        'DEFAULT': '',
       },
       positions: { // defaults to these values
-        'default': 'center',
+        'DEFAULT': 'center',
         't': 'top'
       },
       colors: { // defaults to {}
@@ -63,7 +250,6 @@ module.exports = {
   variants: {},
   plugins: [
     require('@tailwindcss/aspect-ratio'),
-
     function ({
       addComponents
     }) {