Old Config

assets/main.css

@@ -1,9 +1,8 @@
-/* purgecss start ignore */
-@import 'tailwindcss/base';
+@tailwind base;
 @import './font.css';
 @import './base.css';
-@import 'tailwindcss/components';
-@import './components.css';
-/* purgecss end ignore */
 
-@import 'tailwindcss/utilities';
+@tailwind components;
+@import './components.css';
+
+@tailwind utilities;

components/core/Featurebar/Featurebar.module.css

@@ -1,3 +1,7 @@
 .root {
-  @apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+
+  @screen md {
+    @apply flex text-left;
+  }
 }

components/product/ProductSlider/ProductSlider.module.css

@@ -9,13 +9,21 @@
 }
 
 .leftControl {
-  @apply bg-cover left-10 md:left-6;
+  @apply bg-cover left-10;
   background-image: url('public/cursor-left.png');
+
+  @screen md {
+    @apply left-6;
+  }
 }
 
 .rightControl {
-  @apply bg-cover right-10 md:right-6;
+  @apply bg-cover right-10;
   background-image: url('public/cursor-right.png');
+
+  @screen md {
+    @apply right-6;
+  }
 }
 
 .control {

components/ui/Grid/Grid.module.css

@@ -1,13 +1,18 @@
 .root {
   --row-height: calc(100vh - 80px - 56px);
-  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
+  @apply grid grid-cols-1 gap-0;
+
+  @screen lg {
+    @apply grid-cols-3 grid-rows-2;
+  }
 
   & > * {
-    @apply row-span-1 lg:col-span-1 bg-transparent box-border overflow-hidden;
+    @apply row-span-1 bg-transparent box-border overflow-hidden;
     height: 500px;
     max-height: 800px;
 
     @screen lg {
+      @apply col-span-1;
       height: inherit;
     }
   }
@@ -30,8 +35,12 @@
 .layoutA {
   & > *:nth-child(6n + 1),
   & > *:nth-child(6n + 5) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -57,8 +66,12 @@
 .layoutB {
   & > *:nth-child(6n + 2),
   & > *:nth-child(6n + 4) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -83,8 +96,12 @@
 .layoutC {
   & > *:nth-child(12n + 1),
   & > *:nth-child(12n + 8) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {
@@ -107,8 +124,12 @@
 .layoutD {
   & > *:nth-child(12n + 2),
   & > *:nth-child(12n + 7) {
-    @apply row-span-2 lg:col-span-2;
+    @apply row-span-2;
     height: var(--row-height);
+
+    @screen lg {
+      @apply col-span-2;
+    }
   }
 
   &.filled {

next.config.js

@@ -1,8 +1,4 @@
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
-
-module.exports = withBundleAnalyzer({
+module.exports = {
   images: {
     sizes: [320, 480, 820, 1200, 1600],
     domains: ['cdn11.bigcommerce.com'],
@@ -40,4 +36,4 @@ module.exports = withBundleAnalyzer({
       },
     ]
   },
-})
+}

tailwind.config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
   purge: {
     content: [
       './pages/**/*.{js,ts,jsx,tsx}',
@@ -50,5 +54,9 @@ module.exports = {
       },
     },
   },
+  variants: {},
   plugins: [require('@tailwindcss/ui')],
+  experimental: {
+    applyComplexClasses: true,
+  },
 }