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!
