---
title: >
  hover + focus = hocus
pubDate: 2023-12-20
permalink: >-
  daily/2023/12/20/hover-focus-hocus
tags:
  - software-development
  - accessibility
  - css
  - tailwind-css
---

When creating accessible websites, as well as hover states for focusable elements, such as buttons, you also need to add focus styles that apply when users navigate the page using a keyboard and focusing on an element.

With Tailwind, that can mean a lot of duplication if your hover and focus states are similar or the same, as the same classes need to be added with both the `:hover` and `:focus` variants.

One of Tailwind's best features is its extensibility, which means I can create a new interaction state - `:hocus` - that works for both.

It's very easy to do by adding this code to your `tailwind.config.js` or `tailwind.config.ts` file:

```javascript
const plugin = require("tailwindcss/plugin");

module.exports = plugin(({ addVariant }) => {
  addVariant("hocus", ["&:hover", "&:focus"]);
});
```

Or, use [the Tailwind CSS plugin I wrote][plugin].

Get more accessible websites and less duplication today!

[plugin]: https://www.npmjs.com/package/tailwindcss-plugin-hocus-state