{"id":2895,"date":"2025-03-13T16:44:56","date_gmt":"2025-03-13T15:44:56","guid":{"rendered":"https:\/\/uniquedevs.com\/blog\/nativewind-czyli-jak-uzywac-tailwind-css-w-react-native\/"},"modified":"2025-03-19T12:06:51","modified_gmt":"2025-03-19T11:06:51","slug":"nativewind-using-tailwind-css-in-react-native","status":"publish","type":"post","link":"https:\/\/uniquedevs.com\/en\/blog\/nativewind-using-tailwind-css-in-react-native\/","title":{"rendered":"NativeWind – using Tailwind CSS in React Native"},"content":{"rendered":"\n

What is NativeWind?<\/h2>\n\n\n\n

NativeWind is a styling library for React Native that enables the use of Tailwind CSS in mobile applications. It acts as an interpreter of Tailwind classes, converting them to native React Native styles, allowing for faster and more intuitive component styling. By integrating with Tailwind CSS, NativeWind ensures style consistency across platforms and high performance, eliminating the need to manually define styles in StyleSheet objects.<\/p>\n\n\n\n

What is Tailwind CSS?<\/h2>\n\n\n\n

Tailwind CSS is a utility-first CSS framework that provides a set of pre-built classes, such as flex, pt-4 or text-center, that allow you to quickly style interfaces without writing custom CSS. It allows you to directly define the appearance in HTML or JSX, and supports the mobile-first approach and responsive design. This makes it easy to create consistent, scalable designs and is especially popular among web and mobile developers who want to prototype and build user interfaces quickly.<\/p>\n\n\n\n

How to use NativeWind in React Native? – step by step<\/h2>\n\n\n\n

Step 1. Configure a new project in React Native<\/h3>\n\n\n\n

Before we start using Tailwind CSS<\/a> in React Native, we need to prepare the project. There are two main methods to create a React Native application: using Expo or using the React Native CLI. Check out the detailed information on how to start a project in React Native?<\/a><\/p>\n\n\n\n

Option 1: React Native CLI (full control).<\/strong><\/p>\n\n\n\n

If you want to access native modules, use the React Native CLI:<\/p>\n\n\n\n

npx react-native init MyApp\n\ncd MyApp\n\nnpx react-native run-android\u00a0 # for Androida\n\nnpx react-native run-ios\u00a0 \u00a0 \u00a0 # for iOS (only on macOS)<\/code><\/pre>\n\n\n\n
Option 2: Expo (simpler and faster)<\/strong><\/p>\n\n\n\n
Expo is a tool that makes it easy to develop React Native<\/a> applications without having to set up a native environment. If you don’t have it yet, install the Expo CLI:<\/p>\n\n\n\n
npm install -g expo-cli<\/code><\/pre>\n\n\n\n
Then create and launch a new project:<\/p>\n\n\n\n
npx create-expo-app my-app\n\ncd my-app\n\nnpx expo start<\/code><\/pre>\n\n\n\n
The app can be tested on a mobile device using Expo Go.<\/p>\n\n\n\n
Step 2. Install NativeWind<\/h3>\n\n\n\n
To add NativeWind to your project, run the following command:<\/p>\n\n\n\n
npm install nativewind<\/code><\/pre>\n\n\n\n
NativeWind also requires the configuration of Babel<\/a>, in order to correctly interpret Tailwind CSS classes. Open the babel.config.js file and add the NativeWind plugin:<\/p>\n\n\n\n
module.exports = function (api) {\n\n  api.cache(true);\n\n  return {\n\n    presets: [\"babel-preset-expo\"],\n\n    plugins: [\"nativewind\/babel\"],\n\n  };\n\n};<\/code><\/pre>\n\n\n\n
With this configuration, NativeWind will be able to dynamically process Tailwind CSS classes in React Native code.<\/p>\n\n\n                        
\n                
\n                    \"Need\n                <\/div>\n                
\n                    \"Need\n                <\/div>\n                
\n                                            
\n                            Need support with mobile projects?                        <\/div>\n                                                                                            \n                                Write to us!                            <\/a>\n                                                            <\/div>\n            <\/div>\n            \n\n\n
Step 3. Configure Tailwind CSS<\/h3>\n\n\n\n
The next step is to install Tailwind CSS and create a configuration file:<\/p>\n\n\n\n
npm install tailwindcss\n\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
After executing this command, a tailwind.config.js file will appear in the project directory. Open it and adjust the configuration by adding paths to the React Native component files:<\/p>\n\n\n\n
\/** @type {import('tailwindcss').Config} *\/\n\nmodule.exports = {\n\n  content: [\".\/App.{js,jsx,ts,tsx}\", \".\/components\/**\/*.{js,jsx,ts,tsx}\"],\n\n  theme: {\n\n    extend: {},\n\n  },\n\n  plugins: [],\n\n};<\/code><\/pre>\n\n\n\n
This way Tailwind CSS will know which files to analyze and where to apply its classes.<\/p>\n\n\n\n
Step 4. Configure Babel for NativeWind<\/h3>\n\n\n\n
In order for NativeWind to correctly interpret Tailwind CSS classes in React Native, it is necessary to configure Babel<\/strong>, which allows JavaScript code to be transformed before it is executed.<\/p>\n\n\n\n
First, make sure you already have NativeWind installed in your project.Then open the babel.config.js file located in the root directory of your project and add the NativeWind plugin to it:<\/p>\n\n\n\n
module.exports = function (api) {\n\n  api.cache(true);\n\n  return {\n\n    presets: [\"babel-preset-expo\"],\n\n    plugins: [\"nativewind\/babel\"],\n\n  };\n\n};<\/code><\/pre>\n\n\n\n
What does this configuration do?<\/strong><\/p>\n\n\n\n