archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Update @apply docs to be explicit about preprocessor features

Browse Source
This commit is contained in:
Adam Wathan 2017-11-04 12:04:45 -04:00
parent 4b345d66f9
commit d1764b3fab
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/source/docs/functions-and-directives.blade.md
View File

@ -46,17 +46,32 @@ This is extremely useful when you find a common utility pattern in your HTML tha
}
```
Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mixin the plain version of that utility into the `:hover` pseudo-selector or a new media query:
Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mix in the plain version of that utility into the `:hover` pseudo-selector or a new media query:
```less
// Won't work:
.btn {
@@apply .block .bg-red;
@@apply .md:inline-block;
@@apply .hover:bg-blue;
}
// Do this instead:
.btn {
@@apply .block .bg-red;
}
.btn:hover {
@@apply .bg-blue;
}
@@screen md {
.btn {
@@apply .inline-block;
}
}
// Or if you're using Less or Sass:
.btn {
@@apply .block .bg-red;
&:hover {
@@apply .bg-blue;
}