Usage

Using Cards

As Tailwind is a utility-first CSS framework, all you need is to COPY & PASTE the HTML structure of the cards provided in index.html, into your Tailwind project.

Each card is self-contained in an <article> element. You will need to copy this <article> element for usage.

Using Iconify Icons

For the icons, we have used Iconify.Design library as a Tailwind plugin. If you wish to use these icons in your own Tailwind project, you will need to follow the steps below:

1. Inside your package.json, add the following dependencies:

"devDependencies": {
        "@iconify/json": "^2.2.118",
        "@iconify/tailwind": "^0.1.3"
}

1. Inside your tailwind.config.js, add the following:

const {addDynamicIconSelectors} = require('@iconify/tailwind');

module.exports = {
    ...
    plugins: [
        ...
        addDynamicIconSelectors({
            overrideOnly: true
        })
    ]

1. Inside your input.css, add the following:

@layer base {
    .iconify {
        display: inline-block;
        width: 1em;
        height: 1em;
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
}

Extending Tailwind Colors

We have extended the default Tailwind Colors, and added primary color class aliased for blue. Most probably, you will be using primary, secondary, warning, info, danger classes in your HTML for colors. We have added this so that our cards can adapt to the primary color of your project. If you are not using such classes, then you can replace the primary class in HTML with any of the Tailwind color classes.

const colors = require('tailwindcss/colors');

module.exports = {
    ...
    theme: {
        extend: {
            colors: {
                primary: colors.blue
            }
        }
    }
}

Other than these, you don't need to make any special changes in your Tailwind project.

Please check our package.json, tailwind.config.js, and input.css for reference. You can then adapt changes to your project files accordingly.