35 lines
1.2 KiB
Markdown
35 lines
1.2 KiB
Markdown
---
|
||
title: >
|
||
hover + focus = hocus
|
||
pubDate: 2023-12-20
|
||
permalink: >-
|
||
daily/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
|