From c750bd4c94a52d4d9a491bc5db4005642cd7a31e Mon Sep 17 00:00:00 2001 From: baizhi958216 <1475289190@qq.com> Date: Tue, 30 Jun 2026 13:57:25 +0800 Subject: [PATCH] chore: configure nativewind styling --- babel.config.js | 7 +++++++ metro.config.js | 17 +++++++++-------- nativewind-env.d.ts | 3 +++ package.json | 8 +++++++- src/app/_layout.tsx | 1 + src/constants/theme.ts | 2 -- src/global.css | 17 ++++++++++++----- tailwind.config.js | 9 +++++++++ tsconfig.json | 6 ++++-- 9 files changed, 52 insertions(+), 18 deletions(-) create mode 100644 babel.config.js create mode 100644 nativewind-env.d.ts create mode 100644 tailwind.config.js diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..86b3bf5 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,7 @@ +module.exports = function (api) { + api.cache(true); + + return { + presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"], + }; +}; diff --git a/metro.config.js b/metro.config.js index 47d6a08..5a00119 100644 --- a/metro.config.js +++ b/metro.config.js @@ -1,20 +1,21 @@ -const path = require('path'); -const { getDefaultConfig } = require('expo/metro-config'); +const path = require("path"); +const { getDefaultConfig } = require("expo/metro-config"); +const { withNativeWind } = require("nativewind/metro"); const projectRoot = __dirname; -const workspaceRoot = path.resolve(projectRoot, '..'); +const workspaceRoot = path.resolve(projectRoot, ".."); const config = getDefaultConfig(projectRoot); config.watchFolders = [workspaceRoot]; config.resolver.alias = { ...config.resolver.alias, - '@infiplot/core': path.resolve(workspaceRoot, 'packages/core/src/index.ts'), - '@infiplot/types': path.resolve(workspaceRoot, 'packages/types/src/index.ts'), + "@infiplot/core": path.resolve(workspaceRoot, "packages/core/src/index.ts"), + "@infiplot/types": path.resolve(workspaceRoot, "packages/types/src/index.ts"), }; config.resolver.nodeModulesPaths = [ - path.resolve(projectRoot, 'node_modules'), - path.resolve(workspaceRoot, 'node_modules'), + path.resolve(projectRoot, "node_modules"), + path.resolve(workspaceRoot, "node_modules"), ]; -module.exports = config; +module.exports = withNativeWind(config, { input: "./src/global.css" }); diff --git a/nativewind-env.d.ts b/nativewind-env.d.ts new file mode 100644 index 0000000..c0d8380 --- /dev/null +++ b/nativewind-env.d.ts @@ -0,0 +1,3 @@ +/// + +// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind. \ No newline at end of file diff --git a/package.json b/package.json index a350647..f301c34 100644 --- a/package.json +++ b/package.json @@ -19,18 +19,24 @@ "expo-symbols": "~56.0.6", "expo-system-ui": "~56.0.5", "expo-web-browser": "~56.0.5", + "nativewind": "^4.2.6", "react": "19.2.3", "react-dom": "19.2.3", "react-native": "0.85.3", + "react-native-css-interop": "^0.2.6", "react-native-gesture-handler": "~2.31.1", "react-native-reanimated": "4.3.1", "react-native-safe-area-context": "~5.7.0", "react-native-screens": "4.25.2", "react-native-web": "~0.21.0", - "react-native-worklets": "0.8.3" + "react-native-worklets": "0.8.3", + "tailwindcss": "^3.4.15" }, "devDependencies": { "@types/react": "~19.2.2", + "eslint": "^9.0.0", + "eslint-config-expo": "~56.0.4", + "prettier-plugin-tailwindcss": "^0.8.0", "typescript": "~6.0.3" }, "scripts": { diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index b58e11f..9d37f24 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -1,6 +1,7 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router'; import { useColorScheme } from 'react-native'; +import '@/global.css'; import { AnimatedSplashOverlay } from '@/components/animated-icon'; import AppTabs from '@/components/app-tabs'; diff --git a/src/constants/theme.ts b/src/constants/theme.ts index c10ed27..f9496bd 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -3,8 +3,6 @@ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc. */ -import '@/global.css'; - import { Platform } from 'react-native'; export const Colors = { diff --git a/src/global.css b/src/global.css index c8fe503..2db9593 100644 --- a/src/global.css +++ b/src/global.css @@ -1,9 +1,16 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + :root { --font-display: - Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol, Noto Color Emoji; + Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, + Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; --font-mono: - ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; - --font-rounded: 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif; - --font-serif: Georgia, 'Times New Roman', serif; + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, + Courier New, monospace; + --font-rounded: + "SF Pro Rounded", "Hiragino Maru Gothic ProN", Meiryo, "MS PGothic", + sans-serif; + --font-serif: Georgia, "Times New Roman", serif; } diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..643e7ab --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{js,jsx,ts,tsx}", "./app/**/*.{js,jsx,ts,tsx}"], + presets: [require("nativewind/preset")], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/tsconfig.json b/tsconfig.json index 9295d06..8bce061 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "expo/tsconfig.base", "compilerOptions": { + "jsxImportSource": "nativewind", "strict": true, "paths": { "@/*": [ @@ -21,6 +22,7 @@ "**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", - "expo-env.d.ts" + "expo-env.d.ts", + "nativewind-env.d.ts" ] -} +} \ No newline at end of file