Umbraco Bellissima & Tailwind

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;

This is where I put mine

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);

This is where I put mine

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

This is how I did it in mine

That's it 🎉

You've got all the usual goodness of tailwind config.