Standardize breakpoints between Tailwind and MUI

UTDNebula · Nov 25, 2024 · 87a2e97 · 87a2e97
1 parent 34158a7
commit 87a2e97
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -9,6 +9,7 @@ import localFont from 'next/font/local';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React from 'react';
+import resolveConfig from 'tailwindcss/resolveConfig';
 
 import tailwindConfig from '@/../tailwind.config.js';
 import FeedbackPopup from '@/components/common/FeedbackPopup/feedbackPopup';
@@ -74,19 +75,23 @@ const kallisto = localFont({
   variable: '--font-kallisto',
 });
 
+const fullTailwindConfig = resolveConfig(tailwindConfig);
+
 function MyApp({ Component, pageProps }: AppProps) {
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  const colors = fullTailwindConfig.theme.colors as any;
   const palette = {
     palette: {
       //copied from tailwind.config.js
       primary: {
-        main: tailwindConfig.theme.extend.colors.royal,
+        main: colors.royal as string,
       },
       secondary: {
-        main: tailwindConfig.theme.extend.colors.royal,
-        light: tailwindConfig.theme.extend.colors.periwinkle,
+        main: colors.royal as string,
+        light: colors.periwinkle as string,
       },
       error: {
-        main: tailwindConfig.theme.extend.colors.persimmon['500'],
+        main: colors.persimmon['500'] as string,
       },
     },
   };
@@ -99,6 +104,15 @@ function MyApp({ Component, pageProps }: AppProps) {
     typography: {
       fontFamily: 'inherit',
     },
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: parseInt(fullTailwindConfig.theme.screens.sm),
+        md: parseInt(fullTailwindConfig.theme.screens.md),
+        lg: parseInt(fullTailwindConfig.theme.screens.lg),
+        xl: parseInt(fullTailwindConfig.theme.screens.xl),
+      },
+    },
   });
 
   const router = useRouter();

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,8 +1,11 @@
 import { Head, Html, Main, NextScript } from 'next/document';
 import React from 'react';
+import resolveConfig from 'tailwindcss/resolveConfig';
 
 import tailwindConfig from '@/../tailwind.config.js';
 
+const fullTailwindConfig = resolveConfig(tailwindConfig);
+
 function Document() {
   return (
     <Html lang="en">
@@ -13,7 +16,8 @@ function Document() {
         />
         <meta
           name="theme-color"
-          content={tailwindConfig.theme.extend.colors.royal}
+          // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+          content={(fullTailwindConfig.theme.colors as any).royal as string}
         />
         <meta
           property="og:description"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,29 +1,11 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   important: true,
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx}',
     './src/components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    screens: {
-      short: { raw: '(max-height: 200px)' },
-      xs: '400px',
-      gridsm: '600px',
-      sm: '640px',
-      // => @media (min-width: 640px) { ... }
-
-      md: '768px',
-      // => @media (min-width: 768px) { ... }
-
-      lg: '1024px',
-      // => @media (min-width: 1024px) { ... }
-
-      xl: '1280px',
-      // => @media (min-width: 1280px) { ... }
-
-      '2xl': '1536px',
-      // => @media (min-width: 1536px) { ... }
-    },
     extend: {
       colors: {
         haiti: '#090b2c', // brand black