diff --git a/src/hooks/useBreakpointValue.ts b/src/hooks/useBreakpointValue.ts index 44a7f756d88..971ed16e029 100644 --- a/src/hooks/useBreakpointValue.ts +++ b/src/hooks/useBreakpointValue.ts @@ -1,4 +1,4 @@ -import { screens } from "../../tailwind/screens" +import { screens } from "@/lib/utils/screen" import { useMediaQuery } from "./useMediaQuery" diff --git a/src/lib/types.ts b/src/lib/types.ts index 852fdd3cc9a..c5b6b840387 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -23,10 +23,10 @@ import type { SimulatorNav } from "@/components/Simulator/interfaces" import allQuizData from "@/data/quizzes" import allQuestionData from "@/data/quizzes/questionBank" +import { screens } from "./utils/screen" import { WALLETS_FILTERS_DEFAULT } from "./constants" import { layoutMapping } from "@/pages/[...slug]" -import twConfig from "@/styles/config" // Credit: https://stackoverflow.com/a/52331580 export type Unpacked = T extends (infer U)[] ? U : T @@ -858,4 +858,4 @@ export type EventCardProps = { imageUrl?: string } -export type BreakpointKey = keyof typeof twConfig.theme.screens +export type BreakpointKey = keyof typeof screens diff --git a/src/lib/utils/screen.ts b/src/lib/utils/screen.ts index 3fda3f97301..9f89a6a208e 100644 --- a/src/lib/utils/screen.ts +++ b/src/lib/utils/screen.ts @@ -1,8 +1,16 @@ +import type { ScreensConfig } from "tailwindcss/types/config" + import type { BreakpointKey } from "../types" -import twConfig from "@/styles/config" +export const screens = { + sm: "480px", + md: "768px", + lg: "992px", + xl: "1280px", + "2xl": "1536px", +} satisfies ScreensConfig -export const breakpointAsNumber = Object.entries(twConfig.theme.screens).reduce( +export const breakpointAsNumber = Object.entries(screens).reduce( (acc, curr) => { const [breakpoint, value] = curr acc[breakpoint] = +value.split("px")[0] diff --git a/src/styles/config.ts b/src/styles/config.ts deleted file mode 100644 index 8ce8205b09d..00000000000 --- a/src/styles/config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import resolveConfig from "tailwindcss/resolveConfig" - -import tailwindConfig from "../../tailwind.config" - -const config = resolveConfig(tailwindConfig) - -export default config diff --git a/tailwind.config.ts b/tailwind.config.ts index f9b48323724..1a526f701e4 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,7 +1,7 @@ import type { Config } from "tailwindcss" import plugin from "tailwindcss/plugin" -import { screens } from "./tailwind/screens" +import { screens } from "./src/lib/utils/screen" const config = { // TODO: Move to "class" strategy after removing Chakra diff --git a/tailwind/screens.ts b/tailwind/screens.ts deleted file mode 100644 index beba7395305..00000000000 --- a/tailwind/screens.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { ScreensConfig } from "tailwindcss/types/config" - -export const screens = { - sm: "480px", - md: "768px", - lg: "992px", - xl: "1280px", - "2xl": "1536px", -} satisfies ScreensConfig