styling-nativewind-v4-expo by tristanmanchester/agent-skills
npx skills add https://github.com/tristanmanchester/agent-skills --skill styling-nativewind-v4-expotailwind.config.js 中包含 presets: [require("nativewind/preset")]。global.css),并确保其在以下位置路径一致:
metro.config.js → withNativeWind(..., { input: "./global.css" })import "./global.css"(或从 app/_layout.tsx 中 import "../global.css")广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
presets 中保留 nativewind/babel,并在 babel-preset-expo 上设置 jsxImportSource: "nativewind"。npx expo start --clear。复制/粘贴并勾选完成:
references/expo-setup.md。tailwind.config.js(内容通配符 + nativewind/preset)。global.css。babel.config.js(jsxImportSource + nativewind/babel)。metro.config.js(用 withNativeWind 包装配置,设置 input)。app.json → expo.web.bundler = "metro"。/// <reference types="nativewind/types" /> 的 nativewind-env.d.ts。npx expo start --clear。app/_layout.tsx → 在那里导入 CSS(相对路径通常是 ../global.css)。App.tsx → 在那里导入 CSS(./global.css)。如果不确定,请在 package.json 中搜索 "main": "expo-router/entry"。
接受 className,合并默认值,并可选择使用类变体辅助工具。
阅读:references/patterns.md
使用 remapProps(多个样式属性)或 cssInterop(将类属性映射到样式属性)。
阅读:references/third-party-components.md
使用 useColorScheme / colorScheme.set() 和通过 vars() 使用的 CSS 变量。
阅读:references/theming-dark-mode.md
在 Expo Router 上,不要 添加你自己的 SafeAreaProvider(Router 已经提供了)。使用 p-safe、pt-safe 等。
如果没有使用 Expo Router,请用 SafeAreaProvider 包装根组件。
npx expo start --clear。metro.config.js 中的 input 指向它tailwind.config.js 中的 content 通配符包含了所有包含 className 字符串的目录。阅读:references/troubleshooting.md
使用此提示对现有仓库执行确定性审计:
You are auditing an Expo React Native repo for NativeWind v4 correctness.
1) Identify whether the project uses Expo Router (app/ directory + package.json main = expo-router/entry) or classic App.tsx.
2) Check and report on:
- tailwind.config.js: presets + content globs
- global.css: Tailwind directives exist
- babel.config.js: jsxImportSource nativewind + nativewind/babel in presets; preserve any existing required plugins
- metro.config.js: withNativeWind wrapper; input path matches the CSS file
- app.json: web bundler metro when web is used
- TypeScript: nativewind-env.d.ts present and correctly named
3) For every issue, propose the minimal diff needed to fix it.
4) End by listing the exact commands to restart Metro and validate the fix.
每周安装量
111
仓库
首次出现
2026年2月9日
安全审计
安装于
opencode110
gemini-cli108
codex108
github-copilot106
cursor101
amp97
presets: [require("nativewind/preset")] in tailwind.config.js.global.css) and keep its path consistent across:
metro.config.js → withNativeWind(..., { input: "./global.css" })import "./global.css" (or import "../global.css" from app/_layout.tsx)nativewind/babel in Babelpresets and set jsxImportSource: "nativewind" on babel-preset-expo.npx expo start --clear.Copy/paste and tick off:
references/expo-setup.md.tailwind.config.js (content globs + nativewind/preset).global.css with Tailwind directives.babel.config.js (jsxImportSource + nativewind/babel).metro.config.js (wrap config with withNativeWind, set input).app.json → .app/_layout.tsx → import CSS there (relative path is typically ../global.css).App.tsx → import CSS there (./global.css).If unsure, search package.json for "main": "expo-router/entry".
Accept className, merge defaults, and optionally use a class-variance helper.
Read: references/patterns.md
Use remapProps (multiple style props) or cssInterop (map a class prop to a style prop).
Read: references/third-party-components.md
Use useColorScheme / colorScheme.set() and CSS variables via vars().
Read: references/theming-dark-mode.md
On Expo Router, do not add your own SafeAreaProvider (Router already does). Use p-safe, pt-safe, etc.
If you are not using Expo Router, wrap the root with SafeAreaProvider.
npx expo start --clear.metro.config.js input points to ittailwind.config.js content globs include every directory that contains className strings.Read: references/troubleshooting.md
Use this prompt to perform a deterministic audit of an existing repo:
You are auditing an Expo React Native repo for NativeWind v4 correctness.
1) Identify whether the project uses Expo Router (app/ directory + package.json main = expo-router/entry) or classic App.tsx.
2) Check and report on:
- tailwind.config.js: presets + content globs
- global.css: Tailwind directives exist
- babel.config.js: jsxImportSource nativewind + nativewind/babel in presets; preserve any existing required plugins
- metro.config.js: withNativeWind wrapper; input path matches the CSS file
- app.json: web bundler metro when web is used
- TypeScript: nativewind-env.d.ts present and correctly named
3) For every issue, propose the minimal diff needed to fix it.
4) End by listing the exact commands to restart Metro and validate the fix.
Weekly Installs
111
Repository
First Seen
Feb 9, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
opencode110
gemini-cli108
codex108
github-copilot106
cursor101
amp97
TanStack Table 中文指南:React 无头表格库,实现排序过滤分页
541 周安装
baoyu-image-gen:多平台AI图像生成工具,支持OpenAI、Google、阿里通义等主流API
16,400 周安装
Vercel AI SDK 中文指南:构建AI应用、智能体与React集成
16,600 周安装
Expo SDK 升级指南:从 53+ 到 55,涵盖新架构、React 19 及音频视频迁移
17,200 周安装
Vue 3.5 最佳实践指南:Composition API、TypeScript 与性能优化技巧
17,200 周安装
Vue.js 最佳实践工作流指南:从架构设计到性能优化
17,900 周安装
template-skill 模板技能 | Anthropic 官方技能模板 | 高效开发 AI 助手技能
19,100 周安装
expo.web.bundler = "metro"nativewind-env.d.ts with /// <reference types="nativewind/types" />.npx expo start --clear.