Updates to TailwindCSS v2.0 & PurgeCSS 3.0

Author: ouun

package.json

@@ -46,7 +46,7 @@
     "sass-loader": "^10.1.0",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
-    "tailwindcss": "^1.2.0",
+    "tailwindcss": "^2.0.1",
     "tailwindcss-aspect-ratio": "^3.0.0",
     "tailwindcss-wordpress": "^0.1.1",
     "vue-template-compiler": "^2.6.11",
@@ -55,6 +55,7 @@
   "dependencies": {
     "@barba/core": "^2.9.7",
     "@barba/css": "^2.1.15",
+    "autoprefixer": "^10.0.2",
     "colcade": "^0.2.0",
     "custom-event-polyfill": "^1.0.7",
     "detect-it": "^3.0.5",
@@ -63,6 +64,7 @@
     "jquery-accessible-accordion-aria": "^2.6.1",
     "js-dom-router": "^1.0",
     "lozad": "^1.4.0",
-    "photoswipe": "^4.1.3"
+    "photoswipe": "^4.1.3",
+    "postcss": "^8.1.10"
   }
 }

resources/assets/styles/blocks/paragraph/_theme.scss

@@ -1,6 +1,6 @@
 p.has-drop-cap {
   &:not(:focus)::first-letter {
-    @apply font-hairline not-italic uppercase float-left;
+    @apply not-italic uppercase float-left;
 
     font-family: var(--heading-font-family);
     font-size: 8.4em; // Relative to the text-size

resources/assets/styles/components/_buttons.scss

@@ -4,7 +4,7 @@
 }
 
 %button-base-text {
-  @apply relative font-medium text-center whitespace-no-wrap select-none cursor-pointer no-underline;
+  @apply relative font-medium text-center whitespace-nowrap select-none cursor-pointer no-underline;
 }
 
 %button {

resources/assets/styles/header/_slide-out-menu.scss

@@ -25,7 +25,7 @@ header.main-header {
           &:not(.mega-menu) ul.sub-menu {
             li.hide-children {
               & > ul {
-                @apply opacity-0 translate-x-full top-0 left-0 h-0 w-auto m-0 whitespace-no-wrap overflow-hidden border-0 transition;
+                @apply opacity-0 translate-x-full top-0 left-0 h-0 w-auto m-0 whitespace-nowrap overflow-hidden border-0 transition;
               }
             }
 

resources/assets/styles/header/menus/_desktop-horizontal.scss

@@ -34,7 +34,7 @@ div.icons-wrap {
       // Second menu level / First sub-menu
       & > .sub-menu {
         @apply invisible fixed right-0 top-full opacity-0 cursor-auto;
-        @apply flex flex-col whitespace-no-wrap;
+        @apply flex flex-col whitespace-nowrap;
         @apply z-30;
         @apply px-6 py-4;
         @apply border;

resources/assets/styles/shop/_forms.scss

@@ -140,7 +140,7 @@ form.cart {
 
         /* Grouped Product table specific */
         td.woocommerce-grouped-product-list-item__quantity {
-          @apply whitespace-no-wrap;
+          @apply whitespace-nowrap;
 
           input[type="number"] {
             @apply pr-0 w-12 py-0;

tailwind.config.js

@@ -25,9 +25,7 @@ module.exports = {
       './resources/assets/scripts/**/*.js',
     ],
     options: {
-      whitelist: [
-      ],
-      whitelistPatterns: [
+      safelist: [
         /^z(-.*)?$/,
         /^bg(-.*)?$/,
         /^text(-.*)?$/,
@@ -107,19 +105,19 @@ module.exports = {
 
       red: {
         light: 'var(--color-red-light)',
-        default: 'var(--color-red)',
+        DEFAULT: 'var(--color-red)',
         dark: 'var(--color-red-dark)',
       },
 
       green: {
         light: 'var(--color-green-light)',
-        default: 'var(--color-green)',
+        DEFAULT: 'var(--color-green)',
         dark: 'var(--color-green-dark)',
       },
 
       blue: {
         light: 'var(--color-blue-light)',
-        default: 'var(--color-blue)',
+        DEFAULT: 'var(--color-blue)',
         dark: 'var(--color-blue-dark)',
       },
     },
@@ -505,7 +503,7 @@ module.exports = {
     */
 
     borderWidth: {
-      default: '1px',
+      DEFAULT: '1px',
       '0': '0',
       '2': '2px',
       '3': '3px',
@@ -541,7 +539,7 @@ module.exports = {
 
     boxShadow: {
       'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.04)',
-      'default': '0 2px 4px 0 rgba(0,0,0,0.10)',
+      DEFAULT: '0 2px 4px 0 rgba(0,0,0,0.10)',
       'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
       'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
       'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
@@ -676,7 +674,7 @@ module.exports = {
       '3': 3,
       '4': 4,
       '5': 5,
-      default: 1,
+      DEFAULT: 1,
     },
   },