Change les règles de la grid des cas type pour afficher des cas types plus...

Change les règles de la grid des cas type pour afficher des cas types plus large. Pour cela j'ai été obligée d'ajouté une catégorie xl au mediaqueries

src/lib/components/test_cases/TestCasesPane.svelte

@@ -84,7 +84,7 @@
   }
 </script>
 
-<section class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-10">
+<section class="grid grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3 gap-10">
   {#each $testCases as situation, situationIndex}
     <TestCaseView
       calculationName={$calculationName}

tailwind.config.cjs

@@ -5,6 +5,20 @@ const config = {
   plugins: [require("@tailwindcss/forms")],
   purge: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
+    screens: {
+      'sm': '640px',
+      // => @media (min-width: 640px) { ... }
+      'md': '768px',
+      // => @media (min-width: 768px) { ... }
+      'lg': '1024px',
+      // => @media (min-width: 1024px) { ... }
+      'xl': '1280px',
+      // => @media (min-width: 1280px) { ... }
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
+      '3xl': '2200px',
+      // => @media (min-width: 2200px) { ... }
+    },
     extend: {
       colors: {
         black: colors.black,