feat: Add Tailwind CSS integration with opt-in architecture
Add comprehensive Tailwind CSS support to Rynex framework with a lightweight,
opt-in design that keeps the core framework minimal while providing seamless
integration for users who need utility-first CSS styling.
Features:
- Add 'rynex add tailwind' CLI command for one-step setup
- Integrate esbuild-plugin-tailwindcss for automatic CSS processing
- Support latest Tailwind CSS v4.x with JIT compilation mode
- Auto-detect Tailwind classes in component 'class' attributes
- Interactive package manager selection (npm/pnpm/yarn/bun)
- Automatic configuration file generation
- CSS import injection in entry points and HTML files
Implementation Details:
- Created src/cli/add-command.ts for integration management
- Updated src/cli/builder.ts with conditional Tailwind plugin loading
- Enhanced src/cli/prod-server.ts for consistency with dev-server
- Added support for .mjs, .webp, and source map content types
- Improved logging and error handling across servers
Architecture:
- Opt-in design: Tailwind CSS not included by default
- Lightweight core: Only esbuild-plugin-tailwindcss in framework dependencies
- User dependencies: tailwindcss, postcss, autoprefixer installed on demand
- Zero configuration: Works immediately after 'rynex add tailwind'
Documentation:
- Added comprehensive guide at docs/TAILWIND_CSS.md
- Updated README.md with Tailwind setup section
- Fixed all code examples to match actual Rynex API syntax
- Added real-world usage examples and troubleshooting guide
- Updated docs/README.md with Tailwind CSS link
Performance:
- JIT mode enables fast compilation (under 100ms)
- Production builds automatically purge unused styles (10-30KB)
- Hot reload support in development mode
- Optimized bundle generation with source maps
Breaking Changes: None
Version: 0.1.40