hover + focus = hocus
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:
const plugin = require("tailwindcss/plugin");
module.exports = plugin(({ addVariant }) => {
addVariant("hocus", ["&:hover", "&:focus"]);
});
Or, use the Tailwind CSS plugin I wrote.
Get more accessible websites and less duplication today!
- Oliver
