From 308499dcad383f6bf638862e7402f4c0ea700bd7 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 25 Aug 2017 14:11:42 -0400
Subject: [PATCH] Always generate responsive rules at end of stylesheet

---
 src/tailwind.js | 49 ++++++++++++++++++++++++++++---------------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/tailwind.js b/src/tailwind.js
index 22d97bf83..9928629a2 100644
--- a/src/tailwind.js
+++ b/src/tailwind.js
@@ -1,6 +1,8 @@
 const _ = require('lodash')
 const postcss = require('postcss')
 const cssnext = require('postcss-cssnext')
+const fs = require('fs')
+
 const backgroundColors = require('./generators/background-colors')
 const shadows = require('./generators/shadows')
 const flex = require('./generators/flex')
@@ -49,35 +51,40 @@ function addCustomMediaQueries(css, { breakpoints }) {
 }
 
 function generateUtilities(css, options) {
-  css.walkAtRules('tailwind', atRule => {
-    if (atRule.params === 'utilities') {
+  const rules = []
 
-      const rules = _.flatten([
+  css.walkAtRules(atRule => {
+    if (atRule.name === 'responsive') {
+      const nodes = atRule.nodes
+      css.insertBefore(atRule, nodes)
+      atRule.remove()
+      rules.push(...nodes)
+    }
+    if (atRule.name === 'tailwind' && atRule.params === 'utilities') {
+      const utilities = _.flatten([
         backgroundColors(options),
         shadows(options),
         flex(),
       ])
-
-      css.insertBefore(atRule, rules)
-
-      Object.keys(options.breakpoints).forEach(breakpoint => {
-        const mediaQuery = postcss.atRule({
-          name: 'media',
-          params: `(--breakpoint-${breakpoint})`,
-        })
-
-        mediaQuery.append(rules.map(rule => {
-          const cloned = rule.clone()
-          cloned.selector = `.${breakpoint}\\:${rule.selector.slice(1)}`
-          return cloned
-        }))
-        css.insertBefore(atRule, mediaQuery)
-      })
-
+      css.insertBefore(atRule, utilities)
       atRule.remove()
-      return false
+      rules.push(...utilities)
     }
   })
+
+  Object.keys(options.breakpoints).forEach(breakpoint => {
+    const mediaQuery = postcss.atRule({
+      name: 'media',
+      params: `(--breakpoint-${breakpoint})`,
+    })
+
+    mediaQuery.append(rules.map(rule => {
+      const cloned = rule.clone()
+      cloned.selector = `.${breakpoint}\\:${rule.selector.slice(1)}`
+      return cloned
+    }))
+    css.append(mediaQuery)
+  })
 }
 
 function substituteClassMixins(css) {