Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/alirazashaheb/tailwind-fan

A creative tailwindcss plugins for many usecases please follow documentation. Raise and ping issues if any.
https://github.com/alirazashaheb/tailwind-fan

plugings tailwind tailwindcss

Last synced: about 1 month ago
JSON representation

A creative tailwindcss plugins for many usecases please follow documentation. Raise and ping issues if any.

# 👉🏻 tailwind-fan

### tailwind css plugin for dynamic font-size, margin, padding & more

![logo_img](https://github.com/AliRazaShaheb/tailwind-fan/blob/main/tailwind-fan.png)

A plugin for the use of

1. text, margin & padding dynamically according to the screen viewport width.
2. pixel to rem convert classes for width, height, margin & padding

## 👉🏻 Installation

Install the plugin from npm:

```bash
# Using npm
npm install tailwind-fan

# Using Yarn
yarn add tailwind-fan
```

## 👉🏻 Configuration

Then add the plugin in tailwind.config.js do the setting to override the defaults:

```js
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},

// setting for tailwind-fan plugin

tailwindFan: {
//customization of minimum & maximum viewport / screen
screen: {
//maximum viewport/screen width
maxScreenSize: "", // default 44rem

//minimum viewport/screen width
minScreenSize: "", // default 30rem
},
remUnit: "", // default 16px
},
},

plugins: [
// add the plugin
require("tailwind-fan"),
],
};
```

## 👉🏻 Usage

```html

Tailwind-fan

Tailwind-fan Box

```

![example](https://github.com/AliRazaShaheb/tailwind-fan/blob/main/tailwind_fan_example.gif)