From 142fd720181b8757bd155b5cede170dcb6b55516 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Dec 2023 17:48:10 +0000 Subject: [PATCH] Add daily email for 2023-12-20 hover + focus = hocus --- src/content/daily-email/2023-12-20.md | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/content/daily-email/2023-12-20.md diff --git a/src/content/daily-email/2023-12-20.md b/src/content/daily-email/2023-12-20.md new file mode 100644 index 000000000..424ddd19e --- /dev/null +++ b/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