{"id":118,"date":"2025-08-29T08:47:49","date_gmt":"2025-08-29T08:47:49","guid":{"rendered":"https:\/\/blog.vyomscode.com\/?p=118"},"modified":"2025-08-29T08:47:49","modified_gmt":"2025-08-29T08:47:49","slug":"how-to-add-nativewind-tailwind-for-react-native-in-an-expo-project","status":"publish","type":"post","link":"https:\/\/blog.vyomscode.com\/index.php\/2025\/08\/29\/how-to-add-nativewind-tailwind-for-react-native-in-an-expo-project\/","title":{"rendered":"How to Add NativeWind (Tailwind for React Native) in an Expo Project"},"content":{"rendered":"\n<p>If you love the speed and flexibility of Tailwind CSS, you\u2019ll be happy to know you can use it directly in React Native through <strong>NativeWind<\/strong>. With the release of <strong>NativeWind v4<\/strong>, the setup is smoother and supports Expo SDK 50+ and React Native 0.74+.<\/p>\n\n\n\n<p>In this guide, we\u2019ll walk step-by-step to add <strong>NativeWind<\/strong> to a <strong>new Expo project<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Install Dependencies<\/h4>\n\n\n\n<p>In your Expo project folder, run:<\/p>\n\n\n\n<p><em>npx expo install nativewind react-native-reanimated react-native-safe-area-context<br>npm i -D tailwindcss prettier-plugin-tailwindcss<\/em><\/p>\n\n\n\n<ul>\n<li><code>nativewind<\/code> \u2192 Tailwind styling for RN<\/li>\n\n\n\n<li><code>react-native-reanimated<\/code> &amp; <code>react-native-safe-area-context<\/code> \u2192 required peer deps<\/li>\n\n\n\n<li><code>tailwindcss<\/code> \u2192 the actual Tailwind engine<\/li>\n\n\n\n<li><code>prettier-plugin-tailwindcss<\/code> \u2192 keeps your class names sorted (optional but nice)<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Initialize Tailwind<\/h4>\n\n\n\n<p>Create a Tailwind config:<\/p>\n\n\n\n<p><code><em>npx tailwindcss init<\/em><\/code><\/p>\n\n\n\n<p>Edit the generated <code>tailwind.config.js<\/code> to include your files and the NativeWind preset:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/** @type {import('tailwindcss').Config} *\/\r\nmodule.exports = {\r\n  content: &#91;\r\n    \".\/App.{js,jsx,ts,tsx}\",\r\n    \".\/app\/**\/*.{js,jsx,ts,tsx}\",\r\n    \".\/src\/**\/*.{js,jsx,ts,tsx}\"\r\n  ],\r\n  presets: &#91;require(\"nativewind\/preset\")],\r\n  theme: {\r\n    extend: {},\r\n  },\r\n  plugins: &#91;],\r\n};\r\n<\/code><\/pre>\n\n\n\n<p>Make sure the <code>content<\/code> globs match where your <code>.tsx<\/code> files live.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Create a Global CSS File<\/h4>\n\n\n\n<p>Create a file named <strong><code>global.css<\/code><\/strong> in your project root:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;<\/code><\/pre>\n\n\n\n<p>This is the input file NativeWind uses to generate classes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Configure Babel<\/h4>\n\n\n\n<p>Edit <code>babel.config.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: &#91;\n      &#91;\"babel-preset-expo\", { jsxImportSource: \"nativewind\" }],\n      \"nativewind\/babel\",\n    ],\n  };\n};\n<\/code><\/pre>\n\n\n\n<p>This tells Expo to process JSX with NativeWind.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Configure Metro<\/h4>\n\n\n\n<p>Edit <code>metro.config.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const { getDefaultConfig } = require(\"expo\/metro-config\");\r\nconst { withNativeWind } = require(\"nativewind\/metro\");\r\nconst config = getDefaultConfig(__dirname);\r\nmodule.exports = withNativeWind(config, { input: \".\/global.css\" });\r\n<\/code><\/pre>\n\n\n\n<p>Now Metro will read your global CSS file when bundling.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 6: Import Global CSS<\/h4>\n\n\n\n<p>At the very top of your <code>App.tsx<\/code> (or entry file):<\/p>\n\n\n\n<p><code><em>import \".\/global.css\";<\/em><\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 7: Web Setup (Optional)<\/h4>\n\n\n\n<p>If you want to run your project in the browser (<code>expo start --web<\/code>), add this to <code>app.json<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\r\n  \"expo\": {\r\n    \"web\": {\r\n      \"bundler\": \"metro\"\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Step 8: TypeScript Setup<\/h4>\n\n\n\n<p>If you\u2019re using TypeScript, create a file called <strong><code>nativewind-env.d.ts<\/code><\/strong> (the name matters):<\/p>\n\n\n\n<p><code>\/\/\/ &lt;reference types=\"nativewind\/types\" \/&gt;<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 9: Restart with Cache Clear<\/h4>\n\n\n\n<p><em>npx expo start -c<\/em><br>This ensures Tailwind classes are picked up correctly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 10: Test It Out \ud83c\udf89<\/h4>\n\n\n\n<p>Try this in <code>App.tsx<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { View, Text } from \"react-native\";\r\nimport \"@\/global.css\";\r\n\r\nexport default function App() {\r\n  return (\r\n    &lt;View className=\"flex-1 items-center justify-center bg-white\">\r\n      &lt;Text className=\"text-xl font-bold text-blue-500\">\r\n        Welcome to NativeWind!\r\n      &lt;\/Text>\r\n    &lt;\/View>\r\n  );\r\n}\r\n<\/code><\/pre>\n\n\n\n<p>If you see a <strong>blue bold heading<\/strong>, congrats! NativeWind is working.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">Common Gotchas<\/h5>\n\n\n\n<ul>\n<li><strong>Classes not working?<\/strong> Double-check <code>content<\/code> paths in <code>tailwind.config.js<\/code>.<\/li>\n\n\n\n<li><strong>Not updating styles?<\/strong> Run <code>expo start -c<\/code> to clear cache.<\/li>\n\n\n\n<li><strong>Tailwind v4?<\/strong> Not supported yet \u2014 use Tailwind <strong>v3.4<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>&#8211; <a href=\"https:\/\/tripti.vyomscode.com\/\" data-type=\"link\" data-id=\"https:\/\/tripti.vyomscode.com\/\">Tripti<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you love the speed and flexibility of Tailwind CSS, you\u2019ll be happy to know you can use it directly in React Native through NativeWind. With the release [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/118"}],"collection":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":1,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/118\/revisions\/119"}],"wp:attachment":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}