tailwind-v3-palette 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 tkura37
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+[English](README_en.md)
+
+# tailwind-v3-palette
+Tailwind CSS v3の設定ファイルからテーマの定義を読み取り、一覧性の高いHTMLカラーパレットを生成するCLIツール
+
+## 特徴
+- 設定ファイル内のコメント（`// テーマカラー` など）をセクション見出しに反映します
+- カラーのキー構造に応じてカラーパレットを表示します
+
+## 対応する設定ファイル形式
+| ファイル名 | 形式 |
+| --- | --- |
+| tailwind.config.js | CommonJS |
+| tailwind.config.cjs | CommonJS |
+| tailwind.config.mjs | ES Modules |
+| tailwind.config.ts | TypeScript |
+
+## インストール
+```bash
+npm install -D tailwind-v3-palette
+```
+
+## 使い方
+```bash
+npx tailwind-v3-palette
+```
+または
+```bash
+npx t3p
+```
+
+デフォルトでは、プロジェクトルートに`color-palette.html`が出力されます
+
+設定ファイルが以下の場合：
+```js
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        // プライマリ(インディゴ)
+        primary: {
+          DEFAULT: "#6366f1",
+          50: "#eef2ff",
+          100: "#e0e7ff",
+          200: "#c7d2fe",
+          300: "#a5b4fc",
+          400: "#818cf8",
+          500: "#6366f1",
+          600: "#4f46e5",
+          700: "#4338ca",
+          800: "#3730a3",
+          900: "#312e81",
+        },
+        // ボーダーの色
+        border: {
+          DEFAULT: "#e2e8f0",
+          strong: "#cbd5e1",
+        },
+      },
+      // 文字色
+      textColor: {
+        DEFAULT: "#334155",
+        heading: "#0f172a",
+        body: "#334155",
+        muted: "#94a3b8",
+        link: "#6366f1",
+        "link-hover": "#4f46e5",
+      },
+      spacing: {
+        xs: "0.25rem",
+        sm: "0.5rem",
+        md: "1rem",
+        lg: "1.5rem",
+        xl: "2rem",
+        "2xl": "3rem",
+        "3xl": "4rem",
+      },
+    },
+    fontFamily: {
+      sans: ["Noto Sans JP", "sans-serif"],
+      mono: ["JetBrains Mono", "monospace"],
+    },
+  },
+};
+```
+
+![カラーパレット出力例](assets/output-example.png)
+
+## 設定
+`package.json`に`tailwindV3Palette.output`を追加すると、出力先を変更できます
+```json
+{
+  "tailwindV3Palette": {
+    "output": "./styles/color-palette.html"
+  }
+}
+```
+
+## 動作環境
+- Node.js 18以上
+
+## 注意事項
+- Tailwind CSS v4には対応していません。v3の設定ファイル形式のみサポートしています
+
+## ライセンス
+MIT

package/README_en.md

@@ -0,0 +1,108 @@
+[Japanese](README.md)
+
+# tailwind-v3-palette
+A CLI tool that reads Tailwind CSS v3 config files and generates a well-organized HTML color palette.
+
+## Features
+- Reflects comments in the config file (e.g. `// Theme colors`) as section headings
+- Displays the color palette according to the key structure of the colors
+
+## Supported config file formats
+
+| File name | Format |
+| --- | --- |
+| tailwind.config.js | CommonJS |
+| tailwind.config.cjs | CommonJS |
+| tailwind.config.mjs | ES Modules |
+| tailwind.config.ts | TypeScript |
+
+## Installation
+```bash
+npm install -D tailwind-v3-palette
+```
+
+## Usage
+```bash
+npx tailwind-v3-palette
+```
+or
+```bash
+npx t3p
+```
+
+By default, `color-palette.html` is generated in the project root.
+
+Given the following config file:
+```js
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        // Primary (Indigo)
+        primary: {
+          DEFAULT: "#6366f1",
+          50: "#eef2ff",
+          100: "#e0e7ff",
+          200: "#c7d2fe",
+          300: "#a5b4fc",
+          400: "#818cf8",
+          500: "#6366f1",
+          600: "#4f46e5",
+          700: "#4338ca",
+          800: "#3730a3",
+          900: "#312e81",
+        },
+        // Border color
+        border: {
+          DEFAULT: "#e2e8f0",
+          strong: "#cbd5e1",
+        },
+      },
+      // Text color
+      textColor: {
+        DEFAULT: "#334155",
+        heading: "#0f172a",
+        body: "#334155",
+        muted: "#94a3b8",
+        link: "#6366f1",
+        "link-hover": "#4f46e5",
+      },
+      spacing: {
+        xs: "0.25rem",
+        sm: "0.5rem",
+        md: "1rem",
+        lg: "1.5rem",
+        xl: "2rem",
+        "2xl": "3rem",
+        "3xl": "4rem",
+      },
+    },
+    fontFamily: {
+      sans: ["Noto Sans JP", "sans-serif"],
+      mono: ["JetBrains Mono", "monospace"],
+    },
+  },
+};
+```
+
+![Color palette output example](assets/output-example_en.png)
+
+## Configuration
+Add `tailwindV3Palette.output` to your `package.json` to change the output path.
+```json
+{
+  "tailwindV3Palette": {
+    "output": "./styles/color-palette.html"
+  }
+}
+```
+
+## Requirements
+- Node.js 18 or later
+
+## Note
+- Tailwind CSS v4 is not supported. Only v3 config file formats are supported.
+
+## License
+MIT

package/dist/cli.js

@@ -0,0 +1,326 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import fs3 from "fs";
+import path3 from "path";
+
+// src/detect-config.ts
+import fs from "fs";
+import path from "path";
+var CONFIG_FILES = [
+  "tailwind.config.ts",
+  "tailwind.config.js",
+  "tailwind.config.cjs",
+  "tailwind.config.mjs"
+];
+function detectConfig(cwd) {
+  for (const file of CONFIG_FILES) {
+    const filePath = path.join(cwd, file);
+    if (fs.existsSync(filePath)) {
+      return filePath;
+    }
+  }
+  throw new Error(
+    "Tailwind CSS \u306E\u8A2D\u5B9A\u30D5\u30A1\u30A4\u30EB\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002tailwind.config.{ts,js,cjs,mjs} \u306E\u3044\u305A\u308C\u304B\u3092\u4F5C\u6210\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
+  );
+}
+
+// src/parse-config.ts
+import { createRequire } from "module";
+import { createJiti } from "jiti";
+import { pathToFileURL } from "url";
+async function parseConfig(filePath) {
+  const ext = filePath.slice(filePath.lastIndexOf("."));
+  try {
+    switch (ext) {
+      case ".ts": {
+        const jiti = createJiti(filePath);
+        const mod = await jiti.import(filePath);
+        return extractDefault(mod);
+      }
+      case ".mjs": {
+        const mod = await import(pathToFileURL(filePath).href);
+        return extractDefault(mod);
+      }
+      case ".js":
+      case ".cjs": {
+        const require2 = createRequire(filePath);
+        return require2(filePath);
+      }
+      default:
+        throw new Error(`\u672A\u5BFE\u5FDC\u306E\u62E1\u5F35\u5B50\u3067\u3059: ${ext}`);
+    }
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      throw new Error(`\u8A2D\u5B9A\u30D5\u30A1\u30A4\u30EB\u306E\u69CB\u6587\u30A8\u30E9\u30FC: ${error.message}`);
+    }
+    throw error;
+  }
+}
+function extractDefault(mod) {
+  return mod?.default ?? mod;
+}
+
+// src/is-hex-color.ts
+var HEX_COLOR_RE = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/;
+function isHexColor(value) {
+  return HEX_COLOR_RE.test(value);
+}
+
+// src/extract-colors.ts
+function extractColors(theme) {
+  const sectionMap = /* @__PURE__ */ new Map();
+  function collectSections(obj) {
+    for (const [sectionName, sectionValue] of Object.entries(obj)) {
+      if (sectionName === "extend") {
+        if (isPlainObject(sectionValue)) {
+          collectSections(sectionValue);
+        }
+        continue;
+      }
+      if (!isPlainObject(sectionValue)) continue;
+      const groups = collectGroups(
+        sectionName,
+        sectionValue
+      );
+      if (groups.length === 0) continue;
+      if (!sectionMap.has(sectionName)) {
+        sectionMap.set(sectionName, []);
+      }
+      sectionMap.get(sectionName).push(...groups);
+    }
+  }
+  collectSections(theme);
+  const sections = [];
+  for (const [name, groups] of sectionMap) {
+    sections.push({ name, groups });
+  }
+  return sections;
+}
+function collectGroups(sectionName, obj) {
+  const groups = [];
+  const flatEntries = collectEntries(obj);
+  if (flatEntries.length > 0) {
+    groups.push({ name: sectionName, entries: flatEntries });
+  }
+  for (const [groupName, groupValue] of Object.entries(obj)) {
+    if (!isPlainObject(groupValue)) continue;
+    const entries = collectEntries(groupValue);
+    if (entries.length > 0) {
+      groups.push({ name: groupName, entries });
+    }
+  }
+  return groups;
+}
+function collectEntries(obj) {
+  const entries = [];
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "string" && isHexColor(value)) {
+      entries.push({ key, hex: value });
+    }
+  }
+  return entries;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/extract-comments.ts
+import ts from "typescript";
+function extractComments(source) {
+  const result = /* @__PURE__ */ new Map();
+  const sourceFile = ts.createSourceFile(
+    "config.ts",
+    source,
+    ts.ScriptTarget.Latest,
+    true
+  );
+  function visit(node) {
+    if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
+      const propName = node.name.text;
+      if (ts.isObjectLiteralExpression(node.initializer)) {
+        const commentText = getLeadingCommentText(node, source);
+        if (commentText) {
+          result.set(propName, commentText);
+        }
+      }
+    }
+    ts.forEachChild(node, visit);
+  }
+  visit(sourceFile);
+  return result;
+}
+function getLeadingCommentText(node, source) {
+  const ranges = ts.getLeadingCommentRanges(source, node.getFullStart());
+  if (!ranges || ranges.length === 0) return void 0;
+  const texts = ranges.map((range) => {
+    const raw = source.slice(range.pos, range.end);
+    if (range.kind === ts.SyntaxKind.SingleLineCommentTrivia) {
+      return raw.replace(/^\/\/\s?/, "").trim();
+    }
+    return raw.replace(/^\/\*\s?/, "").replace(/\s?\*\/$/, "").trim();
+  });
+  const filtered = texts.filter((t) => t.length > 0);
+  return filtered.length > 0 ? filtered.join(" ") : void 0;
+}
+
+// src/resolve-output.ts
+import fs2 from "fs";
+import path2 from "path";
+var DEFAULT_OUTPUT = "color-palette.html";
+function resolveOutput(cwd) {
+  const pkgPath = path2.join(cwd, "package.json");
+  if (!fs2.existsSync(pkgPath)) {
+    throw new Error(
+      "package.json \u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u30EB\u30FC\u30C8\u3067\u5B9F\u884C\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
+    );
+  }
+  const pkg = JSON.parse(fs2.readFileSync(pkgPath, "utf-8"));
+  const output = pkg?.tailwindV3Palette?.output;
+  if (typeof output === "string" && output.length > 0) {
+    return path2.resolve(cwd, output);
+  }
+  return path2.resolve(cwd, DEFAULT_OUTPUT);
+}
+
+// src/detect-layout.ts
+function detectLayout(entries) {
+  const numericCount = entries.filter(
+    (e) => e.key !== "DEFAULT" && /^\d+$/.test(e.key)
+  ).length;
+  return numericCount >= entries.length / 2 ? "card" : "pair";
+}
+
+// src/process-default.ts
+function processDefault(entries) {
+  const defaultEntry = entries.find((e) => e.key === "DEFAULT");
+  if (!defaultEntry) return entries;
+  const others = entries.filter((e) => e.key !== "DEFAULT");
+  if (others.length === 0) return entries;
+  const matchExists = others.some((e) => e.hex === defaultEntry.hex);
+  if (!matchExists) return entries.map((e) => ({ ...e }));
+  return others.map(
+    (e) => e.hex === defaultEntry.hex ? { key: `${e.key} (DEFAULT)`, hex: e.hex } : { ...e }
+  );
+}
+
+// src/generate-html.ts
+function generateHtml(sections) {
+  const body = sections.map((section) => {
+    const groups = section.groups.map((group) => renderGroup(group)).join("\n");
+    return `
+    <h2>${section.name}</h2>${groups}`;
+  }).join("\n");
+  return `<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Tailwind Theme Colors</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: system-ui, sans-serif; padding: 2rem; background: #f9fafb; color: #1f2937; }
+  h1 { font-size: 1.5rem; margin-bottom: 2rem; }
+  h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; color: #111827; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25rem; }
+  h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; color: #374151; }
+  .group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
+  .swatch {
+    width: 5rem; text-align: center; border-radius: 0.5rem;
+    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1);
+  }
+  .swatch .color { height: 3.5rem; }
+  .swatch .label { font-size: 0.75rem; padding: 0.25rem 0; background: #fff; line-height: 1.3; }
+  .swatch .label .name { font-weight: 600; }
+  .swatch .label .hex { color: #6b7280; }
+  .pair { display: inline-flex; gap: 0.5rem; margin-right: 1.5rem; margin-bottom: 0.5rem; align-items: center; }
+  .pair .color { width: 2.5rem; height: 2.5rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
+  .pair .info { font-size: 0.85rem; line-height: 1.4; }
+  .pair .info .name { font-weight: 600; }
+  .pair .info .hex { color: #6b7280; }
+</style>
+</head>
+<body>
+    <h1>Tailwind Theme Color Palette</h1>
+${body}
+</body>
+</html>
+`;
+}
+function renderGroup(group) {
+  const entries = processDefault(group.entries);
+  const layout = detectLayout(group.entries);
+  const heading = group.comment ? `${group.name} (${group.comment})` : group.name;
+  if (layout === "card") {
+    return renderCardGroup(heading, entries);
+  }
+  return renderPairGroup(heading, entries);
+}
+function renderCardGroup(heading, entries) {
+  const swatches = entries.map(
+    (e) => `      <div class="swatch"><div class="color" style="background:${e.hex}"></div><div class="label"><div class="name">${e.key}</div><div class="hex">${e.hex}</div></div></div>`
+  ).join("\n");
+  return `
+    <h3>${heading}</h3>
+    <div class="group">
+${swatches}
+    </div>`;
+}
+function renderPairGroup(heading, entries) {
+  const pairs = entries.map((e) => {
+    const borderStyle = isLightColor(e.hex) ? " border:1px solid #cbd5e1" : "";
+    return `      <div class="pair"><div class="color" style="background:${e.hex};${borderStyle}"></div><div class="info"><div class="name">${e.key}</div><div class="hex">${e.hex}</div></div></div>`;
+  }).join("\n");
+  return `
+    <h3>${heading}</h3>
+    <div>
+${pairs}
+    </div>`;
+}
+function isLightColor(hex) {
+  const normalized = hex.replace("#", "");
+  let r, g, b;
+  if (normalized.length === 3) {
+    r = parseInt(normalized[0] + normalized[0], 16);
+    g = parseInt(normalized[1] + normalized[1], 16);
+    b = parseInt(normalized[2] + normalized[2], 16);
+  } else {
+    r = parseInt(normalized.slice(0, 2), 16);
+    g = parseInt(normalized.slice(2, 4), 16);
+    b = parseInt(normalized.slice(4, 6), 16);
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.85;
+}
+
+// src/index.ts
+async function run(cwd) {
+  const configPath = detectConfig(cwd);
+  const config = await parseConfig(configPath);
+  const theme = config?.theme ?? {};
+  const sections = extractColors(theme);
+  const source = fs3.readFileSync(configPath, "utf-8");
+  const comments = extractComments(source);
+  for (const section of sections) {
+    for (const group of section.groups) {
+      const comment = comments.get(group.name);
+      if (comment) {
+        group.comment = comment;
+      }
+    }
+  }
+  const html = generateHtml(sections);
+  const outputPath = resolveOutput(cwd);
+  const outputDir = path3.dirname(outputPath);
+  if (!fs3.existsSync(outputDir)) {
+    fs3.mkdirSync(outputDir, { recursive: true });
+  }
+  fs3.writeFileSync(outputPath, html, "utf-8");
+}
+
+// src/cli.ts
+run(process.cwd()).then(() => {
+  process.exit(0);
+}).catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "tailwind-v3-palette",
+  "version": "1.0.0",
+  "description": "Generate an HTML color palette from Tailwind CSS v3 config files",
+  "type": "module",
+  "main": "dist/cli.js",
+  "bin": {
+    "tailwind-v3-palette": "dist/cli.js",
+    "t3p": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README_en.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest"
+  },
+  "keywords": [
+    "tailwindcss",
+    "tailwind",
+    "color-palette",
+    "cli"
+  ],
+  "author": "tkura37",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tkura37/tailwind-v3-palette.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "pnpm@10.28.0",
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "jiti": "^2.6.1",
+    "typescript": "^5.9.3"
+  }
+}