https://github.com/benface/tailwindcss-triangles

Tailwind CSS plugin to generate custom triangle components
https://github.com/benface/tailwindcss-triangles

Last synced: 3 months ago
JSON representation

Tailwind CSS plugin to generate custom triangle components

• Host: GitHub
• URL: https://github.com/benface/tailwindcss-triangles
• Owner: benface
• License: isc
• Created: 2019-02-17T23:36:43.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T01:39:25.000Z (over 1 year ago)
• Last Synced: 2024-03-20T09:23:00.921Z (3 months ago)
• Language: JavaScript
• Size: 1.04 MB
• Stars: 29
• Watchers: 3
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Lists

• awesome-stars - tailwindcss-triangles

README

        
# [BLACK LIVES MATTER](https://blacklivesmatters.carrd.co)

### Be aware. Be angry. Do better. Demand change. Show your support any way you can. Click on the link above to find protests, petitions, and other ways to help. DO NOT LET IT GO SILENT.

# Triangles Plugin for Tailwind CSS

## Requirements

This plugin requires Tailwind CSS 1.5 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (`npm install [email protected]`).

## Installation

```bash

npm install tailwindcss-triangles

```

## Usage

```js

// tailwind.config.js

module.exports = {

  theme: {

    triangles: { // defaults to {}

      'left': {

        direction: 'left',      // one of 'left', 'right', 'up', 'down', 'left-up', 'left-down', 'right-up', and 'right-down'

        size: '1em',            // defaults to defaultSize

        height: '0.5em',        // defaults to half the size; has no effect on the diagonal directions (e.g. 'left-up')

        color: 'currentColor',  // defaults to defaultColor

      },

    },

  },

  variants: {

    triangles: ['responsive'], // defaults to []

  },

  plugins: [

    require('tailwindcss-triangles')({

      componentPrefix: 'c-',        // defaults to 'c-'

      defaultSize: '1em',           // defaults to '1em'

      defaultColor: 'currentColor', // defaults to 'currentColor'

    }),

  ],

};

```

The above configuration would generate the following CSS:

```css

.c-triangle-left {

  width: 0;

  height: 0;

  border: 0;

  border-right: .5em solid currentColor;

  border-top: .5em solid transparent;

  border-bottom: .5em solid transparent;

}

@media (min-width: 640px) {

  .sm\\:c-triangle-left {

    width: 0;

    height: 0;

    border: 0;

    border-right: .5em solid currentColor;

    border-top: .5em solid transparent;

    border-bottom: .5em solid transparent;

  }

}

```