@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