Umbraco Bellissima & Tailwind
Tags: umbraco, cms, opensource, tailwindcss
Published: 2024-03-30 11:57:05

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](https://tailwindcss.com/) 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](https://github.com/Bakersbakebread/umbra-command-menu/blob/b7e2669046ee78f95df116af9f6af4eb762f03d5/CommandMenu.Client/assets/src/command-menu/index.ts#L87)

```html
<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>
```

![Screenshot of the blue command menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d1cvl0swhc3h0tg509g.png)

## 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:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
_[This is where I put mine](https://github.com/Bakersbakebread/umbra-command-menu/blob/main/CommandMenu.Client/assets/src/shared/tailwind.global.css)_


Then let's create our Tailwind Mixin, create a new file called `tailwindfactory.config.js` and paste the following code:

```ts
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](https://github.com/Bakersbakebread/umbra-command-menu/blob/main/CommandMenu.Client/assets/src/shared/tailwindfactory.element.ts)_


Now anywhere you want to use Tailwind, you need to pass it into a constructor like so:

```ts
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](https://github.com/Bakersbakebread/umbra-command-menu/blob/main/CommandMenu.Client/assets/src/command-menu/index.ts)_

That's it 🎉 

You've got all the usual goodness of [tailwind config](https://github.com/Bakersbakebread/umbra-command-menu/blob/main/CommandMenu.Client/assets/tailwind.config.js).