84 lines
3.2 KiB
YAML
84 lines
3.2 KiB
YAML
|
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: |
|
|||
|
|
<p>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.</p>
|
|||
|
|
|
|||
|
|
<p>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 <code>:hover</code> and <code>:focus</code> variants.</p>
|
|||
|
|
|
|||
|
|
<p>One of Tailwind's best features is its extensibility, which means I can create a new interaction state - <code>:hocus</code> - that works for both.</p>
|
|||
|
|
|
|||
|
|
<p>It's very easy to do by adding this code to your <code>tailwind.config.js</code> or <code>tailwind.config.ts</code> file:</p>
|
|||
|
|
|
|||
|
|
<pre><code class="javascript">const plugin = require("tailwindcss/plugin");
|
|||
|
|
|
|||
|
|
module.exports = plugin(({ addVariant }) => {
|
|||
|
|
addVariant("hocus", ["&:hover", "&:focus"]);
|
|||
|
|
});
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<p>Or, use <a href="https://www.npmjs.com/package/tailwindcss-plugin-hocus-state">the Tailwind CSS plugin I wrote</a>.</p>
|
|||
|
|
|
|||
|
|
<p>Get more accessible websites and less duplication today!</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
format: full_html
|
|||
|
|
processed: |
|
|||
|
|
<p>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.</p>
|
|||
|
|
|
|||
|
|
<p>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 <code>:hover</code> and <code>:focus</code> variants.</p>
|
|||
|
|
|
|||
|
|
<p>One of Tailwind's best features is its extensibility, which means I can create a new interaction state - <code>:hocus</code> - that works for both.</p>
|
|||
|
|
|
|||
|
|
<p>It's very easy to do by adding this code to your <code>tailwind.config.js</code> or <code>tailwind.config.ts</code> file:</p>
|
|||
|
|
|
|||
|
|
<pre><code class="javascript">const plugin = require("tailwindcss/plugin");
|
|||
|
|
|
|||
|
|
module.exports = plugin(({ addVariant }) => {
|
|||
|
|
addVariant("hocus", ["&:hover", "&:focus"]);
|
|||
|
|
});
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<p>Or, use <a href="https://www.npmjs.com/package/tailwindcss-plugin-hocus-state">the Tailwind CSS plugin I wrote</a>.</p>
|
|||
|
|
|
|||
|
|
<p>Get more accessible websites and less duplication today!</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
summary: null
|
|||
|
|
field_daily_email_cta: { }
|