Better explanation for using tailwind with postcss-import

Manual cherry-pick ad44fae29f

examples/tailwindcss/assets/css/tailwind.css

@@ -4,6 +4,12 @@
  *
  * 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;
 
@@ -17,7 +23,7 @@
   * .btn { ... }
   * .form-input { ... }
   *
-   * Or if using a preprocessor:
+  * Or if using a preprocessor or `postcss-import`:
   *
   * @import "components/buttons";
   * @import "components/forms";
@@ -26,6 +32,12 @@
  /**
   * 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;
 
@@ -38,8 +50,8 @@
   * .bg-pattern-graph-paper { ... }
   * .skew-45 { ... }
   *
-   * Or if using a preprocessor..
+  * Or if using a preprocessor or `postcss-import`:
   *
-   * @import "utilities/backgrond-patterns";
+  * @import "utilities/background-patterns";
   * @import "utilities/skew-transforms";
   */