shortwings v0.0.4

Shortwings

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

Short classnames

With shortwings, 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 shortwings

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 "shortwings/main.css";

Configure tailwind.config.js

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

const shortwings = require("shortwings");

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

For tailwind.config.ts,

import type { Config } from "tailwindcss";
import { tailwindExtension } from "shortwings";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  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;

// Custom Varients Colors

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

const tailwindExtension = shortwings.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 "shortwings";

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;
  };
};

Classnames

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>

Dark Mode

If you are using nextjs, you should use next-themes and follow its instructions.