refactor: extract exported tailwind config

Author: wackerow

src/lib/types.ts

@@ -4,7 +4,6 @@ import type { AppProps } from "next/app"
 import type { StaticImageData } from "next/image"
 import type { SSRConfig } from "next-i18next"
 import type { ReactElement, ReactNode } from "react"
-import resolveConfig from "tailwindcss/resolveConfig"
 import type { Icon } from "@chakra-ui/react"
 
 import type {
@@ -26,8 +25,8 @@ import allQuestionData from "@/data/quizzes/questionBank"
 
 import { WALLETS_FILTERS_DEFAULT } from "./constants"
 
-import tailwindConfig from "@/../tailwind.config"
 import { layoutMapping } from "@/pages/[...slug]"
+import twConfig from "@/styles/config"
 
 // Credit: https://stackoverflow.com/a/52331580
 export type Unpacked<T> = T extends (infer U)[] ? U : T
@@ -829,6 +828,4 @@ export type EventCardProps = {
   imageUrl?: string
 }
 
-const twConfig = resolveConfig(tailwindConfig)
-
 export type BreakpointKey = keyof typeof twConfig.theme.screens

src/lib/utils/screen.ts

@@ -1,15 +1,12 @@
-import resolveConfig from "tailwindcss/resolveConfig"
-
 import type { BreakpointKey } from "../types"
 
-import tailwindConfig from "@/../tailwind.config"
-
-const fullConfig = resolveConfig(tailwindConfig)
+import twConfig from "@/styles/config"
 
-export const breakpointAsNumber = Object.entries(
-  fullConfig.theme.screens
-).reduce((acc, curr) => {
-  const [breakpoint, value] = curr
-  acc[breakpoint] = +value.split("px")[0]
-  return acc
-}, {}) as Record<BreakpointKey, number>
+export const breakpointAsNumber = Object.entries(twConfig.theme.screens).reduce(
+  (acc, curr) => {
+    const [breakpoint, value] = curr
+    acc[breakpoint] = +value.split("px")[0]
+    return acc
+  },
+  {}
+) as Record<BreakpointKey, number>

src/styles/config.ts

@@ -0,0 +1,7 @@
+import resolveConfig from "tailwindcss/resolveConfig"
+
+import tailwindConfig from "../../tailwind.config"
+
+const config = resolveConfig(tailwindConfig)
+
+export default config