diff --git a/src/lib/components/test_cases/TestCasesPane.svelte b/src/lib/components/test_cases/TestCasesPane.svelte index f85314ef8ad9e2dee7a206dbc06a7b3a531b953c..856d8d4f114bcebb1b950bfd9a2e7acf17f36899 100644 --- a/src/lib/components/test_cases/TestCasesPane.svelte +++ b/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} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 421d827fa3652ea612e0f5aa3d02753204f7f47d..0cb7819058801f960b8a1133a10f2d82af036fa0 100644 --- a/tailwind.config.cjs +++ b/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,