tailwind setup and config

Author: anilyavas

.gitignore

@@ -31,6 +31,7 @@ yarn-error.*
 
 # local env files
 .env*.local
+.env
 
 # typescript
 *.tsbuildinfo

babel.config.js

@@ -1,6 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
   };
 };

global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });

nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

src/app/_layout.tsx

@@ -1,4 +1,5 @@
 import { Stack } from 'expo-router';
+import '../../global.css';
 
 export default function RootLayout() {
   return <Stack />;

src/app/index.tsx

@@ -2,8 +2,8 @@ import { View, Text } from 'react-native';
 
 export default function Home() {
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Text>Hello World</Text>
+    <View>
+      <Text className='text-lg font-bold text-red-500'>Hello World</Text>
     </View>
   );
 }

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};