Files

zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding

- Created `openspec-ff-change` skill for fast-forward artifact creation.
- Introduced `openspec-new-change` skill for structured change creation.
- Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow.
- Added `openspec-sync-specs` skill for syncing delta specs to main specs.
- Implemented `openspec-verify-change` skill for verifying implementation against change artifacts.
- Updated `.gitignore` to exclude OpenSpec generated files.
- Added `skills-lock.json` to manage skill dependencies.

2026-03-13 13:18:03 +08:00

3.4 KiB

Raw Blame History

name, description

name	description
core-variants	Using variants to apply utilities conditionally based on states, pseudo-classes, and media queries

Variants

Variants let you apply utility classes conditionally based on states, pseudo-classes, pseudo-elements, media queries, and more.

Overview

Add a variant prefix to any utility class to apply it conditionally:

<!-- Apply bg-sky-700 only on hover -->
<button class="bg-sky-500 hover:bg-sky-700">Save</button>

Variants can be stacked to target specific situations:

<!-- Dark mode, medium breakpoint, on hover -->
<button class="dark:md:hover:bg-fuchsia-600">Save</button>

Pseudo-Class Variants

Interactive States

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-violet-500 active:bg-violet-700">
  Save changes
</button>

Common interactive variants:

hover: - :hover pseudo-class
focus: - :focus pseudo-class
active: - :active pseudo-class
focus-visible: - :focus-visible
focus-within: - :focus-within
visited: - :visited

Structural Variants

<ul>
  <li class="py-4 first:pt-0 last:pb-0">Item 1</li>
  <li class="py-4 first:pt-0 last:pb-0">Item 2</li>
  <li class="py-4 first:pt-0 last:pb-0">Item 3</li>
</ul>

Common structural variants:

first: - :first-child
last: - :last-child
odd: - :nth-child(odd)
even: - :nth-child(even)
only: - :only-child

Form States

<input class="border-gray-300 required:border-red-500 invalid:border-red-500" />

Common form variants:

required: - :required
optional: - :optional
invalid: - :invalid
valid: - :valid
disabled: - :disabled
enabled: - :enabled
checked: - :checked

Pseudo-Element Variants

<input class="placeholder:text-gray-400 before:content-['*'] after:content-['required']" />

Common pseudo-element variants:

before: - ::before
after: - ::after
placeholder: - ::placeholder
selection: - ::selection
first-line: - ::first-line
first-letter: - ::first-letter

Media Query Variants

Responsive Variants

<div class="text-sm md:text-base lg:text-lg">Responsive text</div>

Dark Mode

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Content
</div>

By default uses prefers-color-scheme, but can be customized to use a class or data attribute.

Reduced Motion

<div class="transition-all motion-reduce:transition-none">
  Animated content
</div>

Attribute Selector Variants

<!-- RTL support -->
<div class="text-left rtl:text-right">Content</div>

<!-- Open state -->
<details class="[&[open]]:bg-gray-100">Details</details>

Arbitrary Variants

Use arbitrary variants for custom selectors:

<ul>
  <li class="lg:[&:nth-child(-n+3)]:hover:underline">Item</li>
</ul>

Child Selector Variants

<div class="[&>*]:mb-4 [&>*:last-child]:mb-0">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

Key Points

Variants prefix utilities to apply them conditionally
Variants can be stacked: dark:md:hover:bg-blue-600
Use variants for states, pseudo-classes, media queries, and more
Arbitrary variants enable custom selector patterns
Child selector variants target descendant elements

3.4 KiB Raw Blame History