Added custom screen size in tailwind.config.js to account for header …

…links breakpoints (#11118)
getsentry · Aug 19, 2024 · e85dab0 · e85dab0
1 parent 9f539aa
commit e85dab0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -55,7 +55,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
             <Search path={pathname} searchPlatforms={searchPlatforms} showChatBot />
           </div>
         )}
-        <div className="hidden lg:flex justify-end flex-1 space-x-2 items-center">
+        <div className="hidden lg-xl:flex justify-end flex-1 space-x-2 items-center">
           <NavLink href="https://sentry.io/changelog/">Changelog</NavLink>
           <NavLink href="https://try.sentry-demo.com/demo/start/">Sandbox</NavLink>
           <NavLink href="https://sentry.io/">Sign In</NavLink>
@@ -66,7 +66,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
             Get Started
           </NavLink>
         </div>
-        <div className="lg:hidden ml-auto">
+        <div className="lg-xl:hidden ml-auto">
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />
         </div>
       </nav>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,15 +1,13 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
+
 import {
-  scopedPreflightStyles,
   isolateInsideOfContainer,
+  scopedPreflightStyles,
 } from 'tailwindcss-scoped-preflight';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
       animation: {
@@ -22,16 +20,16 @@ module.exports = {
       },
       keyframes: () => ({
         fadeIn: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 },
+          '0%': {opacity: 0},
+          '100%': {opacity: 1},
         },
         fadeInLeft: {
-          '0%': { opacity: 0, transform: 'translateX(-20px)' },
-          '100%': { opacity: 1, transform: 'translateX(0)' },
+          '0%': {opacity: 0, transform: 'translateX(-20px)'},
+          '100%': {opacity: 1, transform: 'translateX(0)'},
         },
         fadeInRight: {
-          '0%': { opacity: 0, transform: 'translateX(20px)' },
-          '100%': { opacity: 1, transform: 'translateX(0)' },
+          '0%': {opacity: 0, transform: 'translateX(20px)'},
+          '100%': {opacity: 1, transform: 'translateX(0)'},
         },
       }),
       fontFamily: {
@@ -55,6 +53,9 @@ module.exports = {
         red: '#e1567c',
         gold: '#F1B71C',
       },
+      screens: {
+        'lg-xl': {min: '1130px'},
+      },
     },
   },
   plugins: [