---
title: "Order, Tailwind, DRY"
date: 2024-12-14
tags:
- post
- python
- javascript
---
(Order in the CSS rule sense, not the metaphysical sense.)
The time has come to begin exfiltrating some higher-traffic, higher-leverage parts of Buttondown's admin UI away from the autogenerated Django admin and into some more bespoke components.
Take, for instance, this rather grisly (but useful) inline admin table:
This contains useful information but is annoying to parse. It gets replaced with the following HTML, all still governed by Django and a wallop of Tailwind [^1]:
draft
about_to_send
in_flight
sent
It's a trivial thing, but lets me pull out a new toy that I learned from [Mary](https://mary.my.id/) a few weeks back: [`order`](https://tailwindcss.com/docs/order), which lets you re-arrange the rendering order of elements in a `flex` container irrespective of their original order.
For instance, consider the following:
```html
world
hello
```
This, as you might expect, renders as:
world
hello
Where this gets really useful is composition with `groups`. Consider the following:
```html
```
This renders, unexcitingly, as:
But! Add a tiny sprinkle of `group-last:`
```html
```
And you get:
Obviously, that is a lot of HTML to write for a very simple outcome. There are a bunch of ways you could reduce this. Why so much repetition? Why specify `group-last` for every node when you _know_ it's going to be the last one?
Because in reality, the above HTML is actually, in Django, a pure and concise `for` loop:
```html
{\% for item in items \%}
{\% endfor \%}
```
Which suddenly looks much more pleasant and maintainable than its conditionally-rendered alternative:
```html
{\% for item in items \%}
{\% endfor \%}
```
[^1]: Not mobile friendly, I'm afraid! Not exactly a pressing concern for the admin site at the moment.