update TailwindCSS, add image sized from Maják to safelist

source/css/molecules/modal.pcss

@@ -28,11 +28,8 @@
   @apply
     h-auto
     p-3
-    pointer-events-auto;
-
-  @screen md {
-    @apply p-0;
-  }
+    pointer-events-auto
+    md:p-0;
 
   .modal__container-body {
     @apply bg-white relative;

source/css/organisms/candidate-card-list.pcss

 .candidate-card-list {
-  @apply grid grid-flow-row gap-0 row-gap-4;
+  @apply grid grid-flow-row gap-0 gap-y-4;
 }
 
-@responsive {
 .candidate-card-list__item-wrapper {
   @apply px-2 border-r border-grey-100;
 }
@@ -14,4 +13,3 @@
 .candidate-card-list__item-wrapper--noborder {
   @apply border-0;
 }
-}

source/css/organisms/footer.pcss

@@ -27,7 +27,7 @@
 }
 
 .footer-collapsible__toggle {
-  @apply flex items-center cursor-pointer;
+  @apply flex items-center cursor-pointer lg:cursor-auto;
 
   &:after {
     content: "\e925";
@@ -40,11 +40,7 @@
     transform: rotate(-180deg);
   }
 
-  @screen lg {
-    @apply cursor-auto;
-
   &:after {
-      @apply hidden;
-    }
+    @apply lg:hidden
   }
 }

source/css/organisms/hero.pcss

 .hero {
-  @apply py-8;
-
-  @screen md {
-    @apply py-24;
-  }
+  @apply py-8 md:py-24;
 }
 
 .hero--condensed {
-  @apply py-8;
-
-  @screen md {
-    @apply py-16;
-  }
+  @apply py-8 md:py-16;
 }
 
 .hero--image {

source/css/organisms/navbar.pcss

@@ -59,7 +59,7 @@
 }
 
 .navbar-menu__submenu .navbar-menu__link {
-  @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-no-wrap;
+  @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-nowrap;
 }
 
 .navbar-menu__link,

source/css/organisms/subnav.pcss

@@ -8,19 +8,11 @@
 
 .subnav-aside__close,
 .subnav-aside__close:hover {
-  @apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline;
-
-  @screen xl {
-    @apply block;
-  }
+  @apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline xl:block;
 }
 
 .subnav-aside__item {
-  @apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50;
-
-  @screen lg {
-    @apply py-8;
-  }
+  @apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50 lg:py-8;
 }
 
 .subnav-aside__item--visible {

tailwind.config.js

@@ -6,7 +6,6 @@ const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
 const darken = (clr, val) => Color(clr).darken(val).rgb().string();
 
 module.exports = {
-  purge: {
   content: [
     "./source/**/*.mustache",
     "./source/**/*.json",
@@ -58,8 +57,20 @@ module.exports = {
       /^max-h-*/,
       /ico--*/,
     ],
-    }
   },
+  safelist: [
+    "mx-auto",
+    "my-6",
+    "max-w-[800px]",
+    "lg:max-w-full",
+    "float-left",
+    "max-w-[400px]",
+    "sm:max-w-full",
+    "float-right",
+    "ml-4",
+    "mb-6",
+    "object-contain",
+  ],
   theme: {
     extend: {
       maxWidth: {
@@ -212,7 +223,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