Skip to content

fix: nativewind support tailwind css v3 for native app #455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+50 −2
Open

fix: nativewind support tailwind css v3 for native app #455

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fcd6a8
fix: nativewind support tailwind css v3 for native app
JasrajChouhan Aug 1, 2025
52a89f9
chore: format the code
JasrajChouhan Aug 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions apps/cli/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,11 @@ export const dependencyVersionMap = {
"@opennextjs/cloudflare": "^1.3.0",
"nitro-cloudflare-dev": "^0.2.2",
"@sveltejs/adapter-cloudflare": "^7.0.4",

// TailwindCSS and related dependencies
autoprefixer: "^10.4.21",
postcss: "^8.5.6",
tailwindcss: "^3.4.17",
Comment on lines +121 to +124
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Pin exact Tailwind version and correct PostCSS release to avoid install failures

  1. [email protected] has not been published on npm (latest 8.x is 8.4.x). Trying to install it will break project generation.
  2. NativeWind is extremely sensitive to the exact Tailwind major and minor version. Using ^3.4.17 risks 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.

Suggested change
// 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.

} as const;

export type AvailableDependencies = keyof typeof dependencyVersionMap;
Expand Down
2 changes: 2 additions & 0 deletions apps/cli/src/helpers/project-generation/create-project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
setupExamplesTemplate,
setupFrontendTemplates,
} from "./template-manager";
import { setupFrontendDependencies } from "../setup/frontend-setup";

export async function createProject(options: ProjectConfig) {
const projectDir = options.projectDir;
Expand All @@ -42,6 +43,7 @@ export async function createProject(options: ProjectConfig) {

await copyBaseTemplate(projectDir, options);
await setupFrontendTemplates(projectDir, options);
await setupFrontendDependencies(options);
await setupBackendFramework(projectDir, options);
if (!isConvex) {
await setupDbOrmTemplates(projectDir, options);
Expand Down
38 changes: 38 additions & 0 deletions apps/cli/src/helpers/setup/frontend-setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import consola from "consola";
import pc from "picocolors";
import type { ProjectConfig } from "../../types";
import { addPackageDependency } from "../../utils/add-package-deps";

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");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
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.


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");
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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" -n

Length of output: 514

🏁 Script executed:

#!/bin/bash
# Display the dependencyVersionMap entries to verify TailwindCSS dependencies
sed -n '30,100p' apps/cli/src/constants.ts

Length 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.ts

Length 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.

3 changes: 3 additions & 0 deletions apps/cli/templates/frontend/native/nativewind/metro.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ config.resolver.unstable_enablePackageExports = true;

config.resolver.disableHierarchicalLookup = true;

// Ensure local node_modules takes precedence
config.resolver.resolverMainFields = ["react-native", "browser", "main"];

module.exports = config;

/**
Expand Down
2 changes: 1 addition & 1 deletion apps/cli/templates/frontend/native/nativewind/package.json.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"devDependencies": {
"@babel/core": "^7.26.10",
"@types/react": "~19.0.10",
"tailwindcss": "^3.4.17",
"tailwindcss": "3.4.17",
"typescript": "~5.8.2"
},
"private": true
Expand Down
1 change: 1 addition & 0 deletions apps/cli/test-nativewind
Open in desktop
Submodule test-nativewind added at 2160bd
2 changes: 1 addition & 1 deletion bun.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"apps/cli": {
"name": "create-better-t-stack",
"version": "2.28.3",
"version": "2.28.5",
"bin": {
"create-better-t-stack": "dist/index.js",
},
Expand Down
Loading