# 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](https://github.com/iconify/iconify/tree/main/plugins/tailwind) 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:

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

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

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

<pre class="language-javascript"><code class="lang-javascript">module.exports = {
    ...
<strong>    plugins: [
</strong>        ...
        addDynamicIconSelectors({
            overrideOnly: true
        })
    ]
</code></pre>

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

```css
@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%;
    }
}
```

## Using SwiperJS

1. Add reference to SwiperJS library inside index.html

```html
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js"></script>
```

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

```css
@layer base {
    swiper-container::part(bullet-active) {
        background-color: #FFFFFF;
        border-radius: 0.25rem;
        width: 1rem;
    }
}
```

## 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.

```javascript
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.

{% hint style="info" %}
Please check our package.json, tailwind.config.js, and input.css for reference. You can then adapt changes to your project files accordingly.
{% endhint %}
