source/js/components/full-calendar/YearCalendar.vue

+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import multiMonthPlugin from "@fullcalendar/multimonth"
+
+import { showEventData } from './utils'
+
+export default {
+    components: {
+        FullCalendar // make the <FullCalendar> tag available
+    },
+    props: ["events"],
+    data() {
+        return {
+            calendarOptions: {
+                plugins: [ dayGridPlugin, multiMonthPlugin ],
+                initialView: "multiMonthYear",
+                contentHeight: "auto",
+                locale: "cs",
+                buttonText: {
+                    today: "dnes"
+                },
+                moreLinkContent: (arg) => { return `+${arg.num} další` },
+                eventClick (info) {
+                    showEventData(info)
+                },
+                events: JSON.parse(this.events)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FullCalendar :options="calendarOptions" />
+</template>

source/js/components/full-calendar/utils.js

+import tippy from 'tippy.js';
+
+
+const showEventData = (info) => {
+    if (
+        info.event.url === ''
+        && info.event.extendedProps.location === undefined
+        && info.event.extendedProps.url === undefined
+    ) {
+        return
+    }
+
+    info.jsEvent.preventDefault();
+
+    const popup = tippy(
+        info.el,
+        {
+            content: `
+                <div class="p-2 flex flex-col gap-3 text-white whitespace-nowrap">
+                    ${
+                        (info.event.title !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <div>${info.event.title}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.extendedProps.location !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--location" aria-label="Místo konání"></i>
+                                <div>${info.event.extendedProps.location}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.extendedProps.description !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--info" aria-label="Popis"></i>
+                                <div>${info.event.extendedProps.description}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.url !== '') ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--link" aria-label="Adresa"></i>
+                                <a class="underline cursor-pointer" href="${info.event.url}">${info.event.url}</a>
+                            </div>
+                        ` : ''
+                    }
+                </div>
+            `,
+            trigger: (
+                (
+                    info.event.url !== ''
+                    && info.event.extendedProps.location === undefined
+                    && info.event.extendedProps.url === undefined
+                ) ?
+                'hover' : 'click'
+            ),
+            allowHTML: true,
+            interactive: true
+        }
+    );
+
+    popup.show();
+} 
+
+export { showEventData }

source/js/apps/navbar/Navbar.vue → source/js/components/navbar/Navbar.vue

 <script>
   import UiNavbarSubitem from "./NavbarSubitem";
-  import tailwindConfig from "../../../../tailwind.config";
-
-  const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10);
+  import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
+  import { isLgScreenSize } from "../../utils";
 
   export default {
     components: {
-      UiNavbarSubitem
+      UiNavbarSubitem,
+      UiNavbarSubitemReplacing,
     },
     data() {
       return {
-        isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+        isLgScreenSize: isLgScreenSize(),
         show: false,
         resizeHandler: () => {
-          this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+          this.$data.isLgScreenSize = isLgScreenSize();
         },
       };
     },
-    methods: {
-      getWindowWidth() {
-        return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-      }
-    },
     mounted() {
       this.$nextTick(() => {
         window.addEventListener("resize", this.$data.resizeHandler);

source/js/apps/navbar/NavbarSubitem.vue → source/js/components/navbar/NavbarSubitem.vue

 <template>
-  <div @mouseenter="show = true" @mouseleave="show = false">
-    <span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
-
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
+    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
     <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
       <slot>
       </slot>
@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { isLgScreenSize } from "../../utils";
+
 export default {
   data() {
     return {
@@ -25,10 +27,23 @@ export default {
     }
   },
   methods: {
-    handleClick() {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
+    handleClick(evt) {
+      // On mobile screens, first click should just toggle and redir on second one
+      if (isLgScreenSize() || this.$data.show) {
         if (this.$props.href) {
           window.location = this.$props.href;
         }
+      }
 
       this.$data.show = !this.$data.show;
     }

source/js/components/navbar/NavbarSubitemReplacing.vue

+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
+    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
+    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
+      <ul class="navbar-menu__submenu">
+        <li v-for="(item, index) in parsedItems" :key="index">
+            <a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLgScreenSize } from "../../utils";
+
+export default {
+  data() {
+    return {
+      show: false,
+      parsedItems: JSON.parse(this.items),
+    };
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    items: {
+      type: String,
+    }
+  },
+  methods: {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
+    handleClick(evt) {
+      // On mobile screens, first click should just toggle and redir on second one
+      if (isLgScreenSize() || this.$data.show) {
+        if (this.$props.href) {
+          window.location = this.$props.href;
+        }
+      }
+
+      this.$data.show = !this.$data.show;
+    }
+  }
+}
+</script>

source/js/main.js

 import Vue from "vue";
 
 import { forEachNode } from "./utils";
-import Apps from "./apps";
+
+import Renderer from "./components/calendar/Renderer";
+import DummyProvider from "./components/calendar/DummyProvider";
+import GoogleProvider from "./components/calendar/GoogleProvider"
+import MonthCalendar from "./components/full-calendar/MonthCalendar";
+import YearCalendar from "./components/full-calendar/YearCalendar";
+import RegionMap from "./components/RegionMap";
+import ViewProvider from "./components/ViewProvider";
+import Navbar from "./components/navbar/Navbar";
+import FooterCollapsible from "./components/footer/FooterCollapsible";
+import FlipClock from "./components/FlipClock";
+
+import Chart from 'chart.js/auto';
+
+
+Vue.component("ui-calendar-renderer", Renderer);
+Vue.component("ui-calendar-dummy-provider", DummyProvider);
+Vue.component("ui-calendar-google-provider", GoogleProvider);
+Vue.component("ui-month-calendar", MonthCalendar);
+Vue.component("ui-year-calendar", YearCalendar);
+Vue.component("ui-region-map", RegionMap);
+Vue.component("ui-view-provider", ViewProvider);
+Vue.component("ui-navbar", Navbar);
+Vue.component("ui-footer-collapsible", FooterCollapsible);
+Vue.component("ui-flip-clock", FlipClock);
+
+
+import UiApp from "./components/UiApp.vue";
+
+
+const appFactory = (el, attrs) => {
+  // Bootstrap Vue.js.
+  new Vue({
+    el,
+    components: {
+      UiApp
+    }
+  });
+};
+
 
 /**
  * Bootstrap Vue.js application at given Element instance.
@@ -14,26 +53,45 @@ import Apps from "./apps";
  */
 function renderVueAppElement(el) {
   const attrs = Object.assign({}, el.dataset);
-
-  if (! attrs.app) {
-    console.warn(el, 'Cannot bootstrap: missing data-app');
-    return;
+  return appFactory(el, attrs);
 }
 
-  const app = Apps[attrs.app];
 
-  if (! app) {
-    console.warn(el, `Cannot bootstrap: unknown app ${attrs.app}`);
-    return;
-  }
+function renderChart(element) {
+  const data = [
+    { year: 2010, count: 10 },
+    { year: 2011, count: 20 },
+    { year: 2012, count: 15 },
+    { year: 2013, count: 25 },
+    { year: 2014, count: 22 },
+    { year: 2015, count: 30 },
+    { year: 2016, count: 28 },
+  ];
 
-  return app(el, attrs);
+  new Chart(
+    element,
+    {
+      type: 'bar',
+      data: {
+        labels: data.map(row => row.year),
+        datasets: [
+          {
+            label: 'Firemní akvizice každý rok',
+            data: data.map(row => row.count)
+          }
+        ]
+      }
+    }
+  );
 }
 
 
 function init(event) {
   // Initialize Vue.js apps.
   forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
+
+  // Show example charts.
+  forEachNode(document.querySelectorAll('.__chart-example'), renderChart);
 }
 
 document.addEventListener('DOMContentLoaded', init);

source/js/utils.js

+import screens from "../../screens";
+
+const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+
 export const forEachNode = function (array, callback, scope) {
   for (var i = 0; i < array.length; i++) {
     callback.call(scope, array[i]); // passes back stuff we need
   }
 };
+
+export function getWindowWidth() {
+  return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
+
+export function isLgScreenSize() {
+  return getWindowWidth() >= lgScreenSize;
+}

tailwind-plugins/buttons.js

+const _ = require('lodash');
+const Color = require('color');
+// const defaultConfig = require('tailwindcss/defaultConfig')();
+
+const darken = (clr, val) => Color(clr).darken(val).rgb().string();
+const lighten = (clr, val) => Color(clr).lighten(val).rgb().string();
+
+function defaultOptions() {
+  return {
+    textAlign: 'center',
+    display: 'inline-block',
+    fontWeight: '400',
+    maxWidth: '20rem',
+    colors: {},
+  }
+}
+
+module.exports = function (options) {
+  options = _.isFunction(options)
+    ? options(defaultOptions())
+    : _.defaults(options, defaultOptions());
+
+  return function ({ addComponents, addUtilities, e, theme }) {
+    const getThemeColor = (alias, fallback) => {
+      if (!alias) {
+        return fallback;
+      }
+      return theme(`colors.${alias}`);
+    }
+
+    const btnUtilities = {
+      '.btn.btn--fullwidth': {
+        width: '100%',
+        maxWidth: '100%',
+        '.btn__body-wrap': {
+          width: '100%',
+          maxWidth: '100%',
+        },
+        '.btn__body': {
+          flex: '1'
+        }
+      },
+      '.btn.btn--autowidth': {
+        width: 'auto',
+      }
+    };
+
+    addUtilities(btnUtilities, ['responsive']);
+
+    const defaultIconBorder = getThemeColor(options.defaultColor.iconBorder, lighten(getThemeColor(options.defaultColor.background, '#000'), 0.1));
+
+    addComponents([
+      {
+        '.btn': {
+          display: 'inline-block',
+          textAlign: 'center',
+          display: 'inline-block',
+          fontWeight: theme('fontWeight.normal'),
+          maxWidth: theme('maxWidth.xs'),
+          textDecoration: 'none',
+        },
+        '.btn[disabled]': {
+          opacity: '0.7',
+          cursor: 'not-allowed',
+        },
+        '.btn:hover': {
+          textDecoration: 'none',
+        },
+        '.btn__body': {
+          display: 'flex',
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '.75em 2em'
+        },
+        '.btn__icon': {
+          display: 'flex',
+          alignItems: 'center',
+          borderLeftWidth: '1px',
+          padding: `0 ${theme('spacing.4')}`,
+          borderColor: defaultIconBorder,
+        },
+        // All possible parts are transition ready
+        '.btn__body, .btn__icon, .btn__inline-icon': {
+          transitionProperty: 'color,background-color,border-color',
+          transitionDuration: '.2s',
+          color: getThemeColor(options.defaultColor.text),
+        },
+        '.btn__body, .btn__icon': {
+          backgroundColor: getThemeColor(options.defaultColor.background),
+        },
+        '.btn__icon img': {
+          width: theme('spacing.4')
+        },
+        // Button with a standalone icon on right side
+        '.btn--icon .btn__body-wrap': {
+          display: 'flex',
+        },
+        // Button with a standalone icon on the left
+        '.btn--inverted-icon .btn__icon': {
+          order: '-1',
+          borderRightWidth: '1px',
+          borderLeftWidth: '0',
+        },
+        // Button with an inline icon
+        '.btn__inline-icon': {
+          marginRight: theme('spacing.2'),
+        },
+        // Smaller size
+        '.btn--condensed .btn__body': {
+          padding: '.75em 1em',
+        },
+        '@keyframes btn-loading-spinner': {
+          'to': {
+            transform: 'rotate(360deg)',
+          }
+        },
+        '.btn--loading': {
+          position: 'relative',
+        },
+        '.btn--loading::before': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '2',
+          backgroundColor: theme('colors.black'),
+          opacity: '0.4',
+        },
+        '.btn--loading::after': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '3',
+          top: '50%',
+          left: '50%',
+          width: '1.5rem',
+          height: '1.5rem',
+          marginTop: '-0.75rem',
+          marginLeft: '-0.75rem',
+          borderRadius: '50%',
+          border: `3px solid ${theme('colors.cyan.200')}`,
+          borderLeftColor: 'transparent',
+          animation: 'btn-loading-spinner 1s linear infinite',
+        }
+      },
+      ..._.map(options.colors, (colorOptions, name) => {
+        const bg = getThemeColor(colorOptions.background, '#000');
+        return {
+          // Standard colorized variant
+          [`.btn--${e(name)} .btn__body, .btn--${e(name)} .btn__icon`]: {
+            backgroundColor: getThemeColor(colorOptions.background),
+            color: getThemeColor(colorOptions.text),
+          },
+          [`.btn--${e(name)} .btn__icon`]: {
+            borderColor: getThemeColor(colorOptions.iconBorder, darken(bg, 0.1)),
+            backgroundColor: getThemeColor(colorOptions.iconBackground, bg),
+          },
+          // Hover state unless set with --to-* variant.
+          [`.btn--${e(name)}.btn--hoveractive:not([class^="btn--to-"]):hover`]: {
+            '.btn__body, .btn__icon': {
+              backgroundColor: getThemeColor(colorOptions.hoverBackground, darken(bg, 0.2)),
+              color:  getThemeColor(colorOptions.hoverText, '#fff'),
+            },
+            '.btn__icon': {
+              borderColor: getThemeColor(
+                colorOptions.hoverIconBorder,
+                darken(bg, 0.3)
+              ),
+            },
+            '.btn__icon svg, .btn__icon i': {
+              color:  getThemeColor(colorOptions.hoverText, '#fff'),
+              fill: getThemeColor(colorOptions.hoverText, '#fff')
+            }
+          },
+          [`.btn--hoveractive.btn--to-${e(name)}:hover, .btn--to-${e(name)}.btn--activated`]: {
+            '.btn__body': {
+              backgroundColor: `${getThemeColor(colorOptions.background)} !important`,
+              color: `${getThemeColor(colorOptions.text)} !important`,
+            },
+            '.btn__icon': {
+              borderColor: `${getThemeColor(colorOptions.iconBorder, darken(getThemeColor(colorOptions.background, '#000'), 0.1))} !important`,
+              backgroundColor: `${getThemeColor(colorOptions.iconBackground, getThemeColor(colorOptions.background, '#000'))} !important`,
+            },
+            '.btn__inline-icon': {
+              color: `${getThemeColor(colorOptions.text)} !important`,
+            }
+          }
+        }
+      })
+    ])
+  }
+}

tailwind.config.js

 const Color = require('color');
+const screens = require("./screens");
 
 const alpha = (clr, val) => Color(clr).alpha(val).rgb().string();
 const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
 const darken = (clr, val) => Color(clr).darken(val).rgb().string();
 
 module.exports = {
+  content: [
+    "./source/**/*.mustache",
+    "./source/**/*.json",
+    "./source/**/*.js",
+    "./source/**/*.vue",
+    "./public/**/*.html",
+  ],
+  options: {
+    whitelistPatterns: [
+      /^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
+      /^((sm|md|lg|xl)\:)?w-\d\d?/,
+      /^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
+      /^((sm|md|lg|xl)\:)?h-\d\d?/,
+      /^((sm|md|lg|xl)\:)?h-screen/,
+      /^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?-?m.?-auto?/,
+      /^((sm|md|lg|xl)\:)?p.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?hidden/,
+      /^((sm|md|lg|xl)\:)?block/,
+      /^((sm|md|lg|xl)\:)?inline-block/,
+      /^((sm|md|lg|xl)\:)?flex/,
+      /^((sm|md|lg|xl)\:)?inline-flex/,
+      /^((sm|md|lg|xl)\:)?grid/,
+      /^((sm|md|lg|xl)\:)?gap-\d\d?/,
+      /^((sm|md|lg|xl)\:)?static/,
+      /^((sm|md|lg|xl)\:)?flex-row-*/,
+      /^((sm|md|lg|xl)\:)?flex-col-*/,
+      /^((sm|md|lg|xl)\:)?grid-cols-*/,
+      /^((sm|md|lg|xl)\:)?col-span-*/,
+      /^((sm|md|lg|xl)\:)?row-span-*/,
+      /^((sm|md|lg|xl)\:)?order-*/,
+      /^((sm|md|lg|xl)\:)?items-*/,
+      /^((sm|md|lg|xl)\:)?float-*/,
+      /^((sm|md|lg|xl|hover)\:)?text-*/,
+      /^((sm|md|lg|xl)\:)?grid-flow-*/,
+      /^((sm|md|lg|xl)\:)?head-*/,
+      /^((sm|md|lg|xl)\:)?clearfix/,
+      /^((sm|md|lg|xl|hover)\:)?elevation-*/,
+      /^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
+      /^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
+      /whitespace-*/,
+      /opacity-*/,
+      /^truncate/,
+      /^break-*/,
+      /^overflow-*/,
+      /^duration-*/,
+      /^max-w-*/,
+      /^max-h-*/,
+      /ico--*/,
+    ],
+  },
   theme: {
     extend: {
       maxWidth: {
         'xxs': '16rem',
       },
-      gridTemplateColumns: {
-        'candidate-table-row': 'auto auto auto auto 1fr'
+      height: {
+        '120': '30rem',
       },
       opacity: {
         '85': '0.85',
@@ -21,21 +74,20 @@ module.exports = {
       },
       spacing: {
         '0/5': '0.125rem',
+        '14': '3.5rem',
         '28': '7rem',
         '36': '9rem',
         '44': '11rem',
         '52': '13rem',
-        '80': '20rem'
-      }
+        '80': '20rem',
       },
-    // Breakpoints
-    screens: {
-      'sm': '576px',
-      'md': '768px',
-      'lg': '992px',
-      'xl': '1200px',
-      '2xl': '1366px',
+      // flip-x
+      scale: {
+        '-1': '-1',
       },
+    },
+    // Breakpoints
+    screens,
     fontFamily: {
       alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
       body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
@@ -68,10 +120,10 @@ module.exports = {
       'black': '#000000',
       'white': '#ffffff',
       'grey': {
+        '25': '#fafafa',
         '50': '#f7f7f7',
         '100': '#f3f3f3',
         '125': '#f0f0f0',
-        '150': '#00000012',
         '200': '#adadad',
         '300': '#4c4c4c',
         '400': '#343434',
@@ -80,21 +132,56 @@ module.exports = {
         '700': '#202020',
         '800': '#1f1f1f',
       },
-      'red': {
-        '100': '#d6151b',
-        '200': darken('#d6151b', 0.1),
+      'olive': {
+        '100': '#d6e8b3'
       },
       'green': {
-        '100': '#29bc51',
-        '200': darken('#29bc51', 0.1),
-        '300': darken('#29bc51', 0.18),
+        '200': '#92c6ab',
+        '300': '#76cc9f',
+        '400': '#4ca971',
+      },
+      'yellow': {
+        '100': '#fff7bf',
+        '200': '#f7f38a',
+        '300': '#ffea5a',
+        '400': '#fde119',
+      },
+      'red': {
+        '600': '#d60d53'
       },
       'brands': {
         'facebook': '#067ceb',
         'twitter': '#00c9ff',
         'gmail': '#ec230e',
         'linkedin': '#0066a9',
-      }
+      },
+      'blue': {
+        '100': '#abcdef',
+        '200': '#76b4cf',
+        '300': '#027da8',
+      },
+      'cyan': {
+        '100': '#a7d4d1',
+        '200': '#57b3bd',
+        '300': '#3e8793',
+        '400': '#497280',
+        '500': '#004958',
+      },
+      'orange': {
+        '100': '#f2d29f',
+        '200': '#f1ae7b',
+        '300': '#ed9654',
+      },
+      'violet': {
+        '100': '#edc8bd',
+        '200': '#d28c94',
+        '300': '#8d415f',
+        '400': '#840048',
+        '500': '#670047',
+      },
+      'pirati': {
+        'yellow': '#fec934'
+      },
     },
     container: {
       center: true,
@@ -111,90 +198,12 @@ module.exports = {
   },
   variants: {
     textDecorationColor: ['responsive', 'hover'],
+    background: ['responsive'],
+    appearance: ['responsive'],
+    space: ['responsive'],
+    text: ['responsive', 'hover'],
+    zIndex: ['responsive'],
   },
-  // textStyles: theme => ({ // defaults to {}
-  //   heading: {
-  //     output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
-  //     fontWeight: theme('fontWeight.bold'),
-  //     lineHeight: theme('lineHeight.tight'),
-  //   },
-  //   h1: {
-  //     extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
-  //     fontSize: theme('fontSize.5xl'),
-  //     '@screen sm': {
-  //       fontSize: theme('fontSize.6xl'),
-  //     },
-  //   },
-  //   h2: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.4xl'),
-  //     '@screen sm': {
-  //       fontSize: theme('fontSize.5xl'),
-  //     },
-  //   },
-  //   h3: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.4xl'),
-  //   },
-  //   h4: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.3xl'),
-  //   },
-  //   h5: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.2xl'),
-  //   },
-  //   h6: {
-  //     extends: 'heading',
-  //     fontSize: theme('fontSize.xl'),
-  //   },
-  //   link: {
-  //     '&:hover': {
-  //       textDecoration: 'underline',
-  //     },
-  //   },
-  //   richText: {
-  //     fontWeight: theme('fontWeight.normal'),
-  //     fontSize: theme('fontSize.base'),
-  //     lineHeight: theme('lineHeight.relaxed'),
-  //     '> * + *': {
-  //       marginTop: '1em',
-  //     },
-  //     'h1': {
-  //       extends: 'h1',
-  //     },
-  //     'h2': {
-  //       extends: 'h2',
-  //     },
-  //     'h3': {
-  //       extends: 'h3',
-  //     },
-  //     'h4': {
-  //       extends: 'h4',
-  //     },
-  //     'h5': {
-  //       extends: 'h5',
-  //     },
-  //     'h6': {
-  //       extends: 'h6',
-  //     },
-  //     'ul': {
-  //       listStyleType: 'disc',
-  //     },
-  //     'ol': {
-  //       listStyleType: 'decimal',
-  //     },
-  //     'a': {
-  //       extends: 'link',
-  //     },
-  //     'b, strong': {
-  //       fontWeight: theme('fontWeight.bold'),
-  //     },
-  //     'i, em': {
-  //       fontStyle: 'italic',
-  //     },
-  //   },
-  // }),
   plugins: [
     require('tailwind-css-variables')(
       {
@@ -204,7 +213,7 @@ module.exports = {
         // options
       }
     ),
-    require('tailwindcss-typography')({
+    require('@tailwindcss/typography')({
       // all these options default to the values specified here
       ellipsis: false,         // whether to generate ellipsis utilities
       hyphens: false,          // whether to generate hyphenation utilities
@@ -216,5 +225,81 @@ module.exports = {
       color: "#dddddd",
       opacityBoost: '0.23',
     }),
+    require("./tailwind-plugins/buttons")({
+      defaultColor: {
+        text: 'white',
+        background: 'black',
+        iconBorder: 'grey.300'
+      },
+      colors: {
+        'black': {
+          text: 'white',
+          background: 'black',
+          iconBorder: 'grey.400',
+          hoverIconBorder: 'grey.600',
+        },
+        'grey-700': {
+          text: 'white',
+          background: 'grey.700',
+          iconBorder: 'grey.500',
+          hoverBackground: 'grey.400',
+          hoverIconBorder: 'grey.600',
+        },
+        'grey-500': {
+          text: 'white',
+          background: 'grey.500',
+          iconBorder: 'grey.300',
+          hoverBackground: 'grey.300',
+          hoverIconBorder: 'grey.400',
+        },
+        'grey-125': {
+          text: 'black',
+          background: 'grey.125',
+          hoverText: 'black',
+        },
+        'white': {
+          text: 'black',
+          background: 'white',
+          iconBorder: 'grey.100',
+          hoverText: 'black',
+        },
+        'blue-300': {
+          text: 'white',
+          background: 'blue.300',
+        },
+        'cyan-200': {
+          text: 'white',
+          background: 'cyan.200',
+        },
+        'green-300': {
+          text: 'white',
+          background: 'green.300',
+        },
+        'green-400': {
+          text: 'white',
+          background: 'green.400',
+        },
+        'orange-300': {
+          text: 'white',
+          background: 'orange.300',
+        },
+        'violet-400': {
+          text: 'white',
+          background: 'violet.400',
+        },
+        'violet-500': {
+          text: 'white',
+          background: 'violet.500',
+        },
+        'red-600': {
+          text: 'white',
+          background: 'red.600',
+        },
+        'brands-facebook': {
+          text: 'white',
+          background: 'brands.facebook',
+        }
+      }
+    })
   ]
 }