Update Tailwind config to add xs screen size

SoldierCorp · Mar 1, 2023 · c865ab3 · c865ab3
1 parent 2ffb3d4
commit c865ab3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="flex justify-between items-center w-full mt-3 border-b pb-7 sm:px-4 px-2 border-gray-500">
+    <header className="flex flex-col xs:flex-row justify-between items-center w-full mt-3 border-b pb-7 sm:px-4 px-2 border-gray-500 gap-2">
       <Link href="/" className="flex space-x-2">
         <Image
           alt="header text"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,7 +6,11 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: "330px",
+      },
+    },
   },
   plugins: [require("@tailwindcss/forms"), require("@headlessui/tailwindcss")],
 };