fix: nativewind support tailwind css v3 for native app #455
Conversation
|
WalkthroughThis change introduces a new helper function to set up TailwindCSS-related dependencies for projects using the "native-nativewind" frontend option. It ensures the correct versions of TailwindCSS, autoprefixer, and postcss are added, updates the Metro bundler config for module resolution, and pins the TailwindCSS version in the template. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CLI
participant FrontendSetup
participant PackageManager
User->>CLI: Run project creation command
CLI->>FrontendSetup: setupFrontendTemplates(...)
CLI->>FrontendSetup: setupFrontendDependencies(options)
FrontendSetup->>PackageManager: add TailwindCSS, autoprefixer, postcss (if native-nativewind)
PackageManager-->>FrontendSetup: Dependency installation result
FrontendSetup-->>CLI: Setup complete
CLI->>CLI: Continue with backend and other setup
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Assessment against linked issues
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
commit: |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/cli/src/helpers/setup/frontend-setup.ts (1)
11-11: Remove unused variable or implement unistyles logic.The
hasUnistylesvariable is declared but never used in the function logic. Either implement the handling for unistyles or remove this variable to clean up the code.- const hasUnistyles = frontend.includes("native-unistyles");Or if unistyles support is planned, consider adding the logic:
if (hasNativeWind) { // existing nativewind logic... + } else if (hasUnistyles) { + // TODO: Add unistyles dependency setup } else {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (6)
apps/cli/src/constants.ts(1 hunks)apps/cli/src/helpers/project-generation/create-project.ts(2 hunks)apps/cli/src/helpers/setup/frontend-setup.ts(1 hunks)apps/cli/templates/frontend/native/nativewind/metro.config.js(1 hunks)apps/cli/templates/frontend/native/nativewind/package.json.hbs(1 hunks)apps/cli/test-nativewind(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
📚 Learning: the angular frontend template uses tailwind css v4, which doesn't require a traditional tailwind.con...
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
Applied to files:
apps/cli/templates/frontend/native/nativewind/package.json.hbsapps/cli/src/helpers/setup/frontend-setup.tsapps/cli/src/constants.ts
🪛 Biome (2.1.2)
apps/cli/src/helpers/setup/frontend-setup.ts
[error] 11-11: This variable hasUnistyles is unused.
Unused variables are often the result of an incomplete refactoring, typos, or other sources of bugs.
Unsafe fix: If this is intentional, prepend hasUnistyles with an underscore.
(lint/correctness/noUnusedVariables)
🔇 Additional comments (6)
apps/cli/test-nativewind (1)
1-1: Review comment not applicable – no Git submodule detected
Theapps/cli/test-nativewinddirectory is a regular folder (no.gitmodulesor.gitinside), and there’s no submodule or raw-commit pointer in this PR. Please disregard the submodule setup recommendation.Likely an incorrect or invalid review comment.
apps/cli/templates/frontend/native/nativewind/package.json.hbs (1)
45-45: LGTM! Version pinning addresses NativeWind compatibility.Pinning
tailwindcssto the exact version3.4.17is the correct approach to ensure NativeWind compatibility, as mentioned in the PR objectives that "NativeWind only supports Tailwind CSS v3". This prevents version conflicts that could arise from caret ranges.apps/cli/templates/frontend/native/nativewind/metro.config.js (1)
20-22: LGTM! Metro resolver config supports local dependency precedence.The
resolverMainFieldsconfiguration correctly prioritizesreact-nativefield resolution, which aligns with the PR's strategy to ensure local node_modules take precedence over root ones. This helps resolve the Tailwind CSS version conflict between root (v4) and local (v3) installations.apps/cli/src/helpers/project-generation/create-project.ts (2)
35-35: LGTM! Clean import addition.The import is properly structured and follows the existing import organization pattern.
46-46: LGTM! Well-positioned dependency setup.The placement of
setupFrontendDependencies(options)immediately aftersetupFrontendTemplatesis logical and ensures frontend dependencies are configured early in the project creation flow, before backend setup begins.apps/cli/src/helpers/setup/frontend-setup.ts (1)
17-34: LGTM! Solid dependency management with proper error handling.The core functionality correctly adds TailwindCSS dependencies (
autoprefixer,postcss,tailwindcss) to the root package.json when NativeWind is detected. The error handling and logging provide good visibility into the process.
| // TailwindCSS and related dependencies | ||
| autoprefixer: "^10.4.21", | ||
| postcss: "^8.5.6", | ||
| tailwindcss: "^3.4.17", |
There was a problem hiding this comment.
Pin exact Tailwind version and correct PostCSS release to avoid install failures
postcss@8.5.6has not been published on npm (latest 8.x is 8.4.x). Trying to install it will break project generation.- NativeWind is extremely sensitive to the exact Tailwind major and minor version. Using
^3.4.17risks silently bumping to 3.5/3.6 once they are released and re-introducing the incompatibility we’re fixing.
- autoprefixer: "^10.4.21",
- postcss: "^8.5.6",
- tailwindcss: "^3.4.17",
+ autoprefixer: "10.4.21",
+ postcss: "8.4.35",
+ tailwindcss: "3.4.17",Pinning all three to published, known-good versions guarantees reproducible scaffolding across package managers and CI.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // TailwindCSS and related dependencies | |
| autoprefixer: "^10.4.21", | |
| postcss: "^8.5.6", | |
| tailwindcss: "^3.4.17", | |
| // TailwindCSS and related dependencies | |
| autoprefixer: "10.4.21", | |
| postcss: "8.4.35", | |
| tailwindcss: "3.4.17", |
🤖 Prompt for AI Agents
In apps/cli/src/constants.ts around lines 121 to 124, the versions for postcss
and tailwindcss are not pinned to exact, published versions, which can cause
install failures and compatibility issues. Change the postcss version to the
latest published 8.x version (e.g., 8.4.x) and pin tailwindcss to the exact
known-good version (e.g., 3.4.17 without the caret) to prevent automatic minor
or patch upgrades. Also, pin autoprefixer to an exact version to ensure
consistent dependency resolution.
| export async function setupFrontendDependencies(config: ProjectConfig) { | ||
| const { frontend, projectDir } = config; | ||
|
|
||
| // Check if nativewind is being used | ||
| const hasNativeWind = frontend.includes("native-nativewind"); | ||
| const hasUnistyles = frontend.includes("native-unistyles"); | ||
|
|
||
| consola.info(`Frontend: ${frontend.join(", ")}`); | ||
| consola.info(`Has NativeWind: ${hasNativeWind}`); | ||
| consola.info(`Project Dir: ${projectDir}`); | ||
|
|
||
| if (hasNativeWind) { | ||
| try { | ||
| consola.info("Adding TailwindCSS dependencies..."); | ||
| // Add TailwindCSS and related dependencies to root package.json | ||
| await addPackageDependency({ | ||
| devDependencies: ["autoprefixer", "postcss", "tailwindcss"], | ||
| projectDir, | ||
| }); | ||
|
|
||
| consola.success( | ||
| pc.green("Added TailwindCSS dependencies to root package.json"), | ||
| ); | ||
| } catch (error) { | ||
| consola.error(pc.red("Failed to add TailwindCSS dependencies")); | ||
| if (error instanceof Error) { | ||
| consola.error(pc.red(error.message)); | ||
| } | ||
| } | ||
| } else { | ||
| consola.info("NativeWind not detected, skipping TailwindCSS dependencies"); | ||
| } | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify dependency versions are defined in constants.
Ensure that the dependencies being added (autoprefixer, postcss, tailwindcss) have their versions properly defined in the dependencyVersionMap constant, as mentioned in the AI summary.
🏁 Script executed:
#!/bin/bash
# Verify that TailwindCSS dependencies have versions defined in constants
ast-grep --pattern 'dependencyVersionMap = {
$$$
}'Length of output: 55
🏁 Script executed:
#!/bin/bash
# Search for dependencyVersionMap constant definition across the codebase
rg --color=never "dependencyVersionMap" -nLength of output: 514
🏁 Script executed:
#!/bin/bash
# Display the dependencyVersionMap entries to verify TailwindCSS dependencies
sed -n '30,100p' apps/cli/src/constants.tsLength of output: 1395
🏁 Script executed:
#!/bin/bash
# Check if TailwindCSS dependencies have versions defined in dependencyVersionMap
rg --color=never -n '"autoprefixer"' apps/cli/src/constants.ts
rg --color=never -n '"postcss"' apps/cli/src/constants.ts
rg --color=never -n '"tailwindcss"' apps/cli/src/constants.tsLength of output: 188
Add missing TailwindCSS dependency versions to dependencyVersionMap
The dependencyVersionMap in apps/cli/src/constants.ts currently lacks entries for autoprefixer, postcss, and tailwindcss. Since addPackageDependency looks up versions from this map, you should add these keys with their desired versions to avoid undefined–version errors.
• File: apps/cli/src/constants.ts
Insert within the dependencyVersionMap object (around line 30):
"autoprefixer": "<your-version-here>",
"postcss": "<your-version-here>",
"tailwindcss": "<your-version-here>",• Ensure the chosen versions match the TailwindCSS setup requirements for your project.
🧰 Tools
🪛 Biome (2.1.2)
[error] 11-11: This variable hasUnistyles is unused.
Unused variables are often the result of an incomplete refactoring, typos, or other sources of bugs.
Unsafe fix: If this is intentional, prepend hasUnistyles with an underscore.
(lint/correctness/noUnusedVariables)
🤖 Prompt for AI Agents
In apps/cli/src/constants.ts around line 30, the dependencyVersionMap object is
missing entries for autoprefixer, postcss, and tailwindcss, which are required
by the setupFrontendDependencies function. Add these three keys to
dependencyVersionMap with appropriate version strings that match your project's
TailwindCSS setup requirements to ensure addPackageDependency can resolve their
versions correctly and avoid undefined version errors.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/cli/src/helpers/setup/frontend-setup.ts (1)
17-37: Verify dependency versions are defined in constants.The logic flow is well-structured with proper error handling. However, ensure that the dependencies being added (
autoprefixer,postcss,tailwindcss) have their versions properly defined in thedependencyVersionMapconstant, as mentioned in previous reviews.Please verify that these dependencies have version entries in the constants file:
#!/bin/bash # Check if TailwindCSS dependencies have versions defined in dependencyVersionMap rg -n '"autoprefixer"' apps/cli/src/constants.ts rg -n '"postcss"' apps/cli/src/constants.ts rg -n '"tailwindcss"' apps/cli/src/constants.ts
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/cli/src/helpers/project-generation/create-project.ts(2 hunks)apps/cli/src/helpers/setup/frontend-setup.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/cli/src/helpers/project-generation/create-project.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
📚 Learning: the angular frontend template uses tailwind css v4, which doesn't require a traditional tailwind.con...
Learnt from: Vijayabaskar56
PR: AmanVarshney01/create-better-t-stack#310
File: apps/cli/templates/frontend/angular/src/app.component.html:1-7
Timestamp: 2025-06-08T17:57:33.083Z
Learning: The Angular frontend template uses Tailwind CSS v4, which doesn't require a traditional tailwind.config.js configuration file.
Applied to files:
apps/cli/src/helpers/setup/frontend-setup.ts
🪛 Biome (2.1.2)
apps/cli/src/helpers/setup/frontend-setup.ts
[error] 11-11: This variable hasUnistyles is unused.
Unused variables are often the result of an incomplete refactoring, typos, or other sources of bugs.
Unsafe fix: If this is intentional, prepend hasUnistyles with an underscore.
(lint/correctness/noUnusedVariables)
🔇 Additional comments (3)
apps/cli/src/helpers/setup/frontend-setup.ts (3)
1-4: LGTM!The imports are clean and all appear to be used appropriately in the function implementation.
6-8: LGTM!The function signature is well-defined with proper typing, and the destructuring approach cleanly extracts the required configuration properties.
13-16: LGTM!The logging statements provide excellent visibility into the function's operation and will be helpful for debugging and monitoring the setup process.
|
|
||
| // Check if nativewind is being used | ||
| const hasNativeWind = frontend.includes("native-nativewind"); | ||
| const hasUnistyles = frontend.includes("native-unistyles"); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove unused variable or implement Unistyles support.
The hasUnistyles variable is defined but never used in the function. Either remove it if Unistyles support isn't planned, or implement the corresponding logic.
- const hasUnistyles = frontend.includes("native-unistyles");Alternatively, if Unistyles support is planned, consider implementing similar dependency setup logic for it.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const hasUnistyles = frontend.includes("native-unistyles"); |
🧰 Tools
🪛 Biome (2.1.2)
[error] 11-11: This variable hasUnistyles is unused.
Unused variables are often the result of an incomplete refactoring, typos, or other sources of bugs.
Unsafe fix: If this is intentional, prepend hasUnistyles with an underscore.
(lint/correctness/noUnusedVariables)
🤖 Prompt for AI Agents
In apps/cli/src/helpers/setup/frontend-setup.ts at line 11, the variable
hasUnistyles is declared but never used. To fix this, either remove the
hasUnistyles declaration if Unistyles support is not intended, or implement the
necessary logic to handle Unistyles dependencies similarly to other frontend
options if support is planned.
Fix: #454
Enable the support the tailwind v3 for nativewind (native apps).
Core fix step
Root node_modules support the v4 for tailwind css which is good for others app but for nativewind it is not good.
So we need to install some tailwind depd in root and handle correclty and
Ensure local node_modules takes precedence.See the all screenshots carefully.
Testing Env
Summary by CodeRabbit
New Features
Chores