From 287dfcd22659a9ea449686dac147bdf5c7cb3e30 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 3 Aug 2024 23:50:26 +0200
Subject: [PATCH] Fix breakpoints

Inventory WIP
---
 src/components/utilities/inventory/Inventory.vue |  2 +-
 tailwind.config.js                               | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/utilities/inventory/Inventory.vue b/src/components/utilities/inventory/Inventory.vue
index 36be267..63bafdb 100644
--- a/src/components/utilities/inventory/Inventory.vue
+++ b/src/components/utilities/inventory/Inventory.vue
@@ -2,7 +2,7 @@
     <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
         <div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
             <div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
-                <div class="w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
+                <div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
                     <div class="h-full flex flex-col justify-center items-center">
                         <h3 class="mt-4">Ethereal</h3>
                         <img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
diff --git a/tailwind.config.js b/tailwind.config.js
index e28975e..813b7fd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,20 @@ export default {
       '30px': '30px'
     },
     screens: {
+      'sm': '640px',
+      // => @media (min-width: 640px) { ... }
+
+      'md': '768px',
+      // => @media (min-width: 768px) { ... }
+
+      'lg': '1024px',
+      // => @media (min-width: 1024px) { ... }
+
       'xl': '1200px',
+      // => @media (min-width: 1280px) { ... }
+
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
     },
     extend: {
       inset: {