Tailwind CSS

Installation

Install Zappicon Tailwind CSS plugin using your project.

Free Version

npm install @zappicon/tailwind

Pro version

Create a .npmrc file in the root of your project and add the following lines:

.npmrc
@zappicon:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

replace YOUR_AUTH_TOKEN with your actual personal access token.

Then, install the pro version:

npm install @zappicon/tailwind-pro

Configuration

TailwindCSS v4

@plugin 'zappicon-tailwind';

/* with options */
@plugin 'zappicon-tailwind' {
  prefix: 'za';
  size: '1em';
  color: 'orange';
}

TailwindCSS v3

In your tailwind.config.js

const { zappicon } = require('zappicon-tailwind')

module.exports = {
  plugins: [
    zappicon({
      prefix: 'za',
      size: '1em',
      color: 'orange'
    })
  ]
}

Usage

You can use icon classes in your markup (HTML, JSX, etc.):

<i class="za-star-regular h-6 w-6 text-blue-500"></i>

Icon Styles (Variants)

Each icon comes in 5 styles:

Customization

Use Tailwind utilities to customize icon size, color, and more:

<i class="za-star-regular text-yellow-500"></i>
<i class="za-star-filled h-8 w-8 text-pink-600"></i>