# Overview

Flagger is a new Tailwind plugin, provides more flexibility to input type check and radio. Unlike the new peer variant that behaves as “group”, Flagger generates key-value pairs to be able to control each element.

# Peer

As TailwindCSS comes to v2.2, have a new convinent variant we can use, called peer.

# What is peer ?

peer is mean peer to peer, by this varient, thay can paired together, for example:

<div class="peer ...">
  I have `peer`<br>
  hover me !
</div>

<!-- 
  behind `peer`,if they are borthers,
  they can pair
-->
<div class="peer-hover:bg-blue-300 ...">
  I have `peer-hover:`
</div>

But, if peer-{action} variant and peer not borther or not behind the peer, will not have effact.

<!-- no effact, because not behind `peer` -->
<div class="peer-hover:bg-red-300 ...">
  I have `peer-hover:`
</div>

<div class="peer ...">
  I have `peer`<br>
  hover me !
</div>

<div>
  <!-- behind `peer`, but not borther -->
  <div class="peer-hover:bg-blue-300 ...">
    I have `peer-hover:` too
  </div>
</div>

So, Flagger resolved this problem. Let we see the examples.

# Flagger

Flagger have 3 default variants for you to use, and it support to pair item that is a child of border, not only the elements behind itself.

The situation of example2 in peer section, change to use flag it would works, for example:

<!-- no effact, because not behind `peer` -->
<div class="pair-1-hover:bg-red-300 ...">
  I have `peer-hover:`
</div>

<div class="pair-1 ...">
  I have `peer`<br>
  hover me !
</div>

<div>
  <!-- behind `peer`, but not borther -->
  <div class="pair-1-hover:bg-blue-300 ...">
    I have `peer-hover:` too
  </div>
</div>

and there 3 default variants are not all, you also can add your new flag, see costumizing.

# Installation

# with npm
npm install -D tailwind-flagger

# with yarn
yarn add -D tailwind-flagger

after installed, import to your tailwind.config.js:

+ const flagger = require('tailwindcss-flagger')

  module.exports = {
    purge: [],
    theme: {
      extend: {},
    },
    plugins: [
      ...
+     flagger
      ...
    ],
  }

# Usage

WIP

# Costumizing

WIP