83 lines
3.2 KiB
YAML
83 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: { }
|