refactor: migrate vendor APIs to token-based context and consolidate architecture
## Vendor-in-Token Architecture (Complete Migration) - Migrate all vendor API endpoints from require_vendor_context() to token_vendor_id - Update permission dependencies to extract vendor from JWT token - Add vendor exceptions: VendorAccessDeniedException, VendorOwnerOnlyException, InsufficientVendorPermissionsException - Shop endpoints retain require_vendor_context() for URL-based detection - Add AUTH-004 architecture rule enforcing vendor context patterns - Fix marketplace router missing /marketplace prefix ## Exception Pattern Fixes (API-003/API-004) - Services raise domain exceptions, endpoints let them bubble up - Add code_quality and content_page exception modules - Move business logic from endpoints to services (admin, auth, content_page) - Fix exception handling in admin, shop, and vendor endpoints ## Tailwind CSS Consolidation - Consolidate CSS to per-area files (admin, vendor, shop, platform) - Remove shared/cdn-fallback.html and shared/css/tailwind.min.css - Update all templates to use area-specific Tailwind output files - Remove Node.js config (package.json, postcss.config.js, tailwind.config.js) ## Documentation & Cleanup - Update vendor-in-token-architecture.md with completed migration status - Update architecture-rules.md with new rules - Move migration docs to docs/development/migration/ - Remove duplicate/obsolete documentation files - Merge pytest.ini settings into pyproject.toml 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -324,5 +324,5 @@ Migration failures will halt deployment to prevent data corruption.
|
||||
## Further Reading
|
||||
|
||||
- [Alembic Official Documentation](https://alembic.sqlalchemy.org/)
|
||||
- [Database Setup Guide](../getting-started/database-setup-guide.md)
|
||||
- [Deployment Guide](../deployment/production.md)
|
||||
- [Database Seeder Documentation](../database-seeder/database-seeder-documentation.md)
|
||||
- [Database Init Guide](../database-seeder/database-init-guide.md)
|
||||
|
||||
235
docs/development/migration/makefile-refactoring-complete.md
Normal file
235
docs/development/migration/makefile-refactoring-complete.md
Normal file
@@ -0,0 +1,235 @@
|
||||
# Makefile Refactoring - Implementation Complete ✅
|
||||
|
||||
**Date:** 2025-12-01
|
||||
**Status:** ✅ COMPLETE
|
||||
|
||||
## Summary
|
||||
|
||||
Successfully refactored the Makefile to establish clear separation between **production initialization** and **demo data seeding**.
|
||||
|
||||
## Architecture Decision
|
||||
|
||||
### ✅ **Production vs Demo Separation**
|
||||
|
||||
**`init-prod`** - Production-safe platform initialization:
|
||||
- ✅ Create admin user + platform alerts
|
||||
- ✅ Initialize log settings
|
||||
- ✅ Create CMS defaults (about, faq, etc.)
|
||||
- ✅ Create platform pages and landing
|
||||
- 🎯 Safe to run in production
|
||||
- 🎯 Required for both production AND development
|
||||
|
||||
**`seed-demo`** - Development-only demo data:
|
||||
- ✅ Create demo companies (3)
|
||||
- ✅ Create demo vendors (1 per company)
|
||||
- ✅ Create demo customers (15 per vendor)
|
||||
- ✅ Create demo products (20 per vendor)
|
||||
- ❌ NEVER run in production
|
||||
- 🎯 For development/testing only
|
||||
|
||||
## Changes Made
|
||||
|
||||
### 1. Updated `init-prod` Command
|
||||
|
||||
**Before:**
|
||||
```makefile
|
||||
init-prod:
|
||||
$(PYTHON) scripts/init_production.py
|
||||
```
|
||||
|
||||
**After:**
|
||||
```makefile
|
||||
init-prod:
|
||||
@echo "🔧 Initializing production database..."
|
||||
@echo "Step 1/4: Creating admin user and platform alerts..."
|
||||
$(PYTHON) scripts/init_production.py
|
||||
@echo "Step 2/4: Initializing log settings..."
|
||||
$(PYTHON) scripts/init_log_settings.py
|
||||
@echo "Step 3/4: Creating default CMS content pages..."
|
||||
$(PYTHON) scripts/create_default_content_pages.py
|
||||
@echo "Step 4/4: Creating platform pages and landing..."
|
||||
$(PYTHON) scripts/create_platform_pages.py
|
||||
@echo "✅ Production initialization completed"
|
||||
```
|
||||
|
||||
### 2. Updated `db-setup` Workflow
|
||||
|
||||
**Before:**
|
||||
```makefile
|
||||
db-setup: migrate-up init-prod create-cms-defaults seed-demo
|
||||
```
|
||||
|
||||
**After:**
|
||||
```makefile
|
||||
db-setup: migrate-up init-prod seed-demo
|
||||
```
|
||||
|
||||
Now `init-prod` handles CMS defaults, so no separate step needed!
|
||||
|
||||
### 3. Updated `db-reset` Workflow
|
||||
|
||||
**Before:**
|
||||
```makefile
|
||||
db-reset: migrate-down migrate-up seed-demo-reset
|
||||
```
|
||||
|
||||
**After:**
|
||||
```makefile
|
||||
db-reset: migrate-down migrate-up init-prod seed-demo-reset
|
||||
```
|
||||
|
||||
Now properly re-initializes the platform after reset!
|
||||
|
||||
### 4. Added Utility Commands
|
||||
|
||||
```makefile
|
||||
# Utility commands (usually not needed - init-prod handles these)
|
||||
create-cms-defaults:
|
||||
$(PYTHON) scripts/create_default_content_pages.py
|
||||
|
||||
create-platform-pages:
|
||||
$(PYTHON) scripts/create_platform_pages.py
|
||||
|
||||
init-logging:
|
||||
$(PYTHON) scripts/init_log_settings.py
|
||||
```
|
||||
|
||||
These are now available for advanced use cases or re-running specific steps.
|
||||
|
||||
### 5. Updated Help Documentation
|
||||
|
||||
Enhanced both `make help` and `make help-db` with:
|
||||
- Clear separation between production and demo commands
|
||||
- Step-by-step breakdown of what `init-prod` does
|
||||
- Warning about NEVER running `seed-demo` in production
|
||||
- Simplified workflow guidance
|
||||
|
||||
## Script Classification
|
||||
|
||||
### ✅ **Production Scripts** (Run in both prod + dev)
|
||||
- `init_production.py` - Create admin user + alerts
|
||||
- `init_log_settings.py` - Initialize logging configuration
|
||||
- `create_default_content_pages.py` - CMS defaults (about, faq, etc.)
|
||||
- `create_platform_pages.py` - Platform pages + landing
|
||||
|
||||
### 🎪 **Demo Scripts** (Development only)
|
||||
- `seed_demo.py` - Create demo companies, vendors, products
|
||||
|
||||
### 🛠️ **Utility Scripts** (Manual/advanced use)
|
||||
- `backup_database.py` - Database backups
|
||||
- `verify_setup.py` - Verify configuration
|
||||
- `create_inventory.py` - One-off inventory creation
|
||||
- `create_landing_page.py` - One-off landing page creation
|
||||
|
||||
### 🧪 **Test/Diagnostic Scripts**
|
||||
- `test_*.py` - Testing scripts
|
||||
- `route_diagnostics.py` - Debug routing
|
||||
- `validate_architecture.py` - Architecture validation
|
||||
|
||||
## New Developer Workflow
|
||||
|
||||
### Quick Start (One Command)
|
||||
```bash
|
||||
make db-setup
|
||||
# Equivalent to:
|
||||
# 1. make migrate-up
|
||||
# 2. make init-prod (4 steps)
|
||||
# 3. make seed-demo
|
||||
```
|
||||
|
||||
### Manual Step-by-Step
|
||||
```bash
|
||||
make migrate-up # Apply database schema
|
||||
make init-prod # Initialize platform (admin, CMS, logging, pages)
|
||||
make seed-demo # Add demo data
|
||||
make dev # Start development server
|
||||
```
|
||||
|
||||
## Production Deployment Workflow
|
||||
|
||||
```bash
|
||||
# Set production environment
|
||||
export ENV=production
|
||||
|
||||
# Run migrations
|
||||
make migrate-up
|
||||
|
||||
# Initialize platform (uses .env credentials)
|
||||
make init-prod
|
||||
|
||||
# Create companies via admin panel
|
||||
# DO NOT run seed-demo!
|
||||
```
|
||||
|
||||
## Benefits Achieved
|
||||
|
||||
### ✅ **Clear Separation of Concerns**
|
||||
- Production setup clearly separated from demo data
|
||||
- No confusion about what to run in production
|
||||
|
||||
### ✅ **Simplified Workflow**
|
||||
- `init-prod` handles everything needed for platform setup
|
||||
- No manual steps for CMS, logging, or platform pages
|
||||
|
||||
### ✅ **Better Documentation**
|
||||
- Help text clearly explains each command
|
||||
- Production vs development distinction is obvious
|
||||
|
||||
### ✅ **Consistent Experience**
|
||||
- Same commands work for production and development
|
||||
- Only difference is whether to run `seed-demo`
|
||||
|
||||
### ✅ **Maintainable**
|
||||
- Individual scripts can still be run manually
|
||||
- Utility commands available for advanced use cases
|
||||
|
||||
## Testing Performed
|
||||
|
||||
✅ Verified `make help` output is clear
|
||||
✅ Verified `make help-db` output is detailed
|
||||
✅ Confirmed `db-setup` workflow is correct
|
||||
✅ Confirmed `db-reset` workflow is correct
|
||||
|
||||
## Next Steps
|
||||
|
||||
### Immediate
|
||||
- [ ] Test `make init-prod` with fresh database
|
||||
- [ ] Test `make db-setup` end-to-end
|
||||
- [ ] Verify all 4 scripts in init-prod execute successfully
|
||||
|
||||
### Future Enhancements (Optional)
|
||||
- [ ] Add inventory creation to `seed_demo.py`
|
||||
- [ ] Add landing page creation to `seed_demo.py`
|
||||
- [ ] Move utility scripts to `scripts/utils/` directory
|
||||
- [ ] Add `--help` flag to individual Python scripts
|
||||
|
||||
## Files Modified
|
||||
|
||||
1. ✅ `Makefile` - Main changes
|
||||
- Updated `init-prod` to run 4 steps
|
||||
- Updated `db-setup` workflow
|
||||
- Updated `db-reset` workflow
|
||||
- Added utility commands
|
||||
- Enhanced help documentation
|
||||
|
||||
## Validation
|
||||
|
||||
Run these commands to verify:
|
||||
|
||||
```bash
|
||||
# Show help
|
||||
make help
|
||||
make help-db
|
||||
|
||||
# Test workflows (with fresh database)
|
||||
make db-setup
|
||||
make db-reset
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
The Makefile now properly separates:
|
||||
- **Platform initialization** (production-safe) → `init-prod`
|
||||
- **Demo data** (development-only) → `seed-demo`
|
||||
|
||||
This architecture is clean, maintainable, and production-ready! 🎉
|
||||
402
docs/development/migration/tailwind-migration-plan.md
Normal file
402
docs/development/migration/tailwind-migration-plan.md
Normal file
@@ -0,0 +1,402 @@
|
||||
# Tailwind CSS Migration Plan: v1.4/v2.2 → v4.0 (Standalone CLI)
|
||||
|
||||
**Created:** December 2024
|
||||
**Completed:** December 2024
|
||||
**Status:** COMPLETE
|
||||
**Goal:** Eliminate Node.js dependency, use Tailwind Standalone CLI
|
||||
|
||||
> **Migration Complete!** All frontends now use Tailwind CSS v4 with the standalone CLI.
|
||||
> See [Tailwind CSS Build Guide](../../frontend/tailwind-css.md) for current documentation.
|
||||
|
||||
---
|
||||
|
||||
## Current State
|
||||
|
||||
### Two Tailwind Setups (Before Migration)
|
||||
|
||||
| Component | Version | Source | Purpose |
|
||||
|-----------|---------|--------|---------|
|
||||
| Base styles | 2.2.19 | CDN + local fallback | Core Tailwind utilities for all frontends |
|
||||
| Custom overrides | 1.4.6 | npm build | Windmill Dashboard theme (admin/vendor) |
|
||||
|
||||
### Current Files (Before Migration)
|
||||
|
||||
```
|
||||
package.json # tailwindcss: 1.4.6 (TO BE REMOVED)
|
||||
package-lock.json # (TO BE REMOVED)
|
||||
node_modules/ # (TO BE REMOVED)
|
||||
tailwind.config.js # v1.4 format config (TO BE UPDATED)
|
||||
postcss.config.js # (TO BE REMOVED)
|
||||
static/shared/css/tailwind.min.css # CDN fallback v2.2.19 (TO BE REMOVED)
|
||||
static/admin/css/tailwind.output.css # Built overrides (TO BE REBUILT)
|
||||
static/vendor/css/tailwind.output.css # Built overrides (TO BE REBUILT)
|
||||
```
|
||||
|
||||
### Current Plugins (TO BE REPLACED)
|
||||
|
||||
```json
|
||||
{
|
||||
"@tailwindcss/custom-forms": "0.2.1", // DEPRECATED - replaced by @tailwindcss/forms
|
||||
"tailwindcss-multi-theme": "1.0.3" // DEPRECATED - native darkMode in v3+
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Migration Goals
|
||||
|
||||
1. ✅ Eliminate Node.js dependency entirely
|
||||
2. ✅ Use Tailwind Standalone CLI (single binary, no npm)
|
||||
3. ✅ Upgrade to Tailwind v4.0 (latest)
|
||||
4. ✅ Remove CDN dependency (all CSS built locally)
|
||||
5. ✅ Update config to v4 format
|
||||
6. ✅ Replace deprecated plugins with native features
|
||||
7. ✅ Consolidate to single Tailwind version
|
||||
8. ✅ Verify all frontends work correctly
|
||||
|
||||
---
|
||||
|
||||
## Step-by-Step Migration
|
||||
|
||||
### Phase 1: Install Tailwind Standalone CLI
|
||||
|
||||
The standalone CLI bundles Tailwind + Node.js runtime into a single binary.
|
||||
|
||||
```bash
|
||||
# Download latest standalone CLI for Linux x64
|
||||
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
|
||||
chmod +x tailwindcss-linux-x64
|
||||
sudo mv tailwindcss-linux-x64 /usr/local/bin/tailwindcss
|
||||
|
||||
# Verify installation
|
||||
tailwindcss --version
|
||||
```
|
||||
|
||||
**For other platforms:**
|
||||
- macOS (Intel): `tailwindcss-macos-x64`
|
||||
- macOS (Apple Silicon): `tailwindcss-macos-arm64`
|
||||
- Windows: `tailwindcss-windows-x64.exe`
|
||||
- Linux ARM: `tailwindcss-linux-arm64`
|
||||
|
||||
### Phase 2: Update tailwind.config.js
|
||||
|
||||
Replace the entire config file with v4-compatible format:
|
||||
|
||||
```javascript
|
||||
// tailwind.config.js - Tailwind CSS v4.0 (Standalone CLI)
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// v4: 'content' replaces 'purge'
|
||||
content: [
|
||||
'app/templates/**/*.html',
|
||||
'static/**/*.js',
|
||||
],
|
||||
|
||||
// v4: safelist for dynamic classes (Alpine.js)
|
||||
safelist: [
|
||||
'bg-orange-600',
|
||||
'bg-green-600',
|
||||
'bg-red-600',
|
||||
'bg-blue-600',
|
||||
'bg-purple-600',
|
||||
'hover:bg-orange-700',
|
||||
'hover:bg-green-700',
|
||||
'hover:bg-red-700',
|
||||
'hover:bg-blue-700',
|
||||
'hover:bg-purple-700',
|
||||
// Status colors
|
||||
'text-green-600',
|
||||
'text-red-600',
|
||||
'text-yellow-600',
|
||||
'text-blue-600',
|
||||
'bg-green-100',
|
||||
'bg-red-100',
|
||||
'bg-yellow-100',
|
||||
'bg-blue-100',
|
||||
],
|
||||
|
||||
// v4: darkMode replaces tailwindcss-multi-theme
|
||||
darkMode: 'class',
|
||||
|
||||
theme: {
|
||||
extend: {
|
||||
// Custom colors from Windmill Dashboard
|
||||
colors: {
|
||||
gray: {
|
||||
50: '#f9fafb',
|
||||
100: '#f4f5f7',
|
||||
200: '#e5e7eb',
|
||||
300: '#d5d6d7',
|
||||
400: '#9e9e9e',
|
||||
500: '#707275',
|
||||
600: '#4c4f52',
|
||||
700: '#24262d',
|
||||
800: '#1a1c23',
|
||||
900: '#121317',
|
||||
},
|
||||
purple: {
|
||||
50: '#f6f5ff',
|
||||
100: '#edebfe',
|
||||
200: '#dcd7fe',
|
||||
300: '#cabffd',
|
||||
400: '#ac94fa',
|
||||
500: '#9061f9',
|
||||
600: '#7e3af2',
|
||||
700: '#6c2bd9',
|
||||
800: '#5521b5',
|
||||
900: '#4a1d96',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
},
|
||||
maxHeight: {
|
||||
'xl': '36rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
// Note: Standalone CLI includes @tailwindcss/forms by default in v4
|
||||
// No external plugins needed
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 3: Update CSS Source Files
|
||||
|
||||
Update `static/admin/css/tailwind.css`:
|
||||
|
||||
```css
|
||||
/* Tailwind CSS v4 directives */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom component classes */
|
||||
@layer components {
|
||||
.form-input {
|
||||
@apply block w-full rounded-md border-gray-300 shadow-sm
|
||||
focus:border-purple-500 focus:ring-purple-500;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@apply block w-full rounded-md border-gray-300 shadow-sm
|
||||
focus:border-purple-500 focus:ring-purple-500;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
@apply rounded border-gray-300 text-purple-600
|
||||
focus:ring-purple-500;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
@apply block w-full rounded-md border-gray-300 shadow-sm
|
||||
focus:border-purple-500 focus:ring-purple-500;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode base overrides */
|
||||
@layer base {
|
||||
.dark body {
|
||||
@apply bg-gray-900 text-gray-200;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: Add Makefile Targets
|
||||
|
||||
Add these targets to your Makefile (replaces npm scripts):
|
||||
|
||||
```makefile
|
||||
# =============================================================================
|
||||
# Tailwind CSS (Standalone CLI - No Node.js Required)
|
||||
# =============================================================================
|
||||
|
||||
.PHONY: tailwind-install tailwind-dev tailwind-build tailwind-watch
|
||||
|
||||
# Install Tailwind standalone CLI
|
||||
tailwind-install:
|
||||
@echo "Installing Tailwind CSS standalone CLI..."
|
||||
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
|
||||
chmod +x tailwindcss-linux-x64
|
||||
sudo mv tailwindcss-linux-x64 /usr/local/bin/tailwindcss
|
||||
@echo "Tailwind CLI installed: $$(tailwindcss --version)"
|
||||
|
||||
# Development build (includes all classes, faster)
|
||||
tailwind-dev:
|
||||
@echo "Building Tailwind CSS (development)..."
|
||||
tailwindcss -i static/admin/css/tailwind.css -o static/admin/css/tailwind.output.css
|
||||
tailwindcss -i static/admin/css/tailwind.css -o static/vendor/css/tailwind.output.css
|
||||
@echo "CSS built successfully"
|
||||
|
||||
# Production build (purged and minified)
|
||||
tailwind-build:
|
||||
@echo "Building Tailwind CSS (production)..."
|
||||
tailwindcss -i static/admin/css/tailwind.css -o static/admin/css/tailwind.output.css --minify
|
||||
tailwindcss -i static/admin/css/tailwind.css -o static/vendor/css/tailwind.output.css --minify
|
||||
@echo "CSS built and minified successfully"
|
||||
|
||||
# Watch mode for development
|
||||
tailwind-watch:
|
||||
@echo "Watching for CSS changes..."
|
||||
tailwindcss -i static/admin/css/tailwind.css -o static/admin/css/tailwind.output.css --watch
|
||||
```
|
||||
|
||||
### Phase 5: Update Dark Mode Implementation
|
||||
|
||||
**Old approach (tailwindcss-multi-theme):**
|
||||
```html
|
||||
<body class="theme-dark">
|
||||
<div class="bg-white dark:bg-gray-800">
|
||||
```
|
||||
|
||||
**New approach (Tailwind v4 native):**
|
||||
```html
|
||||
<html class="dark">
|
||||
<body>
|
||||
<div class="bg-white dark:bg-gray-800">
|
||||
```
|
||||
|
||||
**Files to update:**
|
||||
1. `app/templates/admin/base.html` - Add `dark` class to `<html>` element
|
||||
2. `app/templates/vendor/base.html` - Add `dark` class to `<html>` element
|
||||
3. `static/admin/js/init-alpine.js` - Update dark mode toggle logic
|
||||
4. `static/vendor/js/init-alpine.js` - Update dark mode toggle logic
|
||||
|
||||
**JavaScript update:**
|
||||
```javascript
|
||||
// Old
|
||||
document.body.classList.toggle('theme-dark');
|
||||
|
||||
// New
|
||||
document.documentElement.classList.toggle('dark');
|
||||
```
|
||||
|
||||
### Phase 6: Update Base Templates
|
||||
|
||||
**Remove CDN loading, use only local built CSS:**
|
||||
|
||||
```html
|
||||
<!-- OLD: CDN with fallback (REMOVE THIS) -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
|
||||
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/tailwind.min.css') }}';">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='admin/css/tailwind.output.css') }}" />
|
||||
|
||||
<!-- NEW: Local only (v4) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='admin/css/tailwind.output.css') }}" />
|
||||
```
|
||||
|
||||
### Phase 7: Build and Test
|
||||
|
||||
```bash
|
||||
# Build CSS
|
||||
make tailwind-build
|
||||
|
||||
# Start development server
|
||||
make dev
|
||||
|
||||
# Test all frontends:
|
||||
# - http://localhost:8000/admin/dashboard
|
||||
# - http://localhost:8000/vendor/{code}/dashboard
|
||||
# - http://localhost:8000/ (shop)
|
||||
```
|
||||
|
||||
### Phase 8: Remove Node.js Artifacts
|
||||
|
||||
After successful testing, remove all Node.js related files:
|
||||
|
||||
```bash
|
||||
# Remove Node.js files
|
||||
rm -rf node_modules/
|
||||
rm package.json
|
||||
rm package-lock.json
|
||||
rm postcss.config.js
|
||||
|
||||
# Remove unused CDN fallback
|
||||
rm static/shared/css/tailwind.min.css
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Verification Checklist
|
||||
|
||||
- [x] Tailwind CLI installed and working (`tailwindcss --version`)
|
||||
- [x] Admin dashboard loads correctly
|
||||
- [x] Vendor dashboard loads correctly
|
||||
- [x] Shop frontend loads correctly
|
||||
- [x] Platform pages load correctly
|
||||
- [x] Dark mode toggle works
|
||||
- [x] All buttons have correct colors
|
||||
- [x] Forms display correctly (inputs, selects, checkboxes)
|
||||
- [x] Responsive design works (mobile/tablet/desktop)
|
||||
- [x] No console errors
|
||||
- [x] Production build works (`make tailwind-build`)
|
||||
- [x] node_modules removed
|
||||
- [x] package.json removed
|
||||
- [x] Each frontend has its own CSS source file
|
||||
- [x] Vendor theming (CSS variables) still works
|
||||
|
||||
---
|
||||
|
||||
## Breaking Changes Reference
|
||||
|
||||
### Class Name Changes (v2 → v4)
|
||||
|
||||
| v2.x | v4.x | Notes |
|
||||
|------|------|-------|
|
||||
| `overflow-ellipsis` | `text-ellipsis` | Renamed |
|
||||
| `flex-grow-0` | `grow-0` | Shortened |
|
||||
| `flex-shrink-0` | `shrink-0` | Shortened |
|
||||
| `decoration-clone` | `box-decoration-clone` | Renamed |
|
||||
|
||||
### Plugin Changes
|
||||
|
||||
| Old Plugin | New Approach | Notes |
|
||||
|------------|--------------|-------|
|
||||
| `@tailwindcss/custom-forms` | Built-in form styles | Native in v4 |
|
||||
| `tailwindcss-multi-theme` | `darkMode: 'class'` | Native support |
|
||||
|
||||
### Config Changes
|
||||
|
||||
| v1.x/v2.x | v4.x |
|
||||
|-----------|------|
|
||||
| `purge: [...]` | `content: [...]` |
|
||||
| `variants: {...}` | Removed (JIT generates all) |
|
||||
| `mode: 'jit'` | Default (not needed) |
|
||||
|
||||
---
|
||||
|
||||
## Rollback Plan
|
||||
|
||||
If issues arise, the old setup can be restored:
|
||||
|
||||
```bash
|
||||
# Reinstall Node dependencies
|
||||
npm install
|
||||
|
||||
# Rebuild with old config
|
||||
npm run build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Benefits of This Migration
|
||||
|
||||
| Aspect | Before | After |
|
||||
|--------|--------|-------|
|
||||
| **Node.js required** | Yes | No |
|
||||
| **Dependencies** | ~200MB node_modules | ~50MB single binary |
|
||||
| **Build speed** | Slower (npm + PostCSS) | Faster (standalone) |
|
||||
| **Tailwind versions** | 2 (v1.4 + v2.2) | 1 (v4.0) |
|
||||
| **CSS loading** | CDN + local | Local only |
|
||||
| **Maintenance** | npm updates, security patches | Single binary updates |
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- [Tailwind CSS Standalone CLI](https://tailwindcss.com/blog/standalone-cli)
|
||||
- [Tailwind CSS v4 Documentation](https://tailwindcss.com/docs)
|
||||
- [Dark Mode in Tailwind](https://tailwindcss.com/docs/dark-mode)
|
||||
- [Standalone CLI Releases](https://github.com/tailwindlabs/tailwindcss/releases)
|
||||
Reference in New Issue
Block a user