mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Be explicit in documentation that imports require a preprocessor
This commit is contained in:
parent
9263e3ac48
commit
84fd785ffc
@ -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
|
||||
|
||||
@ -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;
|
||||
```
|
||||
|
||||
@ -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";
|
||||
*/
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user