From 6fc8d777da6b77aea8f8afc99554a01135bd070e Mon Sep 17 00:00:00 2001
From: Brad Cornes <hello@bradley.dev>
Date: Tue, 5 Apr 2022 11:46:50 +0100
Subject: [PATCH] Update `screens` types (#8042)

---
 types/config.d.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/types/config.d.ts b/types/config.d.ts
index 6df5eb0a7a1f..c7adb70dadc8 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -71,12 +71,15 @@ type DarkModeConfig =
   /** Use the `class` stategy with a custom class instead of `.dark`. */
   | ['class', string]
 
+type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string }
+type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
+
 // Theme related config
 interface ThemeConfig {
   extend: Partial<Omit<ThemeConfig, 'extend'>>
 
   /** Responsiveness */
-  screens: ResolvableTo<KeyValuePair>
+  screens: ResolvableTo<ScreensConfig>
 
   /** Reusable base configs */
   colors: ResolvableTo<RecursiveKeyValuePair>
@@ -85,12 +88,7 @@ interface ThemeConfig {
   /** Components */
   container: ResolvableTo<
     Partial<{
-      screens:
-        | string[] /** List of breakpoints. E.g.: '400px', '500px' */
-        /** Named breakpoints. E.g.: { sm: '400px' } */
-        | Record<string | number, string>
-        /** Name breakpoints with explicit min and max values. E.g.: { sm: { min: '300px', max: '400px' } } */
-        | Record<string, { min: string; max: string }>
+      screens: ScreensConfig
       center: boolean
       padding: string | Record<string, string>
     }>