From 73f0ee982606b4f28639d1749e61f27adb9f9aed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Fri, 3 Nov 2017 19:43:40 +0100
Subject: [PATCH 1/9] Fixes #18

---
 ...ailwind-input-with-explicit-screen-utilities.css | 12 ++++++++++++
 __tests__/sanity.test.js                            | 12 ++++++++++++
 src/lib/substituteResponsiveAtRules.js              | 13 ++++++++++++-
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css

diff --git a/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
new file mode 100644
index 000000000000..7e6c838a9191
--- /dev/null
+++ b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
@@ -0,0 +1,12 @@
+@tailwind preflight;
+
+@tailwind utilities;
+
+@responsive {
+    .example {
+        @apply .font-bold;
+        color: config('colors.red');
+    }
+}
+
+@tailwind screen-utilities;
diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js
index 516d425f6db0..a4be2cfcca1d 100644
--- a/__tests__/sanity.test.js
+++ b/__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.css`), 'utf8')
+
+      expect(result.css).toBe(expected)
+    })
+})
\ No newline at end of file
diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index 98b306c3f807..27b25cf4bbb9 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -29,7 +29,18 @@ export default function(config) {
           return cloned
         })
       )
-      css.append(mediaQuery)
+
+      let includesScreenUtilitiesExplicitly = false
+      css.walkAtRules('tailwind', atRule => {
+        if (atRule.params === 'screen-utilities') {
+          includesScreenUtilitiesExplicitly = true
+          atRule.replaceWith(mediaQuery)
+        }
+      })
+
+      if(! includesScreenUtilitiesExplicitly) {
+        css.append(mediaQuery)
+      }
     })
   }
 }

From 471a19ea53ed3fe25e1f62d58f84146eaab18d1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Fri, 3 Nov 2017 23:24:27 +0100
Subject: [PATCH 2/9] fix test to meet expectation

---
 ...d-input-with-explicit-screen-utilities.css | 11 +++++-----
 ...-output-with-explicit-screen-utilities.css | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 __tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css

diff --git a/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
index 7e6c838a9191..e2d9b5870ef7 100644
--- a/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
+++ b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
@@ -1,12 +1,11 @@
-@tailwind preflight;
-
-@tailwind utilities;
-
 @responsive {
     .example {
-        @apply .font-bold;
-        color: config('colors.red');
+        color: red;
     }
 }
 
 @tailwind screen-utilities;
+
+.john {
+    content: "wick";
+}
diff --git a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
new file mode 100644
index 000000000000..f91424c6033d
--- /dev/null
+++ b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
@@ -0,0 +1,21 @@
+@media (min-width: 768px) {
+    .example {
+        color: red;
+    }
+}
+
+@media (min-width: 992px) {
+    .example {
+        color: red;
+    }
+}
+
+@media (min-width: 1200px) {
+    .example {
+        color: red;
+    }
+}
+
+.john {
+    content: "wick";
+}
\ No newline at end of file

From 76eb4beb0382b6a7dfdd0d5131d5c753c0cdfad2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Fri, 3 Nov 2017 23:49:49 +0100
Subject: [PATCH 3/9] fix wrong output path

---
 __tests__/sanity.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js
index a4be2cfcca1d..a96d4b9769f8 100644
--- a/__tests__/sanity.test.js
+++ b/__tests__/sanity.test.js
@@ -24,7 +24,7 @@ it('generates the right CSS with implicit screen utilities', () => {
   return postcss([tailwind()])
     .process(input)
     .then(result => {
-      const expected = fs.readFileSync(path.resolve(`${__dirname}/fixtures/tailwind-output.css`), 'utf8')
+      const expected = fs.readFileSync(path.resolve(`${__dirname}/fixtures/tailwind-output-with-explicit-screen-utilities.css`), 'utf8')
 
       expect(result.css).toBe(expected)
     })

From 42a7038aa433aa3bfedaeedc98e57b260b228a36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Fri, 3 Nov 2017 23:56:25 +0100
Subject: [PATCH 4/9] fix expectations

---
 ...-output-with-explicit-screen-utilities.css | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
index f91424c6033d..28f535ded769 100644
--- a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
+++ b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
@@ -1,21 +1,31 @@
+.example {
+  color: red;
+}
+
+@media (min-width: 576px) {
+  .sm\:example {
+    color: red;
+  }
+}
+
 @media (min-width: 768px) {
-    .example {
-        color: red;
-    }
+  .md\:example {
+    color: red;
+  }
 }
 
 @media (min-width: 992px) {
-    .example {
-        color: red;
-    }
+  .lg\:example {
+    color: red;
+  }
 }
 
 @media (min-width: 1200px) {
-    .example {
-        color: red;
-    }
+  .xl\:example {
+    color: red;
+  }
 }
 
 .john {
-    content: "wick";
+  content: "wick";
 }
\ No newline at end of file

From 6cec22b523ef167a6bf1f178994894e30efcfa87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Sat, 4 Nov 2017 00:07:02 +0100
Subject: [PATCH 5/9] make tests green

---
 ...-output-with-explicit-screen-utilities.css |  2 +-
 src/lib/substituteResponsiveAtRules.js        | 28 +++++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
index 28f535ded769..a04ced7155db 100644
--- a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
+++ b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
@@ -28,4 +28,4 @@
 
 .john {
   content: "wick";
-}
\ No newline at end of file
+}
diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index 27b25cf4bbb9..8697f0f77c06 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/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,24 +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
         })
       )
 
-      let includesScreenUtilitiesExplicitly = false
-      css.walkAtRules('tailwind', atRule => {
-        if (atRule.params === 'screen-utilities') {
-          includesScreenUtilitiesExplicitly = true
-          atRule.replaceWith(mediaQuery)
-        }
-      })
 
-      if(! includesScreenUtilitiesExplicitly) {
-        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)
+    }
   }
 }

From 44c0035dfaac0511a5ec7d0d575abeb44f16a71b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Wed, 8 Nov 2017 18:30:59 +0100
Subject: [PATCH 6/9] rename screen-utilities to screens

---
 .../fixtures/tailwind-input-with-explicit-screen-utilities.css  | 2 +-
 src/lib/substituteResponsiveAtRules.js                          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
index e2d9b5870ef7..1c56044ab008 100644
--- a/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
+++ b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
@@ -4,7 +4,7 @@
     }
 }
 
-@tailwind screen-utilities;
+@tailwind screens;
 
 .john {
     content: "wick";
diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index 8697f0f77c06..2ac2a979ffcf 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -37,7 +37,7 @@ export default function(config) {
 
     let includesScreenUtilitiesExplicitly = false
     css.walkAtRules('tailwind', atRule => {
-      if (atRule.params === 'screen-utilities') {
+      if (atRule.params === 'screens') {
         includesScreenUtilitiesExplicitly = true
         atRule.replaceWith(finalRules)
       }

From ed71ee438d7d947ea19dc079eb061fa865cb54da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Wed, 8 Nov 2017 18:48:48 +0100
Subject: [PATCH 7/9] fix code style issues

---
 __tests__/sanity.test.js               | 12 +++++++++---
 src/lib/substituteResponsiveAtRules.js | 12 +++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js
index be15fff2a7dc..05a1b6fed57a 100644
--- a/__tests__/sanity.test.js
+++ b/__tests__/sanity.test.js
@@ -30,13 +30,19 @@ it('does not add any CSS if no Tailwind features are used', () => {
 })
 
 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')
+  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')
+      const expected = fs.readFileSync(
+        path.resolve(`${__dirname}/fixtures/tailwind-output-with-explicit-screen-utilities.css`),
+        'utf8'
+      )
 
       expect(result.css).toBe(expected)
     })
-})
\ No newline at end of file
+})
diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index 73a89f8a2f4e..7203d800a669 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -29,13 +29,15 @@ export default function(config) {
           return cloned
         })
       )
-      finalRules.push(mediaQuery)
 
-      if (mediaQuery.nodes.length) {
-        css.append(mediaQuery)
-      }
+      finalRules.push(mediaQuery)
     })
 
+    const hasScreenRules = finalRules.some(i => i.nodes.length !== 0)
+    if (!hasScreenRules) {
+      return
+    }
+
     let includesScreenUtilitiesExplicitly = false
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'screens') {
@@ -44,7 +46,7 @@ export default function(config) {
       }
     })
 
-    if(! includesScreenUtilitiesExplicitly) {
+    if (!includesScreenUtilitiesExplicitly) {
       css.append(finalRules)
     }
   }

From 55f3f93f91408effe792c1b1d5d765d1aa39e412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Wed, 8 Nov 2017 19:02:46 +0100
Subject: [PATCH 8/9] reduct code smells

---
 src/lib/substituteResponsiveAtRules.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index 7203d800a669..74b0ba849ccc 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -38,16 +38,19 @@ export default function(config) {
       return
     }
 
-    let includesScreenUtilitiesExplicitly = false
+    const includesScreensExplicitly = css.some(
+      rule => rule.type === 'atrule' && rule.params === 'screens'
+    )
+
+    if (!includesScreensExplicitly) {
+      css.append(finalRules)
+      return
+    }
+
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'screens') {
-        includesScreenUtilitiesExplicitly = true
         atRule.replaceWith(finalRules)
       }
     })
-
-    if (!includesScreenUtilitiesExplicitly) {
-      css.append(finalRules)
-    }
   }
 }

From 7e759ac7e9a18b2e2d45e0e661cc6987bf673188 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Heller=20=F0=9F=92=A9?= <ph@wacg.de>
Date: Wed, 8 Nov 2017 20:30:37 +0100
Subject: [PATCH 9/9] add to the docs

---
 docs/source/docs/functions-and-directives.blade.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
index 4efd483d30b3..8b9a400334f8 100644
--- a/docs/source/docs/functions-and-directives.blade.md
+++ b/docs/source/docs/functions-and-directives.blade.md
@@ -8,7 +8,7 @@ Tailwind exposes a few custom CSS functions and directives that can be used in y
 
 ### `@@tailwind`
 
-Use the `@@tailwind` directive to insert Tailwind's `preflight` and `utilities` styles into your CSS. Here's a full example of how you might do this:
+Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screen` styles into your CSS. Here's a full example of how you might do this:
 
 ```less
 /**
@@ -25,6 +25,13 @@ Use the `@@tailwind` directive to insert Tailwind's `preflight` and `utilities`
  * config file.
  */
 @@tailwind utilities;
+
+/**
+ * (Optional)
+ * This injects the utility classes and styles wrapped by the @@responsive directive.
+ * These will be appended at the end of the stylesheet if the `@@tailwind screens` directive is not used.
+ */
+ @@tailwind screens;
 ```
 
 ### `@@apply`