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.6 KiB

Raw Blame History

name, description

name	description
core-preflight	Understanding Tailwind's Preflight base styles and how to extend or disable them

Preflight

Preflight is Tailwind's opinionated set of base styles that smooth over cross-browser inconsistencies.

Overview

Built on top of modern-normalize, Preflight is automatically injected when you import tailwindcss:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Key Resets

Margins Removed

All default margins are removed from headings, paragraphs, blockquotes, etc:

*,
::after,
::before {
  margin: 0;
  padding: 0;
}

This prevents accidentally relying on browser default margins that aren't part of your spacing scale.

Border Styles Reset

Borders are reset to make adding borders easier:

*,
::after,
::before {
  box-sizing: border-box;
  border: 0 solid;
}

Since the border utility only sets border-width, this ensures adding border always creates a solid 1px border using currentColor.

Headings Unstyled

All headings are unstyled by default:

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

Reasons:

Avoids deviating from your type scale
In UI development, headings should often be visually de-emphasized

Lists Unstyled

Ordered and unordered lists have no bullets or numbers:

ol, ul, menu {
  list-style: none;
}

Style lists using utilities:

<ul class="list-inside list-disc">
  <li>One</li>
  <li>Two</li>
</ul>

Accessibility: Add role="list" for screen readers when keeping lists unstyled:

<ul role="list">
  <li>One</li>
  <li>Two</li>
</ul>

Images Are Block-Level

Images and replaced elements are display: block:

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

Use inline utility if needed:

<img class="inline" src="..." alt="..." />

Images Are Constrained

Images and videos are constrained to parent width:

img, video {
  max-width: 100%;
  height: auto;
}

Override with max-w-none:

<img class="max-w-none" src="..." alt="..." />

Hidden Attribute

Elements with hidden attribute stay hidden:

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

Extending Preflight

Add base styles to the base layer:

@layer base {
  h1 {
    font-size: var(--text-2xl);
    font-weight: 600;
  }
  
  h2 {
    font-size: var(--text-xl);
    font-weight: 600;
  }
  
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}

Disabling Preflight

Import Tailwind components individually, omitting Preflight:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
/* @import "tailwindcss/preflight.css" layer(base); */ /* Omitted */
@import "tailwindcss/utilities.css" layer(utilities);

Working Around Third-Party Libraries

Some libraries may conflict with Preflight. Override Preflight styles:

@layer base {
  .google-map * {
    border-style: none;
  }
}

Key Points

Preflight normalizes cross-browser inconsistencies
Margins, borders, headings, and lists are reset
Images are block-level and constrained by default
Extend Preflight with @layer base
Disable by omitting the preflight import
Override Preflight styles when needed for third-party libraries

3.6 KiB Raw Blame History