diff --git a/layers/composables/useBreakpoints.ts b/layers/composables/useBreakpoints.ts index 541b356..56680f3 100644 --- a/layers/composables/useBreakpoints.ts +++ b/layers/composables/useBreakpoints.ts @@ -6,6 +6,7 @@ export const BREAKPOINTS = { sm: 768, md: 1024, lg: 1440, + xl: 1920, } as const /** @@ -13,14 +14,19 @@ export const BREAKPOINTS = { */ export const useResponsiveBreakpoints = () => { const breakpoints = useBreakpoints(BREAKPOINTS) - const isXs = breakpoints.smaller('sm') // < 768 + const isXs = breakpoints.smaller('sm') // x < 768 const isSm = breakpoints.between('sm', 'md') // 768 <= x < 1024 const isMd = breakpoints.between('md', 'lg') // 1024 <= x < 1440 - const isLg = breakpoints.greaterOrEqual('lg') // >= 1440 + const isLg = breakpoints.greaterOrEqual('lg') // x >= 1440 const isMobile = breakpoints.smaller('md') // < 1024 const isDesktop = breakpoints.greaterOrEqual('md') // >= 1024 + const isAboveSm = breakpoints.greaterOrEqual('sm') // x >= 768 + const isAboveMd = breakpoints.greaterOrEqual('md') // x >= 1024 + const isAboveLg = breakpoints.greaterOrEqual('lg') // x >= 1440 + const isAboveXl = breakpoints.greaterOrEqual('xl') // x >= 1920 + return computed(() => ({ isXs: isXs.value, isSm: isSm.value, @@ -28,6 +34,10 @@ export const useResponsiveBreakpoints = () => { isLg: isLg.value, isMobile: isMobile.value, isDesktop: isDesktop.value, + isAboveSm: isAboveSm.value, + isAboveMd: isAboveMd.value, + isAboveLg: isAboveLg.value, + isAboveXl: isAboveXl.value, })) } diff --git a/tailwind.config.ts b/tailwind.config.ts index 153c6ff..903172b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -9,11 +9,12 @@ export default { theme: { extend: { screens: { - xxs: '0px', // 0px ~ 359px - xs: '360px', // Mobile: 360px ~ 767px - sm: '768px', // Tablet: 768px ~ 1023px - md: '1024px', // PC: 1024px ~ 1439px + xxs: '0px', // 0px+ + xs: '360px', // Mobile: 360px+ + sm: '768px', // Tablet: 768px+ + md: '1024px', // PC: 1024px+ lg: '1440px', // Large PC: 1440px+ + xl: '1920px', // Extra Large PC: 1920px+ }, colors: { 'theme-foreground': 'var(--foreground)',