Allow controlling where responsive utilities are rendered using optional @tailwind screens; directive

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

@@ -0,0 +1,11 @@
+@responsive {
+    .example {
+        color: red;
+    }
+}
+
+@tailwind screen-utilities;
+
+.john {
+    content: "wick";
+}

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

@@ -0,0 +1,31 @@
+.example {
+  color: red;
+}
+
+@media (min-width: 576px) {
+  .sm\:example {
+    color: red;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:example {
+    color: red;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:example {
+    color: red;
+  }
+}
+
+@media (min-width: 1200px) {
+  .xl\:example {
+    color: red;
+  }
+}
+
+.john {
+  content: "wick";
+}

__tests__/sanity.test.js

@@ -17,3 +17,15 @@ it('generates the right CSS', () => {
       expect(result.css).toBe(expected)
     })
 })
+
+it('generates the right CSS with implicit screen utilities', () => {
+  const input = fs.readFileSync(path.resolve(`${__dirname}/fixtures/tailwind-input-with-explicit-screen-utilities.css`), 'utf8')
+
+  return postcss([tailwind()])
+    .process(input)
+    .then(result => {
+      const expected = fs.readFileSync(path.resolve(`${__dirname}/fixtures/tailwind-output-with-explicit-screen-utilities.css`), 'utf8')
+
+      expect(result.css).toBe(expected)
+    })
+})

src/lib/substituteResponsiveAtRules.js

@@ -7,11 +7,12 @@ import buildMediaQuery from '../util/buildMediaQuery'
 export default function(config) {
   return function (css) {
     const screens = config().screens
-    const rules = []
+    const responsiveRules = []
+    let finalRules = []
 
     css.walkAtRules('responsive', atRule => {
       const nodes = atRule.nodes
-      rules.push(...cloneNodes(nodes))
+      responsiveRules.push(...cloneNodes(nodes))
       atRule.before(nodes)
       atRule.remove()
     })
@@ -23,13 +24,27 @@ export default function(config) {
       })
 
       mediaQuery.append(
-        rules.map(rule => {
+        responsiveRules.map(rule => {
           const cloned = rule.clone()
           cloned.selectors = _.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`)
           return cloned
         })
       )
-      css.append(mediaQuery)
+
+
+      finalRules.push(mediaQuery)
     })
+
+    let includesScreenUtilitiesExplicitly = false
+    css.walkAtRules('tailwind', atRule => {
+      if (atRule.params === 'screen-utilities') {
+        includesScreenUtilitiesExplicitly = true
+        atRule.replaceWith(finalRules)
+      }
+    })
+
+    if(! includesScreenUtilitiesExplicitly) {
+      css.append(finalRules)
+    }
   }
 }