With the release of v14 beta comes an updated backoffice. At a recent hackathon, I was motivated to take on a challenging project: developing a 'command menu' for the backoffice.
The feature aimed to add complexity and utility, albeit not strictly necessary. The premise was simple: allow editors to quickly access a command menu through a shortcut, facilitating faster navigation within the backoffice.
It's rather simple and somewhat buggy. My intention was to never have a polished off ready to release package, but more so, a proof of concept of touching all areas of the new backoffice as a "real-world" exercise on how to do things. You can see all the code for it here: https://github.com/Bakersbakebread/umbra-command-menu.
The structure of the code was utilising Kevin's incredible series: https://dev.to/kevinjump/series/26221. On the hackathon day, we talked about this template and once I had it - I was up and running in no time.
Tailwind, but, why?
I wanted to have something done and ready to use, I wanted to spend time in the new backoffice code figuring out Lit and how to register manifests and which files belong where - not writing actual 'feature' code.
I knew Tailwind had a large ecosystem, with ready-to-use 'components'. So instead of building the command menu myself with regular 'ol HTML & CSS, I took to Google and searched for one instead.
If you haven't used Tailwind CSS yet, it's a utility-first CSS framework that lets you write classes in your HTML and combine them together to build out a design.
We can see this in action if we just add a bg-blue-500 class to to change the background of our command menu. See the before line of code here
<div class="items-center justify-center p-2 md:p-12 lg:px-20 lg:py-36">
<div class="bg-blue-500 [...other classes]">
... removed for brevity
</div>
</div>
But How?
Well first of all, let's make sure we've Tailwind installed in our project by following https://tailwindcss.com/docs/installation/using-postcss.
We'll notice on Step 4 however, we need to import the tailwind directives into our CSS - but - how do we make them available to Lit throughout our files?
In a directory of your choosing (I used /shared
) add a file called tailwind.global.css
and paste the step 4 code inside of it:
@tailwind base;
@tailwind components;
@tailwind utilities;
Then let's create our Tailwind Mixin, create a new file called tailwindfactory.config.js
and paste the following code:
import { LitElement, unsafeCSS } from "@umbraco-cms/backoffice/external/lit";
import style from './tailwind.global.css?inline';
const tailwindElement = unsafeCSS(style);
export const TailwindElementMixin = (style) =>
class extends LitElement {
static styles = [tailwindElement, unsafeCSS(style)];
};
const element = TailwindElementMixin(style);
Now anywhere you want to use Tailwind, you need to pass it into a constructor like so:
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { TailwindElementMixin } from "../shared/tailwindfactory.element";
@customElement('commandmenu-commandmenu')
export class CommandMenu extends UmbElementMixin(TailwindElementMixin(styles)) {
@property({ type: String }) name = 'CommandMenu';
// ... removed for brevity
That's it 🎉
You've got all the usual goodness of tailwind config.
Top comments (0)