From 0b1d1a2645b99ad2f1e8c1d37d38553e6a620c9a Mon Sep 17 00:00:00 2001 From: Emil Tholin Date: Wed, 7 Mar 2018 15:09:47 +0100 Subject: [PATCH] Document the function prefix feature --- source/docs/configuration.blade.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/source/docs/configuration.blade.md b/source/docs/configuration.blade.md index bc9d9bc9cfcb..774accd686a1 100644 --- a/source/docs/configuration.blade.md +++ b/source/docs/configuration.blade.md @@ -228,6 +228,24 @@ For example, you could add a `tw-` prefix by setting the `prefix` option like so } ``` ++You can also pass a function to the `prefix` option if you need more fine-grained control: + +```js +{ + // ... + options: { + prefix: function (selector) { + if (selector === '.container') { + return 'tw-' + } + + return '' + }, + // ... + } +} +``` + It's important to understand that this prefix is added to the beginning of each *utility* name, not to the entire class name. That means that classes with responsive or state prefixes like `sm:` or `hover:` will still have the responsive or state prefix *first*, with your custom prefix appearing after the colon: