@tailwindash/triangle NPM

@tailwindash/triangle

Tailwind plugin for building triangles with border attributes.

@tailwindash/triangle

`tailwindash`

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

Installation

Make sure you have tailwind setup for your project.

Install @tailwindash/triangle

npm install -D @tailwindash/triangle

pnpm add -D @tailwindash/triangle

yarn add -D @tailwindash/triangle

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;