Be explicit in documentation that imports require a preprocessor

This commit is contained in:
Adam Wathan 2017-11-02 16:07:05 -04:00
parent 9263e3ac48
commit 84fd785ffc
3 changed files with 42 additions and 8 deletions

View File

@ -65,7 +65,7 @@ If you're using a preprocessor like Less, Sass, or Stylus, consider keeping your
@@tailwind utilities;
@import "custom-utilities";
@@import "custom-utilities";
```
## Making custom utilities responsive

View File

@ -176,7 +176,27 @@ Here's an example:
```less
@@tailwind preflight;
@import "components/buttons";
.btn {
@@apply .font-bold .py-2 .px-4 .rounded;
}
.btn-blue {
@@apply .bg-blue .text-white;
}
.btn-blue:hover {
@@apply .bg-blue-dark;
}
@@tailwind utilities;
```
If you're using a preprocessor like Less or Sass, consider keeping your components in separate files and importing them:
```less
@@tailwind preflight;
@@import "components/buttons";
@@import "components/forms";
/* Etc. */
@@tailwind utilities;
```

View File

@ -47,12 +47,19 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
@@tailwind preflight;
/**
* Here you would import any custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities can still
* 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:
*
* @@import "my-components/foo";
* @@import "my-components/bar";
* .btn { ... }
* .form-input { ... }
*
* Or if using a preprocessor:
*
* @@import "components/buttons";
* @@import "components/forms";
*/
/**
@ -65,8 +72,15 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
* Here you would add any custom utilities you need that don't come out of the
* box with Tailwind.
*
* @@import "my-utilities/background-images";
* @@import "my-utilities/skew-transforms";
* Example :
*
* .bg-pattern-graph-paper { ... }
* .skew-45 { ... }
*
* Or if using a preprocessor..
*
* @@import "utilities/backgrond-patterns";
* @@import "utilities/skew-transforms";
*/
```