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

2.1 KiB

Raw Blame History

name, description

name	description
core-utility-classes	Understanding Tailwind's utility-first approach and how to style elements with utility classes

Utility Classes

Tailwind CSS uses a utility-first approach where you style elements by combining many single-purpose utility classes directly in your markup.

Overview

Instead of writing custom CSS, you compose designs using utility classes:

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg">
  <img class="size-12 shrink-0" src="/logo.svg" alt="Logo" />
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Benefits

Faster development - No need to come up with class names or switch between HTML and CSS files
Safer changes - Adding or removing utilities only affects that element
Easier maintenance - Find the element and change classes, no need to remember custom CSS
More portable - Copy entire UI chunks between projects easily
Smaller CSS - Utilities are reusable, so CSS doesn't grow linearly

Why Not Inline Styles?

Utility classes have important advantages over inline styles:

Design constraints - Choose from a predefined design system instead of magic numbers
State variants - Target hover, focus, and other states with variants like hover:bg-blue-600
Responsive design - Use responsive variants like md:flex for media queries

Utility Class Structure

Utility classes follow consistent naming patterns:

Property-value: bg-blue-500, text-lg, rounded-xl
Responsive: md:flex, lg:text-center
State variants: hover:bg-blue-600, focus:outline-2
Arbitrary values: top-[117px], bg-[#bada55]

Key Points

Every utility class is single-purpose and composable
Utilities can be combined with variants for conditional styling
Use complete class names - Tailwind scans your files as plain text
Avoid dynamically constructing class names with string interpolation

2.1 KiB Raw Blame History