Package Exports

tailwindcss-triangle-after

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 (tailwindcss-triangle-after) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Triangle After Tailwind Plugin

Installation

Add this plugin to your project:

# Install via npm
npm install --save-dev tailwindcss-triangle-after

Usage

This plugin generates styles for CSS based triangles via ::after pseudo-elements.

The plugin accepts multiple objects where each key defines a class suffix for a triangle name. Triangle options are...

color: e.g. colors['blue']
direction: e.g. up, down, left or right
right: (optional / default 1rem) How far from the right of the parent should the pseudo-element be? e.g. 2rem.
top: (optional / default 50%) How far from the top of the parent should the pseudo-element be?
size: (in pixels) e.g. an array [width, height] or 9 for an equilateral triangle.

Here is the example for adding it to your project plugins

module.exports = {
  // ...
  plugins: [
    // ...
    require('./plugins/triangle-after')({
      triangles: {
        select: {
          color: colors['blue'],
          direction: 'down',
          size: [10, 6],
        },
        next: {
          color: colors['blue-darker'],
          direction: 'right',
          right: '2rem',
          top: '3rem',
          size: 12
        }
      },
    }),
  ],
}

This configuration would create the following classes ideal for using for customizing <select> elements and adding arrows to pagination links:

.triangle-after-select {
  position: relative;
}

.triangle-after-select::after {
  border-color: transparent;
  border-style: solid;
  content: "";
  height: 0;
  position: absolute;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  right: 1rem;
  border-top-color: #3490dc;
  border-width: 6px 5px 0 5px;
}

.triangle-after-next {
  position: relative;
}

.triangle-after-next::after {
  border-color: transparent;
  border-style: solid;
  content: "";
  height: 0;
  position: absolute;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  right: 2rem;
  border-left-color: #1c3d5a;
  border-width: 12px 0 12px 12px;
}

As per the tailwind plugin docs you can pass variants (responsive, hover, etc.) as a parameter.