Tailfly

Its a tailwindcss plugin for managing multiple themes in a website.

Installation

Install from npm:

npm install tailfly -D

Add the plugin to your tailwind.config.js file:

import Tailfly from "tailfly";
...

  plugins: [
    Tailfly({
     ...
    })

...

...

  plugins: [
    require("tailfly")({
     ...
    })

...

Usage

Adding colors

  ...
    Tailfly({
      def: {
        primary: ["#fff", "#0070f3"],
        brand: ["skyblue", "pink"],
      }
      ...
    })
  ...

Defining modes

  ...
    Tailfly({
      def: {
       modes: ['light', '!dark', "zela"], //default ["light","dark"] 
  ...

You can define multiple theme modes.

! : This symbol is used define the default theme mode [ Index 0 is default if not specified ].

Defining CSS Properties

CSS properties can be defined in the inf object inside def object. see below example:

  ...
    Tailfly({
      def: {
        circle: ['4rem', '6rem'],
        borderW: ['4px', '2px'],
        inf: {
          circle: "borderRadius",
          borderW: "borderWidth"
        }
  ...

Dark Mode

  ...
    Tailfly({
      def: {
        ...
      },
      darkMode: ["selector", "[class*='$']"]
    })
  ...

$: This symbol is used to define theme modes.

Note: DarkMode option is well described by tailwindcss.

Dynamic Mode

This option is used for matching system theme.

  ...
    Tailfly({
      def: {
        dynamic: "system" // true | string,
  ...

String value will act as theme mode and true value will act as default theme mode. This is similar to media in tailwindcss.

Note: Work only for dark & light theme mode.

Animations

Tailfly ship an animation library. animate.css is very popular library for animations. All animation of this library can be used using Tailfly. Explore animate.css for demo's and other stuff.

Usage

-> animation-[animation_name]

exp: 
     <div className="animation-rubberBand"></div>