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!
