skills.rest
ccediland
ccedilandCOMMUNITY
Explore all skills by this author →
GitHub

astro-css-tokens

Compiles DTCG design tokens into CSS variables and a Tailwind v4 @theme block for Astro sites.

Updated Jun 17, 2026
Search Tags:#design tokens#dark mode#astro#css variables#tailwind v4#style dictionary#dtcg
One-click install
npx skills add https://github.com/ccediland/web-stack-skills --skill astro-css-tokens-ccediland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-css-tokens
Source: https://github.com/ccediland/web-stack-skills/tree/main/plugin/skills/astro-css-tokens
Command: npx skills add https://github.com/ccediland/web-stack-skills --skill astro-css-tokens-ccediland

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires style-dictionary, tailwindcss, @tailwindcss/vite, astro, and includes references (resource) components.

What problem does it solve? Keeping design tokens consistent across Tailwind utilities and hand-authored CSS in an Astro project usually means duplicating values or locking tokens into one framework. This Skill sets up a single tokens.json source in DTCG format, compiled by Style Dictionary into flat CSS variables plus a Tailwind v4 @theme bridge, so tokens survive a framework swap and dark mode re-themes every consumer at once. ## Core Features & Use Cases - Three-layer token pipeline: base, semantic, and component token files compiled by Style Dictionary v5 into tokens.css (:root --ds-* variables) and theme.css (@theme inline bridge) via prebuild/predev npm hooks. - Astro 7 + Tailwind v4 wiring: verified @tailwindcss/vite plugin config, global stylesheet import order, no-flash dark-mode inline script, and scoped @apply via @reference. - Component authoring conventions: classes over style attributes under hash CSP, data-attribute variants, and a review checklist banning hardcoded design values. - Use Case: You are starting an Astro 7 site styled with Tailwind v4 and need dark mode plus a second CSS consumer. Use this Skill to author the three token files, generate the compiled CSS, and wire the Vite plugin without hitting the known OKLCH, hoisting, or silent-failure pitfalls. ## Quick Start Set up a Style Dictionary design-token pipeline for my Astro 7 and Tailwind v4 project with dark mode support.

Frequently Asked Questions about astro-css-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up design tokens with Tailwind v4 and Astro?▼

Author three DTCG token files (base, semantic, component), then run Style Dictionary v5 via a build.mjs script hooked into prebuild and predev. It emits tokens.css with :root variables and a theme.css @theme inline block that Tailwind v4 reads to generate utilities.

Style Dictionary vs hand-written @theme for Tailwind v4?▼

Hand-authored @theme is enough when Tailwind is the only consumer. Style Dictionary is justified when two or more independent systems read the compiled tokens, such as Tailwind utilities plus hand-authored CSS or a second app sharing the same token source.

Does @tailwindcss/vite work with Astro 7?▼

Yes, @tailwindcss/vite is the official path on Astro 7 and is what astro add tailwind installs. The old Astro 6 crash was caused by npm hoisting Vite 8 next to the plugin; on Astro 6 use a Vite 7 override or the @tailwindcss/postcss fallback.

Why does Style Dictionary convert my OKLCH colors to hex?▼

The color/css transform gamut-maps OKLCH to sRGB hex through Color.js. Use only name transforms (attribute/cti and name/kebab) and avoid transformGroup 'css', which includes color/css, to preserve OKLCH strings unchanged.

Why does my Tailwind v4 build succeed but generate no utilities?▼

The entry stylesheet must start with @import 'tailwindcss'. The v3 @tailwind directives no longer exist in v4; with them the build succeeds silently, no utility is generated, and the literal directive ships to the browser.

How do I add dark mode to a Tailwind v4 token pipeline?▼

Add a @custom-variant dark declaration and a [data-theme="dark"] block that overrides only the base --ds-* values; aliases re-resolve automatically. Set data-theme before first paint with an is:inline script reading localStorage and prefers-color-scheme.

Related Skills

Explore More Software Engineering Skills→
anthrilanthril
3

brand-guidelines

Compile upstream brand decisions into a Markdown brand guide for PDF handoff.

Official
Advanced
Layer-FiLayer-Fi
10

design-system

Enforces UI primitive conventions for React components built on react-aria-components.

Official
Intermediate
jmrplensjmrplens

csp-debug

Debug CSP and SRI violations for the jmrp.io project.

Community
Advanced
Stack-and-FlowStack-and-Flow
23

bootstrapping

Install Stack-and-Flow, import its CSS, and wire Tailwind v4 token overrides.

Official
Intermediate