Utility classes not working after adding custom classes.

[Harsh4dager]

i 've added some screen and color custom classes and after that i'm not being able to use any color and screen default classes.

/** @type {import('tailwindcss').Config} /
module.exports = {
content: [""],
theme: {
extend: {},
screens: {
main_img_sm: '540px',
nav_md: '860px',
ban_lg: '1080px',
nav_xl: '1400px',

},
colors: {
  main: '#bcdbfa',
}

},
plugins: [],
}

[wongjn]

It is because you have declared the configuration in theme.screens and theme.colors which will completely override the Tailwind defaults. You may have intended to declare them in theme.extend.screens and theme.extend.colors respectively:

 content: [""],
 theme: {
-extend: {},
-screens: {
-main_img_sm: '540px',
-nav_md: '860px',
-ban_lg: '1080px',
-nav_xl: '1400px',
-
-},
-colors: {
-  main: '#bcdbfa',
-}
+  extend: {
+    screens: {
+      main_img_sm: '540px',
+      nav_md: '860px',
+      ban_lg: '1080px',
+      nav_xl: '1400px',
+    },
+    colors: {
+      main: '#bcdbfa',
+    },
+  },
 },
 plugins: [],
}