Kleine Tools, große Hilfe — Eine Sammlung nützlicher Mikro-Utilities für Entwickler.
A collection of lightweight web-based developer tools: theme generators, converters, formatters, and more. Built with Next.js and Tailwind CSS.
Create custom color schemes and font configurations for Tailwind CSS with a visual editor:
- Colors — Edit primary, secondary, accent, background, foreground, muted, and border colors
- Light & Dark Mode — Separate palettes for each theme
- Radius Presets — None, sm, md, lg, xl, 2xl, full
- Shadow Presets — None, subtle, medium, strong
- Typography — Choose from 20+ Google Fonts with weight and style options
- Live Preview — See components (buttons, cards, inputs, alerts) update in real time
- Export — Copy CSS variables directly for
tailwind.config.jsorglobals.css
- Hash Generator (MD5, SHA-256, etc.)
- JSON Formatter
- Image Optimizer
- Code Snippets
- Node.js 18+
- npm, pnpm, or yarn
# Clone the repository
git clone https://github.com/your-username/micro-utilities.git
cd micro-utilities
# Install dependencies
npm installnpm run devOpen http://localhost:3000 in your browser.
# Build for production
npm run build
# Start production server
npm start| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19 |
| Styling | Tailwind CSS 4 |
| State | Zustand |
| Components | Radix UI, Lucide Icons |
| Language | TypeScript 5 |
├── app/
│ ├── page.tsx # Home / utility overview
│ ├── tailwind-theme-generator/ # Theme generator route
│ └── layout.tsx
├── components/
│ ├── ColorPalette.tsx
│ ├── ExampleSections.tsx # Preview component demos
│ ├── FontManager.tsx
│ ├── PreviewPanel.tsx
│ └── ...
├── constants/
│ ├── base-presets.ts # Radius & shadow presets
│ └── google-fonts.ts
├── stores/
│ └── theme-store.ts # Zustand theme state
├── types/
│ └── theme.ts
└── lib/
└── color-utils.ts
MIT