Skip to content

// Tailwind v4 design tokens, theme layers, dark mode, and the Figma → Tailwind sync — one source of truth.

Tailwind Design Tokens ArchitectVerified Creator

git log --oneline --stat
HEAD
Stars
2k
Forks
75
Updated
May 23, 2026
repo --stat
  • stars

    2k

  • forks

    75

  • last update

    May 23, 2026

  • license

    MITv2.0.0

quickstart.sh
3 steps
  1. Install

    // Drops SKILL.md into ~/.claude/skills/

    $ claude skills add tailwind-design-tokens
  2. Invoke

    // Run from any project directory

    $ claude --skill tailwind-design-tokens "give my landing page a hero treatment"
  3. Or copy this from the README

    // extracted bash block

    $ claude skills add tailwind-design-tokens
    npx style-dictionary build --config style-dictionary.config.js
tailwind-design-tokens/
references
  • references/
  • SKILL.mdopen
  • README.mdopen
SKILL.md
readonly
name:
Tailwind Design Tokens Architect
slug:
tailwind-design-tokens
version:
v2.0.0
license:
MIT
author:
@tw-craft
categories:
tags:
#tailwind#design-tokens#style-dictionary#figma#theming
description:

Tailwind v4 design tokens, theme layers, dark mode, and the Figma → Tailwind sync — one source of truth.

README.md

tailwind-design-tokens/README.md
6 sections
Loading README…

$ cat reviews/

Reviews

// No reviews yet. Be the first.
Loading review form…