인터페이스는 현지화되어 있으며, Skill 소개와 설명 문서는 선택한 언어로 AI가 자동 번역합니다. 코드·명령어·경로·전문 용어는 원문을 유지하며 원작자 문서가 우선합니다.
Skills 둘러보기
디자인 및 창작 · SKILL.md

tailwind-config-gen

tailwind-config-gen

Generate tailwind.config.js from brand colors. Use when setting up Tailwind.

Independent GitHub snapshot · Automated classification · Original documentation governs

Skill 문서

GitHub

name: tailwind-config-gen description: Generate tailwind.config.js from brand colors. Use when setting up Tailwind.

Tailwind Config Generator

You have brand colors and need a complete Tailwind config. This generates a full theme from your palette.

One command. Zero config. Just works.

Quick Start

npx ai-tailwind "#FF4500" "#1A1A2E"

What It Does

  • Takes your brand colors
  • Generates complete color palette
  • Creates tailwind.config.js
  • Includes shades and semantic colors

Usage Examples

# Two colors
npx ai-tailwind "#FF4500" "#1A1A2E"

# Three colors
npx ai-tailwind "#3B82F6" "#10B981" "#F59E0B" -o tailwind.config.js

Best Practices

  • Start with brand colors - primary and accent
  • Generate shades - 50 through 950
  • Include semantic colors - success, error, warning
  • Test contrast - accessibility matters

When to Use This

  • Setting up new Tailwind project
  • Implementing brand guidelines
  • Creating design system
  • Generating color palettes

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

npx ai-tailwind --help

How It Works

Takes your hex colors and generates a complete Tailwind theme with expanded shades, semantic naming, and proper color relationships.

License

MIT. Free forever. Use it however you want.

저장한 Skills