The Design System You Need

Join the AlignUI Community

A CLI for adding AlignUI's Tailwind CSS v4.1 styles to your project with CSS-first configuration.

Use the tailwind command to initialize Tailwind CSS v4.1 with AlignUI design system for your project.

npx @alignui/cli tailwind

This command will:

• Detect if you're using TypeScript
• Install Tailwind CSS v4.1 packages (tailwindcss@next, @tailwindcss/postcss@next)
• Ask for your preferred primary color (Blue, Purple, Orange, Sky)
• Ask for your preferred neutral color (Gray, Slate)
• Ask for your preferred color format (OKLCH recommended, HEX, RGB, HSL)
• Prompt you to choose a prefix for AlignUI's classes if needed
• Generate CSS-first configuration with @theme directive
• Set up all AlignUI design tokens and colors

• 🐛 Bug Fixes: Fixed typography [object Object] rendering issues
• 🔧 Complete Typography System: All typography properties (fontSize, lineHeight, letterSpacing, fontWeight) now properly exported
• 🔄 Backward Compatibility: Legacy TypeScript exports available for v0.0.2 migration
• ✨ Enhanced Shadow System: Fixed theme() references for Tailwind v4.1 compatibility

• ✨ Tailwind CSS v4.1 Support: Full compatibility with the latest Tailwind CSS
• 🎨 CSS-First Configuration: Uses @theme directive instead of JavaScript config
• 🌈 OKLCH Color System: Modern color space for more vivid colors (default)
• ⚡ Simplified Setup: Streamlined installation process
• 🔧 Modern CSS Features: Support for cascade layers and advanced CSS properties

If you're migrating from v0.0.2, you can still use TypeScript exports for backward compatibility:

// For backward compatibility
import { texts, shadows, borderRadii } from '@alignui/cli/legacy-exports';

However, we recommend using the new CSS-first approach with @theme variables for better performance and Tailwind v4.1 compatibility.

MIT