uuid: - value: 9f6e27eb-33d2-4347-a1f0-b1293eb88c40 langcode: - value: en type: - target_id: daily_email target_type: node_type target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7 revision_timestamp: - value: '2025-05-11T09:00:24+00:00' revision_uid: - target_type: user target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849 revision_log: { } status: - value: true uid: - target_type: user target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849 title: - value: | hover + focus = hocus created: - value: '2023-12-20T00:00:00+00:00' changed: - value: '2025-05-11T09:00:24+00:00' promote: - value: false sticky: - value: false default_langcode: - value: true revision_translation_affected: - value: true path: - alias: /daily/2023/12/20/hover-focus-hocus langcode: en body: - value: |

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!

format: full_html processed: |

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!

summary: null field_daily_email_cta: { }