https://github.com/bradlc/tailwindcss-inset

top, right, bottom, and left utilities for Tailwind CSS
https://github.com/bradlc/tailwindcss-inset

tailwind tailwindcss tailwindcss-plugin

Last synced: 26 days ago
JSON representation

top, right, bottom, and left utilities for Tailwind CSS

• Host: GitHub
• URL: https://github.com/bradlc/tailwindcss-inset
• Owner: bradlc
• Created: 2018-08-22T19:27:57.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-22T19:31:17.000Z (about 6 years ago)
• Last Synced: 2024-09-28T13:42:21.014Z (about 1 month ago)
• Topics: tailwind, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 1000 Bytes
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tailwindcss-inset

> `top`, `right`, `bottom`, and `left` utilities for Tailwind CSS

## Installation

```bash

$ npm install --save-dev tailwindcss-inset

```

Then add `tailwindcss-inset` to your Tailwind configuration:

```js

"plugins": [

  require('tailwindcss-inset')({

    variants: ['responsive'], // default: []

    insets: {

      '1/2': '50%',

      'full': '100%'

    }

  })

]

```

## Example

#### Configuration:

```js

{

  variants: [],

  insets: {

    'full': '100%'

  }

}

```

#### Generated utilities:

```css

.inset-full {

  top: 100%;

  right: 100%;

  bottom: 100%;

  left: 100%;

}

.inset-t-full {

  top: 100%;

}

.inset-r-full {

  right: 100%;

}

.inset-b-full {

  bottom: 100%;

}

.inset-l-full {

  left: 100%;

}

```