Better explanation for using tailwind with postcss-import

Manual cherry-pick ad44fae29f
This commit is contained in:
dotnetCarpenter 2017-11-13 20:25:37 +01:00
parent 7b7f3a104e
commit 4f6cd949a1

View File

@ -4,42 +4,54 @@
* *
* You can see the styles here: * You can see the styles here:
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css * 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; @tailwind preflight;
/** /**
* Here you would add any of your custom component classes; stuff that you'd * 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 * want loaded *before* the utilities so that the utilities could still
* override them. * override them.
* *
* Example: * Example:
* *
* .btn { ... } * .btn { ... }
* .form-input { ... } * .form-input { ... }
* *
* Or if using a preprocessor: * Or if using a preprocessor or `postcss-import`:
* *
* @import "components/buttons"; * @import "components/buttons";
* @import "components/forms"; * @import "components/forms";
*/ */
/** /**
* This injects all of Tailwind's utility classes, generated based on your * This injects all of Tailwind's utility classes, generated based on your
* config file. * config file.
*/ *
@tailwind utilities; * 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 * Here you would add any custom utilities you need that don't come out of the
* box with Tailwind. * box with Tailwind.
* *
* Example : * Example :
* *
* .bg-pattern-graph-paper { ... } * .bg-pattern-graph-paper { ... }
* .skew-45 { ... } * .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"; * @import "utilities/skew-transforms";
*/ */