Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benface/tailwindcss-layout
[DEPRECATED] Tailwind CSS plugin to generate layout utilities
https://github.com/benface/tailwindcss-layout
tailwindcss tailwindcss-plugin
Last synced: 15 days ago
JSON representation
[DEPRECATED] Tailwind CSS plugin to generate layout utilities
- Host: GitHub
- URL: https://github.com/benface/tailwindcss-layout
- Owner: benface
- Archived: true
- Created: 2018-05-06T19:11:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-13T15:29:53.000Z (over 5 years ago)
- Last Synced: 2024-08-01T17:21:36.930Z (3 months ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 118 KB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ⛔️ DEPRECATED
Tailwind CSS 1.0 (released in May 2019) now includes everything that this plugin used to offer except aspect ratio utilities. Therefore you should be using the smaller, more appropriately named [`tailwindcss-aspect-ratio`](https://github.com/webdna/tailwindcss-aspect-ratio) plugin instead. Thank you!
# Layout Tailwind CSS Plugin
## Installation
```bash
npm install tailwindcss-layout
```
## Usage
```js
// In your Tailwind CSS config
{
plugins: [
require('tailwindcss-layout')({
variants: ['responsive'],
offset: {
'full': '100%',
},
flexGrow: {
'2': '2',
'3': '3',
},
flexShrink: {
'2': '2',
'3': '3',
},
order: {
'1': '1',
},
aspectRatio: {
'1/2': 1/2,
'16/9': 16/9,
},
}),
],
}
```
This plugin generates the following utilities:
```css
/* configurable with the "offset" option */
.t-[name] {
top: [value];
}
.r-[name] {
right: [value];
}
.b-[name] {
bottom: [value];
}
.l-[name] {
left: [value];
}
/* configurable with the "flexGrow" option */
.flex-grow-[name] {
flex-grow: [value];
}
/* configurable with the "flexShrink" option */
.flex-shrink-[name] {
flex-shrink: [value];
}
/* configurable with the "order" option */
.order-[name] {
order: [value];
}
/* configurable with the "aspectRatio" option */
.aspect-ratio-16\/9 {
padding-bottom: 56.25%;
}
```