Skip to content

Clean class names for Tailwind CSS

In addition to addDynamicIconSelectors(), Iconify plugin for Tailwind CSS has another function: addCleanIconSelectors().

Function addCleanIconSelectors() creates icons with clean class names.

Usage

Open tailwind.config.js, import addCleanIconSelectors from @iconify/tailwind and add it to the list of plugins.

Example tailwind.config.js:

jsconst { addCleanIconSelectors } = require('@iconify/tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: ['./src/*.html'],
   plugins: [
       // Iconify plugin: clean version
       addCleanIconSelectors(['mdi-light:home']),
   ],
};

Example icon with clean class names:

html<span class="icon--mdi-light icon--mdi-light--home"></span>

Note that element has 2 class names:

  • "icon--mdi-light" that contains common CSS for all icons from icon set.
  • "icon--mdi-light--home" that contains only SVG for specific icon.

By putting common rules in "icon--mdi-light", there is less duplicate code in generated CSS, which is much cleaner.

Differences

Differences from addDynamicIconSelectors():

  • It creates cleaner class names.
  • Smaller CSS because reused code is assigned to common class name.
  • Much harder to set up: requires you to know the full list of icons you want to use.

Parameters

There are 2 parameters for addCleanIconSelectors():

  • List of icon names.
  • Options object, optional.

Icon names

Unlike addDynamicIconSelectors(), this plugin requires list of used icons.

This is needed because of Tailwind CSS limitations. For classes like "icon--mdi-light--home" it is not possible to create Tailwind CSS plugin that matches partial class, like all classes that start with "icon--". Such functionality is possible only for classes that include "-[something]", like "icon-[mdi-light--home]".

The value of the first parameter is an array of strings or comma separated list of names as a string. Supported strings:

  • Icon names, like "mdi-light:home".
  • Class names, like ".icon--mdi-light--home" or "icon--mdi-light--home" (with and without starting dot).

Note that if you are using class names, the format is always the same: "icon--" + icon set prefix + "--" + icon name, regardless of options.

Safelist or HTML

Unfortunately, listing icon names in plugin parameter is not enough. Tailwind CSS needs to see those class names used somewhere, or it ignores CSS generated by plugin. So you need to add class names to HTML that is scanned by Tailwind CSS or add it to safelist property of config, like other class names.

This could be a hassle, so that's one of the reasons why this plugin is listed only in advanced usage. Tailwind CSS developers aren't making things easy for plugin developers.

Options

The options parameter can be used to customise class names.

It has the following properties:

Multiple instances

You can add plugin to the plugin list in Tailwind CSS config multiple times, with different options or different list of icons.

Released under the Apache 2.0 License.