Add daily email for 2023-12-20

hover + focus = hocus

src/content/daily-email/2023-12-20.md

@@ -0,0 +1,34 @@
+---
+title: >
+  hover + focus = hocus
+pubDate: 2023-12-20
+permalink: >
+  archive/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