Skip to content
This repository has been archived by the owner on Aug 28, 2020. It is now read-only.

Generate classes to easily order flex-items

License

Notifications You must be signed in to change notification settings

035media/tailwindcss-flexbox-order

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flexbox Order - TailwindCSS Plugin

npm version npm downloads Build Status

This plugin generates classes for ordering flexbox and grid items using order: #;.

Installation

Pull it in through npm:

npm install --save-dev tailwindcss-flexbox-order

Usage

To get going with some sensible defaults you don't have to pass any options.
Just add it to the plugins array of your Tailwind config.

plugins: [
  // Other plugins
  require('tailwindcss-flexbox-order')(),
],

By default the plugin generates the following classes, with all of their responsive variants:

.-order-1 { order: -1; }
.order-0  { order:  0; }
.order-1  { order:  1; }
.order-2  { order:  2; }
.order-3  { order:  3; }
.order-4  { order:  4; }
.order-5  { order:  5; }

Options

You can pass an object to override the default settings.

// Default options
{
  range: {
    from: -1,
    to: 5,
  },
  values: false,
  variants: ['responsive'],
}

range

Range takes an object with from and to keys with integer values and generates them and every number in between.

The default option is { from: -1, to: 5 }.

range: {
  from: -2,
  to: 2,
},
.-order-2 { order: -2; }
.-order-1 { order: -1; }
.order-0  { order:  0; }
.order-1  { order:  1; }
.order-2  { order:  2; }

Setting range to false disables range generation.

range: false,

values

Values can be an object with key/value pairs.
Your strings are automatically escaped.

The default option is false.

values: {
  'first': -999,
  'last': 999,
  '$p3ci@l': 1337,
}
.order-first { order: -999; }
.order-last  { order:  999; }
.order-\$p3ci\@l { order: 1337; }

Or it can take an array of integers.

values: [-10, 0, 10, 20],
.-order-10 { order: -10; }
.order-0   { order:   0; }
.order-10  { order:  10; }
.order-20  { order:  20; }

variants

Variants can be set to an array with any of the supported Tailwind variants.

The default option is ['responsive'].

variants: ['responsive', 'hover', 'focus', 'active', 'group-hover']

Upgrading from 0.1 or 0.2

Earlier versions took an array of integers as the first argument, and another array of variants as the second argument.

Starting at 1.0, all options should be passed as a plain object.

// OLD - 0.x
require('tailwindcss-flexbox-order')([-1, 1, 5, 10], ['responsive'])

// NEW - 1.x
require('tailwindcss-flexbox-order')({
    range: false,
    values: [-1, 1, 5, 10],
    variants: ['responsive'],
})

All versions will still generate the same output if no options are passed.

License

This project is licensed under the MIT License.