From 4f6cd949a1a4e88ab3b5d8bc77a0bc6436a2f247 Mon Sep 17 00:00:00 2001
From: dotnetCarpenter <jon.ronnenberg@gmail.com>
Date: Mon, 13 Nov 2017 20:25:37 +0100
Subject: [PATCH] Better explanation for using tailwind with postcss-import

Manual cherry-pick https://github.com/tailwindcss/tailwindcss/commit/ad44fae29fe9d8da189b02602558f60986bebb49
---
 examples/tailwindcss/assets/css/tailwind.css | 80 +++++++++++---------
 1 file changed, 46 insertions(+), 34 deletions(-)

diff --git a/examples/tailwindcss/assets/css/tailwind.css b/examples/tailwindcss/assets/css/tailwind.css
index 74a97f8831..d44c6d8c2c 100644
--- a/examples/tailwindcss/assets/css/tailwind.css
+++ b/examples/tailwindcss/assets/css/tailwind.css
@@ -4,42 +4,54 @@
  *
  * You can see the styles here:
  * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, you should import this line from it's own file:
+ *
+ * @import "./tailwind-preflight.css";
+ *
+ * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
  */
  @tailwind preflight;
 
-  /**
-   * Here you would add any of your custom component classes; stuff that you'd
-   * want loaded *before* the utilities so that the utilities could still
-   * override them.
-   *
-   * Example:
-   *
-   * .btn { ... }
-   * .form-input { ... }
-   *
-   * Or if using a preprocessor:
-   *
-   * @import "components/buttons";
-   * @import "components/forms";
-   */
+ /**
+  * Here you would add any of your custom component classes; stuff that you'd
+  * want loaded *before* the utilities so that the utilities could still
+  * override them.
+  *
+  * Example:
+  *
+  * .btn { ... }
+  * .form-input { ... }
+  *
+  * Or if using a preprocessor or `postcss-import`:
+  *
+  * @import "components/buttons";
+  * @import "components/forms";
+  */
 
-  /**
-   * This injects all of Tailwind's utility classes, generated based on your
-   * config file.
-   */
-  @tailwind utilities;
+ /**
+  * This injects all of Tailwind's utility classes, generated based on your
+  * config file.
+  *
+  * If using `postcss-import`, you should import this line from it's own file:
+  *
+  * @import "./tailwind-utilities.css";
+  *
+  * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+  */
+ @tailwind utilities;
 
-  /**
-   * Here you would add any custom utilities you need that don't come out of the
-   * box with Tailwind.
-   *
-   * Example :
-   *
-   * .bg-pattern-graph-paper { ... }
-   * .skew-45 { ... }
-   *
-   * Or if using a preprocessor..
-   *
-   * @import "utilities/backgrond-patterns";
-   * @import "utilities/skew-transforms";
-   */
+ /**
+  * Here you would add any custom utilities you need that don't come out of the
+  * box with Tailwind.
+  *
+  * Example :
+  *
+  * .bg-pattern-graph-paper { ... }
+  * .skew-45 { ... }
+  *
+  * Or if using a preprocessor or `postcss-import`:
+  *
+  * @import "utilities/background-patterns";
+  * @import "utilities/skew-transforms";
+  */
\ No newline at end of file