# Nativewind: Speeding up Styling in React Native

DevFeed: [Nativewind: Speeding up Styling in React Native](<https://devfeed.tech/articles/nativewind-speeding-up-styling-in-react-native-20117.md>)

Original publisher: [Read original article](<https://hashrocket.com/blog/posts/nativewind-speeding-up-styling-in-react-native>)

Author: Jack Rosa

Published: 2025-11-13T14:00:00Z

Content type: tutorial

Language: en

Sources: [Hashrocket](<https://devfeed.tech/sources/hashrocket.md>)

Topics: [React Native](<https://devfeed.tech/topics/react-native.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [Expo](<https://devfeed.tech/topics/expo.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [Prettier](<https://devfeed.tech/topics/prettier.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [css](<https://devfeed.tech/tags/css.md>), [init](<https://devfeed.tech/tags/init.md>), [install](<https://devfeed.tech/tags/install.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [react](<https://devfeed.tech/tags/react.md>), [react-native](<https://devfeed.tech/tags/react-native.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>), [tailwind-css](<https://devfeed.tech/tags/tailwind-css.md>), [tailwindcss](<https://devfeed.tech/tags/tailwindcss.md>)

## AI overview

A tutorial on using NativeWind to style React Native applications with Tailwind CSS classes. It explains NativeWind's runtime or Babel-plugin compile-time translation into React Native styles, and covers setup with Expo, Tailwind configuration, a global CSS file, and Babel.

## Source excerpt

How Nativewind can speed up your React Native Development If you're anything like me, after working on a few web projects with Tailwind, it can feel like a drag to return to stacks that use other styling libraries. Tailwind has become, for myself, and many other developers, a standard styling paradigm. When starting my most recent React Native project, I was relieved to find out that NativeWind exists. NativeWind is exactly what is sounds like: Tailwind Classes in React Native. I can attest to the breeziness of writing an entire native app without a single call to StyleSheet.create. It's Familiar Nativewind takes the familiar classes of Tailwind CSS directly to your React Native components. Virtually every* class from Tailwind CSS can be used the exact same way on your mobile app (and the web), and the development results end up being faster iteration, less translating, and components that feel more readable and maintainable. Let's look at how to set it up NativeWind translates Tailwind class names into React Native styles at runtime or compile-time, if you use the Babel plugin. You end up with the the same composable mindset of Tailwind, but the output is just React Native styles. The setup is simple enough, for my latest project we used expo: npx expo install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0 npx expo install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11 Now to generate a tailwind config, run: npx tailwindcss init Be sure to include the path to your components in the generated tailwind.config.js file /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"], presets: [require("nativewind/preset")], theme: { extend: {}, }, plugins: [], } Next create your global.css file with tailwind's directives @tailwind base; @tailwind components; @tailwind utilities; Then, enable the Babel plugin in babel.config.js: module.exports = function (api) { api