tailwindcss-order
v1.0.1
Published
A plugin for TailwindCSS that allows you to define the order of flex and grid CSS elements.
Downloads
5
Maintainers
Readme
TailwindCSS Order
This plugin allows you to make use of the order CSS property in a flex or grid container within TailwindCSS. It works great with the TailwindCSS grid plugin.
For more information about the order CSS property, see the MDN web docs on order CSS.
Installation
Add this plugin to your project:
# Install via NPM
npm install tailwindcss-order --save-dev
# Install via Yarn
yarn add tailwindcss-order -D
Usage
Once it is downloaded, open your tailwindcss config file. If this is pre-v1, it may be called tailwind.js. If it is based on v1 or later, it will be called tailwind.config.js.
Open your Tailwind configuration file and scroll down to where you see the plugins section.
Add require('tailwind-order')({ options }),
into the array like so:
plugins: [
require('tailwindcss-order')({
order: {
'-1': '-1',
'0': '0',
'1': '1',
'2': '2',
'3': '3',
},
variants: ['responsive'],
}),
]
This configuration would create the following classes (plus responsive variants):
.order--1 {
order: -1;
}
.order-0 {
order: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}