@tailwindash/triangle

Tailwind plugin for building triangles with border attributes.

Table of Contents

• @tailwindash/triangle
  • Table of Contents
  • tailwindash
  • Installation
  • Quick Start
  • Documentation
    • Direction Abbreviation
    • Class Names
    • Sizing & Scaling
  • Customization
  • Changelog

tailwindash

This package is part of the @tailwindash family. For contributing guideline and more, refer to its readme.

Installation

1. Make sure you have tailwind setup for your project.

2. Install @tailwindash/triangle

   npm install -D @tailwindash/triangle

   pnpm add -D @tailwindash/triangle

   yarn add -D @tailwindash/triangle

3. Add plugin to tailwind config file

   /** @type {import("tailwindcss").Config } */
   const config = {
     plugins: [require('@tailwindash/triangle')],
   };
   
   module.exports = config;

Quick Start

See . For more customization, see below Documentation.

Documentation

Direction Abbreviation

| Direction | Abbreviation | | ------------ | ------------ | | top | t | | bottom | b | | left | l | | right | r | | top left | tl | | top right | tr | | bottom left | bl | | bottom right | br |

Class Names

| Class name | Values | Type | Group | Required | Description | | ---------------- | ------------------------------------------------------------ | --------- | --------- | -------- | ------------------------------- | | triangle | | component | | yes | base class | | triangle-... | one of {t, b, l, r, tl, tr, bl, br } | utility | direction | yes | placement direction | | triangle-... | as in tailwind's color | utility | color | no | color | | triangle-... | integer from 1 to 10, or as customized | utility | scale | no | see Scaling | | triangle-w-... | as in tailwind's width | utility | size | no | width | | triangle-h-... | as in tailwind's height | utility | size | no | height |

Sizing & Scaling

Depending on the direction, triangle will have the following default width & height

| Direction | Width | Height | | ------------------------ | -------- | -------- | | triangle-{t,b} | 1rem | 0.5rem | | triangle-{l,r} | 0.5rem | 1rem | | triangle-{tl,tr,bl,br} | 1rem | 1rem |

⚠️ Scaling is done by applying css's calc() to width and height, not transform: scale(...)

For example:

<div class="triangle triangle-t triangle-w-5 triangle-h-10 triangle-3"></div>
<!-- The calculation below assumes tailwind's default config -->
<!-- w-5 = 1.25rem -->
<!-- h-10 = 2.5rem -->
<!-- scaling factor = 3 -->
<!-- => triangle width = 1.25rem * 3 -->
<!-- => triangle height = 2.5rem * 3 -->

Below is the default support for scaling. Extend triangle if customization is needed (see Customization).

/** @type {import("tailwindcss").Config } */
const config = {
  theme: {
    triangle: {
      1: '1',
      2: '2',
      3: '3',
      4: '4',
      5: '5',
      6: '6',
      7: '7',
      8: '8',
      9: '9',
      10: '10',
    },
  },
};

Customization

This plugin respects your tailwind config, including prefixes.

For customization of the scaling factor, set or extend the triangle object. Make sure to have a valid factor for css's calc().

/** @type {import("tailwindcss").Config } */
const config = {
  theme: {
    extend: {
      triangle: {
        '1/2': '1/2',
        20: '20',
      },
    },
  },
  plugins: [require('@tailwindash/triangle')],
};

module.exports = config;

Changelog