Add 2xl breakpoint by default

__tests__/applyAtRule.test.js

@@ -477,6 +477,11 @@ test('you can apply the container component', () => {
         max-width: 1280px;
       }
     }
+    @media (min-width: 1536px) {
+      .foo {
+        max-width: 1536px;
+      }
+    }
   `
 
   expect.assertions(2)

__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css

@@ -26,6 +26,12 @@
   }
 }
 
+@media (min-width: 1536px) {
+  .\32xl\:example {
+    color: red;
+  }
+}
+
 .john {
   content: "wick";
 }

jest/customMatchers.js

@@ -2,6 +2,7 @@ import prettier from 'prettier'
 import diff from 'jest-diff'
 
 function format(input) {
+  return input
   return prettier.format(input, {
     parser: 'css',
     printWidth: 100,

src/flagged/additionalBreakpoint.js

@@ -1,11 +0,0 @@
-export default {
-  theme: {
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-    },
-  },
-}

src/util/getAllConfigs.js

@@ -1,6 +1,5 @@
 import defaultConfig from '../../stubs/defaultConfig.stub.js'
 import { flagEnabled } from '../featureFlags'
-import additionalBreakpoint from '../flagged/additionalBreakpoint'
 import { flatMap, get } from 'lodash'
 
 export default function getAllConfigs(config, defaultPresets = [defaultConfig]) {
@@ -9,7 +8,7 @@ export default function getAllConfigs(config, defaultPresets = [defaultConfig])
   })
 
   const features = {
-    additionalBreakpoint,
+    // Add experimental configs here...
   }
 
   Object.keys(features).forEach((feature) => {

stubs/defaultConfig.stub.js

@@ -7,6 +7,7 @@ module.exports = {
       md: '768px',
       lg: '1024px',
       xl: '1280px',
+      '2xl': '1536px',
     },
     colors: {
       transparent: 'transparent',