Package Exports

@tailwindash/triangle
@tailwindash/triangle/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tailwindash/triangle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

JSPM