tailwindcss-custom-native weekly downloads statistics

🧩 Tailwind CSS Custom Native Utilities

This Tailwind CSS plugin allows you to write configuration for your own custom utility in the theme and variants section of your config as though it were actually part of the framework. Just define it with a single line in the plugins section!

This should allow you to finally kill off leftover CSS and inline styles that have no accompanying plugin-made or native utility. Although you can replace other plugins with this one, it's probably a good idea to use those instead because they're purpose-built and likely to create a better output.

💻 Installation

🛠 Basic usage

With this Tailwind configuration,

this CSS is generated:

Variants

When no variants are specified in the variants key of your config, no variants will be generated, as you saw above. (If you would prefer for ['responsive'] to be the default, I am open to changing it).

If you want variants (in the same config as above):

you get this additional CSS:

⚙️ Full configuration

This plugin expects configuration of the form

Where each parameter means:

• key (required, string) - The name of the key for your custom utility, as you wrote in the theme and variants section • property (optional, string) - The CSS property that your utility is for

When not specified, it defaults to kebab-casing (AKA hyphenating) the key. For example, key: 'animationTimingFunction' has corresponding property: 'animation-timing-function').

This parameter allows you to use a key that may be shorter than the property name, or completely different from it.

• rename (optional, string) - The prefix before each value name (from theme[key]) in the generated classes

When not specified, it defaults to kebab-casing (AKA hyphenating) the key. For example, key: 'mixBlendMode' has corresponding rename: 'mix-blend-mode').

If set to the empty string (''), then there is no prefix and each generated class is just the value name.

• addUtilitiesOptions (optional, object) - Extra options to pass to the addUtilities function call.

As of Tailwind 1.2.0, this just means the respectPrefix and respectImportant options

📚 Examples

Specify rename: '' so you can write blur-4 and grayscale instead of filter-blur-4 and filter-grayscale:

Any property named with a - in front will have that moved to the front of the generated class name, just like the native margin or z-index utilities do.

Let's say you want a section specifically for blur utilities, because they *really* have nothing to do with other kinds of CSS filters. Use 'blur' as the key and 'filter' as the property:

In practice, you will probably need more than one custom utility, so just add another to the list:

This plugin can piggyback off of other plugins, especially those that register new variants or are missing relevant utilities.

In this case, it is used to add some content utilities that have before and after pseudoselector variants, as provided by tailwindcss-pseudo:

😵 Help! I have a question

Create an issue and I'll try to help.

😡 Fix! There is something that needs improvement

Create an issue or pull request and I'll try to fix.

📄 License

MIT

*Repository preview image generated with GitHub Social Preview*

Description from the npm listing.