Lifeforge-app/lifeforge

🚀 LifeForge: Từ Tailwind CSS đến kiến trúc UI nội bộ — một bước ngoặt lịch sử

Sau khi Tailwind CSS gây ra xung đột CSS cascade trong module federation, LifeForge đã hoàn toàn bỏ Tailwind và chuyển sang hệ thống UI nội bộ @lifeforge/ui — giữ nguyên sự nhất quán, loại bỏ xung đột, và mở ra con đường cho sự phát triển bền vững.

LifeForge là một ứng dụng tự host (self-hosted), dựng trên TypeScript + React + Node.js + Express + PocketBase, nhằm tổ chức toàn bộ các khía cặp cuộc sống cá nhân: lịch, tài chính, nhật ký, ghi chú, quản lý mật khẩu, thư viện nhạc, quản lý ảnh, và công cụ năng suất khác. Dự án đang trong giai đoạn phát triển sớm, nhưng vừa hoàn thành một trong những chuyển đổi kiến trúc lớn nhất trong lịch sử: việc viết lại toàn bộ thư viện UI và rời bỏ Tailwind CSS.

✨ Điểm nổi bật

• Chuyển đổi UI hoàn toàn: Từ Tailwind CSS sang hệ thống UI nội bộ @lifeforge/ui, loại bỏ xung đột CSS cascade.
• Token-driven & Component-based: Hệ thống UI mới dựa trên thiết kế token và thành phần, độc lập hoàn toàn với Tailwind.
• Thiết kế cho Module Federation: Được xây dựng đặc biệt để hỗ trợ kiến trúc module federation, tránh xung đột giữa các module.
• Nguồn tin cậy duy nhất cho giao diện: Tất cả các ứng dụng và module đều tiêu thụ UI primitives, tokens và hành vi từ @lifeforge/ui.
• Loại bỏ xung đột CSS: Không còn CSS cascade conflicts, styling nhất quán bất kể thứ tự tải module.
• Bản ghi nhớ legacy: Phiên bản cuối cùng dựa trên Tailwind được lưu giữ tại nhánh legacy-final để tham khảo.
• Đa ngôn ngữ: Hỗ trợ tiếng Anh, tiếng Trung (giản thể), tiếng Trung (phồn thể), và tiếng Malaysia.
• Đa module tích hợp: Lịch, tài chính, nhật ký, ghi chú, quản lý mật khẩu, thư viện nhạc, quản lý ảnh, công cụ năng suất.

💡 Vì sao đáng chú ý

Vấn đề không phải là thiếu tính năng, mà là một mâu thoái kiến trúc sâu thẳm: khi cả host và các module đều bundle Tailwind CSS độc lập, CSS cascade layer xung đột với nhau, gây ra hiệu ứng phụ khó đoán. Đây không phải là lỗi nhỏ — nó lan tràn ngay khi chỉ có hai bundle Tailwind đồng thời tồn tại. Giải pháp không phải là “tắt một cái đi”, mà là thay đổi toàn bộ mô hình styling — từ phụ thuộc vào CSS utility sang một hệ thống UI nội bộ, token-driven, component-based, và được thiết kế riêng cho module federation.

Điều này không chỉ cứu được LifeForge khỏi vòng lặp bug CSS — mà còn thiết lập nền tảng cho một hệ sinh thái ứng dụng đa module, đa năng chức năng, và có khả năng mở rộng vĩnh viễn. Đối với bất kỳ dự án nào đang dùng module federation + Tailwind, đây là một bài học cần đọc.

#SelfHosted #ModuleFederation #UIArchitecture #TypeScript #LifeForge #TiniX