feat: Add nativewind

Author: codinsonn

apps/expo/babel.config.js

@@ -1,7 +1,8 @@
 // babel.config.js
 module.exports = function (api) {
-  api.cache(true);
+  api.cache(true)
   return {
-    presets: ["babel-preset-expo"],
-  };
-};
+    presets: ['babel-preset-expo'],
+    plugins: ['nativewind/babel'],
+  }
+}

apps/expo/tailwind.config.js

@@ -0,0 +1,14 @@
+const { universalTheme } = require('@app/core/tailwind.theme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,jsx,ts,tsx}',
+    '../../features/**/*.{js,jsx,ts,tsx}',
+    '../../packages/**/*.{js,jsx,ts,tsx}',
+  ],
+  plugins: [],
+  theme: {
+    //...universalTheme,
+  },
+}

apps/next/babel.config.js

@@ -1,7 +1,8 @@
 // babel.config.js
 module.exports = function (api) {
-  api.cache(true);
+  api.cache(true)
   return {
-    presets: ["babel-preset-expo"],
-  };
-};
+    presets: ['babel-preset-expo'],
+    plugins: ['nativewind/babel', { mode: 'transformOnly' }],
+  }
+}

apps/next/global.css

@@ -1,3 +1,8 @@
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* -i- Upgrade from the CSS reset that came with Expo's default Next.js setup */
 /* Follows the setup for react-native-web: */
 /* https://necolas.github.io/react-native-web/docs/setup/#root-element */

apps/next/next.config.js

@@ -8,6 +8,7 @@ const nextConfig = withExpo({
     "react-native",
     "react-native-web",
     "expo",
+    "nativewind",
     // Add more React Native / Expo packages here...
   ],
   experimental: {

apps/next/package.json

@@ -5,7 +5,10 @@
   "dependencies": {
     "next": "~14.0.4"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "8.4.23"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build"

apps/next/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

apps/next/tailwind.config.js

@@ -0,0 +1,15 @@
+const { universalTheme } = require('@app/core/tailwind.theme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,jsx,ts,tsx}',
+    '../../features/**/*.{js,jsx,ts,tsx}',
+    '../../packages/**/*.{js,jsx,ts,tsx}',
+  ],
+  plugins: [require('nativewind/tailwind/css')],
+  important: 'html',
+  theme: {
+    ...universalTheme,
+  },
+}

features/app-core/components/Typography.tsx

@@ -0,0 +1,7 @@
+import { styled } from 'nativewind'
+import { Text } from 'react-native'
+
+export const H1 = styled(Text, 'font-bold text-2xl')
+export const H2 = styled(Text, 'font-bold text-xl')
+export const H3 = styled(Text, 'font-bold text-lg')
+export const P = styled(Text, 'text-base')

features/app-core/package.json

@@ -2,8 +2,11 @@
   "name": "@app/core",
   "version": "1.0.0",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "nativewind": "^2.0.11"
+  },
   "devDependencies": {
+    "tailwindcss": "3.3.2",
     "typescript": "5.3.3"
   },
   "scripts": {}