
I wanted to toggle between Noise Cancellation and Transparency mode on my Airpods Pro easily from my keyboard. After some googling around and finding many applescript snippets that seemed to be outdated and no longer worked with the latest version of Mac OS, I discovered the app, [AirBuddy](https://v2.airbuddy.app/). It offers a few other features, but the main feature I wanted to use was the customizable keyboard shortcut for "[Switch listening modes](https://support.airbuddy.app/articles/how-to-change-listening-modes-using-airbuddy/)".

After setting an obscure keyboard shortcut (⌃⌥⇧⌘ + L), I set up a macro on my [mechanical keyboard](https://www.keychron.com/products/keychron-v6-qmk-custom-mechanical-keyboard) using the [VIA application](https://www.caniusevia.com/) for QMK keyboards and assigned it to a dedicated key that I don't use. Works like a charm!

The bonus was that I could do the same thing forcing a connection to my AirPods for those times where automatic switching doesn't work properly. Nice!


How I set up a keyboard macro on my Keychron V6 that switches between noise cancellation and transparency modes.

Controlling my Airpods from the comfort of my keyboard


Setting up your [Gridsome](https://gridsome.org/) project with [Tailwind CSS](https://tailwindcss.com) is extremely simple, thanks to [gridsome-plugin-tailwindcss](https://gridsome.org/plugins/gridsome-plugin-tailwindcss).

Make sure you've set up your Gridsome project by following the [excellent documentation](https://gridsome.org/docs/).

## Setting up the plugin

Install the plugin as a dev dependency. No need to install Tailwind CSS separately, it's comes along as a dependency:

```
npm install gridsome-plugin-tailwindcss --save-dev
```

Then add it to the plugins section of your config file:

```js
// ./gridsome.config.js

plugins: [
  {
    use: "gridsome-plugin-tailwindcss",
  },
];
```

By default, it will look for `tailwind.js` at the root of your project, but you can also specify a custom file path:

```js
// ./gridsome.config.js

plugins: [
  {
    use: "gridsome-plugin-tailwindcss",
    options: {
      config: "./path/to/config.js",
    },
  },
];
```

## Generate the Tailwind config file

Create a new `tailwind.js` file at the root of your project:

```
npx tailwind init
```

## Inject Tailwind into CSS

The last step to get Tailwind up and runnning is to inject it into your CSS using the `@tailwind` directive. An simple way to do this is to add it to the `<style>` tag of your default layout:

```
// ./src/layouts/Default.vue

<style>
@tailwind preflight;

@tailwind components;

@tailwind utilities;
</style>
```

That's it! You should now be able to start adding Tailwind classes throughout your Gridsome application.


Setting up your Gridsome project with Tailwind CSS is extremely simple, thanks to gridsome-plugin-tailwindcss.

Controlling my Airpods from the comfort of my keyboard

Setting Up A Gridsome Project With Tailwind CSS