Short-wings NPM

short-wings

Ready-made Tailwindcss classnames for Buttons, Cards, Alerts, Flex, Headings, (Layout)

Short classnames

With short-wings, Your

<button
  classname="px-btnXmd py-btnYmd focus:outline-none focus:ring-4 cursor-pointer hover:brightness-hover text-primary-on bg-primary-default border border-primary-default focus:ring-primary-default/50"
>
  Button
</button>

can be like this

<button classname="btn btn-primary">Button</button>

Installation

npm install short-wings

Install Tailwindcss if you don't already have it

npm install tailwindcss

In your src/app/layout.tsx file or top level component, import css

import "short-wings/dist/main.css";

Configure `tailwind.config.js`

Don't forget to configure tailwnd.config.js file.

const shortwings = require("short-wings");

module.exports = {
  content: ["./src/**/*.{js,jsx,tsx}"],
  theme: { extend: shortwings.tailwindExtension },
  plugins: [],
  darkMode: "class",
};

For tailwind.config.ts,

import type { Config } from "tailwindcss";
import { tailwindExtension } from "short-wings";

const config: Config = {
  content: ["./src/**/*.{js,jsx,tsx}"],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      ...tailwindExtension,
    },
  },
  plugins: [],
};
export default config;

How to use

Button

btn
- btn-{varient}
- btn-outline-{varient}
- btn-text-{varient}
- btn-link-{varient}
- disabled
- disabled-{varient}
- loading-{varient}

<button classname="btn btn-primary (disabled)">Contain</button>
<button classname="btn-sm btn-outline-primary (disabled-primary)">
  Outline
</button>
<button classname="btn-pill-lg btn-text-primary (disabled)">Text</button>
<button classname="btn-link-primary (disabled)">Contain</button>
<div classname="loading-primary" />

Card & Alert

card
- card-{varient}
- card-title
- card-subtitle
alert
- alert-{varient}

<div classname="card card-primary">lorem</div>
<div classname="card-sm card-primary">lorem</div>
<div classname="card-lg card-primary">lorem</div>
<div classname="alert alert-primary">lorem</div>

Text

text (For normal text)
emp (For bold text)
h1, h2, h3, h4, h5, h6

// text = @apply text-dark dark:text-light
<body classname="text"></body>

Flex Row

flex-center
flex-between
flex-start
flex-end
flex-top

Layout

I don't know I should write Layout. They need javascript.

navbar
- navbar-logo
article
side-bar-drawer // Need to write your own Javascript
side-bar-3
main

<body>
  <nav classname="navbar">
    <div classname="navbar-logo">Logo</div>
  </nav>
  <main classname="main">
    <aside classname="side-bar-drawer">Drawer Side Bar</aside>
    <article classname="article">Main Article</article>
    <aside classname="side-bar-3">Right Side Bar</aside>
  </main>
</body>

If No right side bar, add width to article

<article classname="article lg:w-9/12">Main Article</article>

Custom Colors

// Custom Varients Colors

const colors = require("tailwindcss/colors");

const tailwindExtension =
  short -
  wings.createTailwindExtension({
    primary: {
      50: "color-value",
      100: "color-value",
      200: "color-value",
      300: "color-value",
      400: "color-value",
      500: "color-value",
      600: "color-value",
      700: "color-value",
      800: "color-value",
      900: "color-value",
      950: "color-value",
    },
    // Or you can do this
    secondary: colors.indigo,
    // tertiary: ...
    // success: ...
    // warning: ...
    // danger: ...
    // info: ...
  });

Custom Extend

Using typescript is better.

Type of tailwindExtension

import type { Extend } from "short-wings";

type Extend = {
  colors?: {
    primary?: {
      default?: string;
      on?: string;
      text?: Theme;
      border?: Theme;
      background?: Theme;
    };
    // secondary?: same as primary;
    // tertiary?: same as primary;
    // success?: same as primary;
    // warning?: same as primary;
    // danger?: same as primary;
    // info?: same as primary;
    body?: { dark?: string; light?: string };
    border?: { dark?: string; light?: string };
    text?: {
      emphasis?: { dark?: string; light?: string };
      normal?: { dark?: string; light?: string };
    };
  };
  brightness?: { hover?: string; disabled?: string };
  borderWidth?: {
    divider?: string;
    btn?: string;
    card?: string;
  };
  borderRadius?: {
    btn?: string;
    card?: string;
  };
  spacing?: {
    btnXsm?: string;
    btnXmd?: string;
    btnXlg?: string;
    btnXpill?: string;
    btnYsm?: string;
    btnYmd?: string;
    btnYlg?: string;
    btnYpill?: string;
    cardXsm?: string;
    cardXmd?: string;
    cardXlg?: string;
    cardYsm?: string;
    cardYmd?: string;
    cardYlg?: string;
  };
};

Default Tailwindcss extension

{
  "spacing": {
    "btnXsm": "12px",
    "btnXmd": "14px",
    "btnXlg": "16px",
    "btnXpill": "18px",
    "btnYsm": "4px",
    "btnYmd": "6px",
    "btnYlg": "10px",
    "cardXsm": "8px",
    "cardXmd": "12px",
    "cardXlg": "16px",
    "cardYsm": "8px",
    "cardYmd": "12px",
    "cardYlg": "16px"
  },
  "brightness": { "hover": "0.88", "disabled": "0.69" },
  "borderWidth": { "divider": "1px", "btn": "1px", "card": "1px" },
  "borderRadius": { "btn": "6px", "card": "8px" },
  "colors": {
    "primary": {
      "default": "#1d4ed8",
      "on": "#eff6ff",
      "text": { "light": "#1d4ed8", "dark": "#3b82f6" },
      "background": { "light": "#bfdbfe", "dark": "#1e3a8a" },
      "border": { "light": "#60a5fa", "dark": "#1e40af" }
    },
    "secondary": {
      "default": "#334155",
      "on": "#f8fafc",
      "text": { "light": "#334155", "dark": "#64748b" },
      "background": { "light": "#e2e8f0", "dark": "#0f172a" },
      "border": { "light": "#94a3b8", "dark": "#1e293b" }
    },
    "tertiary": {
      "default": "#404040",
      "on": "#fafafa",
      "text": { "light": "#404040", "dark": "#737373" },
      "background": { "light": "#e5e5e5", "dark": "#171717" },
      "border": { "light": "#a3a3a3", "dark": "#262626" }
    },
    "success": {
      "default": "#15803d",
      "on": "#f0fdf4",
      "text": { "light": "#15803d", "dark": "#22c55e" },
      "background": { "light": "#bbf7d0", "dark": "#14532d" },
      "border": { "light": "#4ade80", "dark": "#166534" }
    },
    "warning": {
      "default": "#a16207",
      "on": "#fefce8",
      "text": { "light": "#a16207", "dark": "#eab308" },
      "background": { "light": "#fef08a", "dark": "#713f12" },
      "border": { "light": "#facc15", "dark": "#854d0e" }
    },
    "danger": {
      "default": "#b91c1c",
      "on": "#fef2f2",
      "text": { "light": "#b91c1c", "dark": "#ef4444" },
      "background": { "light": "#fecaca", "dark": "#7f1d1d" },
      "border": { "light": "#f87171", "dark": "#991b1b" }
    },
    "info": {
      "default": "#4338ca",
      "on": "#eef2ff",
      "text": { "light": "#4338ca", "dark": "#6366f1" },
      "background": { "light": "#c7d2fe", "dark": "#312e81" },
      "border": { "light": "#818cf8", "dark": "#3730a3" }
    },
    "text": {
      "emphasis": { "light": "#000", "dark": "#fff" },
      "normal": { "light": "#262626", "dark": "#e5e5e5" }
    },
    "body": { "light": "#e5e5e5", "dark": "#262626" },
    "border": { "light": "#a3a3a3", "dark": "#525252" }
  }
}