feat: Tailwind 4 integration lessons + brand/theme generation improvements#137
Merged
Conversation
- tailwind4-integration.md: Setup guide for any Tailwind 4 consumer (@source, @custom-variant, CSS variable fallbacks, PostCSS config) - migration-meteor-blaze-to-react.md: Full migration playbook from Meteor 2/Blaze to Meteor 3/React + @mieweb/ui - recommended-changes.md: P0-P3 library improvement proposals (generateBrandCSS scales, dark mode consolidation, BrandConfig types) - README.md: Index for the lessons folder Extracted from real-world timehuddle migration pain points.
Deploying ui with
|
| Latest commit: |
3458b72
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://da26e295.ui-6d0.pages.dev |
| Branch Preview URL: | https://lessons-tailwind4-integratio.ui-6d0.pages.dev |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new lessons/ documentation area capturing Tailwind CSS 4 + @mieweb/ui integration gotchas and a Meteor Blaze→React migration playbook, plus a maintainer-focused list of follow-up improvements for the library.
Changes:
- Added a Tailwind 4 consumer integration guide covering
@source, PostCSS setup, dark mode, and brand switching. - Added a Meteor 2 (Blaze) → Meteor 3 (React) migration playbook with suggested project structure and hooks.
- Added a maintainer-oriented “recommended changes” doc to eliminate common consumer workarounds.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| lessons/README.md | Index page linking the new lessons documents. |
| lessons/tailwind4-integration.md | Tailwind 4 integration guide with setup snippets and troubleshooting checklist. |
| lessons/migration-meteor-blaze-to-react.md | End-to-end migration playbook and operational checklist for Meteor/React/Tailwind 4. |
| lessons/recommended-changes.md | Prioritized proposals (P0–P3) for improving @mieweb/ui consumer experience. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
- P0: Add hex fallback values to all var() in @theme for non-primary scales (neutral, secondary, destructive, success, warning, info) so they resolve to Tailwind defaults when brand CSS doesn't define them - P0: Update generateBrandCSS() to iterate over all color scales in brand config, not just primary — brands that define secondary/neutral/etc. now get those emitted automatically - P2: Extend BrandColors interface with optional secondary, neutral, destructive, success, warning, and info ColorScale fields - P1: Consolidate duplicate dark-mode blocks ([data-theme='dark'] and .dark) into a single combined selector
- P1: Created setup.css with @source + @custom-variant directives - P2: Added @deprecated JSDoc to safelist for Tailwind 4 users - P3: Created init.css single-import quick-start file - Updated package.json exports and build scripts for new CSS files
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
…ompt - adopting-mieweb-ui.md: framework-agnostic 4-phase guide (audit, resolution, testing, verification) - component-policy.md: 3-tier policy (use first → build locally → contribute upstream) - compliance-prompt.md: reusable AI prompt for auditing any project - README.md: reorganized index with Start Here and Reference sections
Code fixes: - src/brands/types.ts: generateTailwindTheme() now includes all optional color scales (secondary, neutral, destructive, success, warning, info) when present in BrandConfig, matching generateBrandCSS() behavior. - src/styles/init.css: removed @import 'tailwindcss' and @source directive that cannot resolve from inside node_modules. Header now instructs consumers to add those lines to their own CSS entry point. - src/styles/setup.css: demoted to documentation-only reference. Active CSS directives moved into a comment block since @source cannot resolve when imported from node_modules. - package.json: removed ./setup.css export (docs-only, not importable). Kept ./init.css which still provides real value (@theme + brand tokens). Documentation fixes: - lessons/tailwind4-integration.md: reworded content array claim (TW4 still supports it, just not for node_modules scanning), clarified subpath brand imports, fixed secondary palette table and copy-paste snippet from gray to Indigo to match base.css, changed @theme inline to @theme, fixed darkMode config selector. - lessons/recommended-changes.md: clarified transparent var scope (only when consuming brand CSS without library defaults), fixed secondary palette reference from gray to Indigo.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 13 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
garrity-miepub
changed the title
- init.css: rewrite header to show the full 3-line consumer setup instead of claiming "a single import" (clarifies that @import 'tailwindcss' and @source must live in the consumer's own CSS) - package.json: stop copying setup.css to dist/ (it's docs-only, not an importable stylesheet, and has no package.json export) - tailwind-preset.ts: remove stale reference to @mieweb/ui/setup.css in the safelist JSDoc comment - recommended-changes.md: rewrite setup.css proposal to recommend copy-paste snippets instead of an importable file (since @source can't resolve from inside node_modules) - setup.css: clarify in header that it's not exported or shipped - PR title/description updated to reflect code changes, not just docs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a
lessons/folder documenting real-world integration pain points discovered during the timehuddle migration, plus concrete code changes to the brand theming system and CSS setup files.Documentation
lessons/README.md— Indexlessons/tailwind4-integration.md— Tailwind 4 setup guide for any consumerlessons/migration-meteor-blaze-to-react.md— Full migration playbooklessons/recommended-changes.md— P0-P3 library improvement proposalsCode Changes
src/brands/types.ts: ExtendedgenerateTailwindTheme()to include optional color scales (secondary, neutral, destructive, success, warning, info) when present in BrandConfig — aligns Tailwind preset output withgenerateBrandCSS()behaviorsrc/styles/init.css: New quick-start CSS file with@themeblock, dark mode variant, and brand tokens (exported as./init.css)src/styles/setup.css: Demoted to documentation-only reference snippet (not exported, not copied to dist)package.json: Added./init.cssexport; removed./setup.cssexport; stopped copyingsetup.cssto distKey Recommendations (from lessons/)
var()in base.css@themegenerateBrandCSS()to emit all 7 color scalesinit.csswith@theme+@custom-variantdirectives