tailwind-short-class v1.2.1

tailwind-short-class

this package will help you to manage tailwind css long classes,

Installation

npm i tailwind-short-class

Usage

import TWSC from "tailwind-short-class";

You must use back-ticks ``

Example

const nav_bar_wrapper = TWSC(`
    flex
    flex-row
    min-h-50
    max-w-full
    bg-blue-500
`)

Real life Expample

import React from "react";

import TWSC from "tailwind-short-class";

export default function ComponentName() {
    return (
        <div className={nav_bar_wrapper}>
            <div className={nav_bar_left_side}>
                <div className={nav_bar_left_side_item}>1</div>
                <div className={nav_bar_left_side_item}>2</div>
                <div className={nav_bar_left_side_item}>3</div>
                <div className={nav_bar_left_side_item}>4</div>
                <div className={nav_bar_left_side_item}>5</div>
                <div className={nav_bar_left_side_item}>6</div>
            </div>
            <div className={nav_bar_right_side}>
                <div className={nav_bar_right_side_item}>135px * 33</div>
            </div>
        </div>
    );
}

const nav_bar_wrapper = TWSC(`
    flex
    flex-row
    min-h-50
    max-w-full
    bg-blue-500
`);

const nav_bar_left_side = TWSC(`
    flex
    flex-row
    w-1/2
    bg-green-500
    h-100
`);

const nav_bar_right_side = TWSC(`
    flex-row
    flex
    w-1/2
    bg-yellow-500
    h-100
    items-center
    justify-end
    mx-12
`);

const nav_bar_left_side_item = TWSC(`
    w-1/6
    flex
    justify-center
    items-center
`)

const nav_bar_right_side_item = TWSC(`
    w-12
`);

License

MIT