Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

src/tailwind-preset.cjs drifted from tailwind-preset.ts — missing `info` and `chart` color scales

Open Beginner friendly
  • Is something wrong?
#628 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
tailwindcss, typescript
Domain
design, frontend

Research direction

Compare the info and chart color scales in src/tailwind-preset.ts with src/tailwind-preset.cjs, and check the border-info/40 safelist entry near line 603 of the .cjs file. The quick fix is to copy the missing scales into the .cjs. Done means node -e "require('./src/tailwind-preset.cjs')" lists info and chart under theme.extend.colors, and the resolved theme matches the compiled .ts output. Confirm the choice between the quick copy and generating the .cjs from the .ts with the maintainers before choosing the durable option.

Written by the indexing model from the issue text.

Description

Problem

There are two copies of the Tailwind preset:

  • src/tailwind-preset.ts — source of truth. tsup compiles it to dist/tailwind-preset.cjs/.js, which is what package consumers get via the ./tailwind-preset export. Complete.
  • src/tailwind-preset.cjs — a hand-maintained CJS twin used only by this repo's own tailwind.config.js (presets: [require('./src/tailwind-preset.cjs')]) for dev/Storybook builds.

The info and chart color scales were added to the .ts in 5ef64bff (2026-01-24, Card expansion) but never mirrored into the .cjs, which has never had them.

Impact

  • Consumers: none. The published preset is built from the .ts and is correct.
  • In-repo dev/Storybook builds: the preset doesn't define info-* / chart-* colors, so those utilities aren't generated from the preset. Notably the .cjs safelist even includes border-info/40 (~line 603) for a color it doesn't define.

Found while generating the mieweb-ui-tokens skill for #545 — the generator deliberately imports src/tailwind-preset.ts (via Node type stripping) specifically to avoid this drifted copy.

Fix options

  1. Quick: copy the info and chart scales from the .ts into the .cjs.
  2. Durable (preferred): eliminate the second copy — generate src/tailwind-preset.cjs from the .ts (or point tailwind.config.js at a build output) so it can't drift again. scripts/rtl-scan.mjs also reminds contributors to update "BOTH" files, which is the smell.

Verify

  • node -e "const p=require('./src/tailwind-preset.cjs'); console.log(Object.keys(p.theme.extend.colors))" lists info and chart
  • Storybook: info/chart utilities render (e.g. bg-info-500, text-chart-1)
  • Diff the resolved theme of .cjs vs compiled .ts to confirm zero remaining drift
Dominant language
TypeScript
Stars
2
Forks
4
Avg merge
1d 2h
Merged PRs (30d)
72

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mieweb/ui

All issues in mieweb/ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.