As tutogarden was already functional on the desktop, I did not pay much attention to the layout; but it was unusable on mobile. And so I rebuilt it from the ground up, and starting from the mobile-view first — from what I understand, this is common development practice for front-end, and it did indeed help.

The biggest struggle was getting a fixed header when scrolling content; it really took me a bit of time on a very unproductive afternoon. Then I realised that (mostly) all CSS is open — which is really nice for web programming, really! — and so I focused on assemblying the shortest possible layout that had a fixed header. Luckily, I had checked Andy Matushack's talk that had been published earlier in that day, and copied most of its layout. You can check it on the side: I'm particularly proud of having the filenames wrap instead of overflowing horizontally (using the break-all class on each filename), and the trick of using ⇲ before each filename, as not to confuse wrapped filenames with new files.

Later, I prepared Tailwind for production without any major struggles. When developing (and for a brief period in production) I had used its CDN, but this is not optimal. Thus, I followed the installation instructions and the further optimisations; ideally, this would be built in my continuous deployment process, but that shall be done later (remember: 80/20!).

I am exporting the result .css file in the static dir of my application (in case this might be of help as future documentation); then, collectstatic puts them all in the same STATICFILES dir I specified.

staticfiles
├── admin
│   ├── css
│   │   └── vendor
│   │       └── select2
│   ├── img
│   │   └── gis
│   └── js
│       ├── admin
│       └── vendor
│           ├── jquery
│           ├── select2
│           │   └── i18n
│           └── xregexp
└── throve

(both throve and admin have their own .js, .css, etc. files, but they do not appear in the output of tree).