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
features-functions-directives	Tailwind's CSS directives (@import, @theme, @utility, @variant) and functions (--alpha, --spacing)

Functions and Directives

Tailwind provides custom CSS directives and functions for working with your design system.

Directives

Directives are custom Tailwind-specific at-rules that offer special functionality.

@import

Import CSS files, including Tailwind:

@import "tailwindcss";

@theme

Define your project's design tokens:

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-brand-500: oklch(0.65 0.2 250);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

@source

Explicitly specify source files for class detection:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

@utility

Add custom utilities:

@utility tab-4 {
  tab-size: 4;
}

Custom utilities work with variants:

<div class="tab-4 hover:tab-8">Content</div>

@variant

Apply Tailwind variants to styles in your CSS:

.my-element {
  background: white;
  
  @variant dark {
    background: black;
  }
}

@custom-variant

Add custom variants:

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

<div class="theme-midnight:bg-black">Content</div>

@apply

Inline existing utility classes into custom CSS:

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}

.select2-search {
  @apply rounded border border-gray-300;
}

@reference

Import stylesheet for reference without including styles (useful for Vue/Svelte components):

<style>
  @reference "../../app.css";
  
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

Or reference Tailwind directly:

<style>
  @reference "tailwindcss";
  
  h1 {
    @apply text-2xl font-bold;
  }
</style>

Subpath Imports

Directives support subpath imports (like TypeScript path aliases):

{
  "imports": {
    "#app.css": "./src/css/app.css"
  }
}

<style>
  @reference "#app.css";
  
  h1 {
    @apply text-2xl font-bold;
  }
</style>

Functions

Tailwind provides build-time functions for working with colors and spacing.

--alpha()

Adjust the opacity of a color:

.my-element {
  color: --alpha(var(--color-lime-300) / 50%);
}

Compiles to:

.my-element {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

--spacing()

Generate spacing values based on your theme:

.my-element {
  margin: --spacing(4);
}

Compiles to:

.my-element {
  margin: calc(var(--spacing) * 4);
}

Useful in arbitrary values with calc():

<div class="py-[calc(--spacing(4)-1px)]">
  Content
</div>

Compatibility Directives

For compatibility with Tailwind CSS v3.x:

@config

Load a legacy JavaScript-based configuration:

@config "../../tailwind.config.js";

@plugin

Load a legacy JavaScript-based plugin:

@plugin "@tailwindcss/typography";

theme()

Access theme values using dot notation (deprecated):

.my-element {
  margin: theme(spacing.12);
}

Note: Prefer using CSS theme variables instead.

Key Points

Directives are Tailwind-specific at-rules
@theme defines design tokens
@utility creates custom utilities
@custom-variant creates custom variants
@apply inlines utilities into CSS
--alpha() and --spacing() are build-time functions
Compatibility directives support v3.x configs

3.6 KiB Raw Blame History