As a React Native developer, I understand the struggles of implementing a CSS framework in your mobile app. That's why I'm here to share my journey and introduce you to Nativewind, the solution to all your CSS woes.

Like many others, I initially attempted to use a random package to implement Tailwind, the popular utility-focused CSS framework. However, the experience was far from seamless and caused more harm than good. That's when I stumbled upon Nativewind and my world changed.

Nativewind made implementing Tailwind in my React Native project a breeze. The seamless integration revolutionized the way I approach CSS in my mobile app development. And trust me, I never looked back.

If you're tired of constantly battling with your CSS framework, it's time to try Nativewind and experience the magic for yourself. Join me on this journey and let's take your React Native development to the next level.

What is Nativewind?

Nativewind is a package that uses Tailwind CSS to create a universal styling system for react native apps.

Why use Nativewind?

The default StyleSheet system in React Native only offers static styles; other capabilities must be added by the user. By utilizing NativeWind, you can concentrate on writing your system rather than creating a default custom style.

With Nativewind, you can:

• Handle pseudo-classes such as hover, focus, and active on compatible components such as a View Component.

• Handle media queries

• Automatically style children based on parent pseudo-classes

And many more…

Expo and React native CLI both support Nativewind. Additionally, it may be applied to a Next.js project that is set up to use Expo or standard React Native Web.

Setting up Nativewind in your project

// Expo
npx create-expo-app my-app

//or

// React native CLI npx react-native init my-app

cd my-app

Install Nativewind & Tailwind CSS

You will need to install nativewind and its peer dependency tailwindcss.

yarn add nativewind

yarn add — dev tailwindcss

Set up tailwind

run the command npx tailwindcss init to create a tailwind.config.js file.

In the content array found in the module export section of tailwind.config.js, include all the locations where your components will be stored.

In the following code snippet, I’d be adding my App.jsx as well as all the components in screens and components folders respectively.

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}",],
theme: {
extend: {}
},
plugins: [],
};

Add nativewind babel plugin

Edit the babel.config.js file in the root directory of your project and add the nativewind babel config

// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
+ plugins: ["nativewind/babel"],
};

You’re almost done!

After completing the preceding steps, it is best to reset the cache for your project using either expo start -c or react-native start –reset-cache.

This will guarantee that all Styles are functional throughout the entire app.

If tailwind’s styles randomly stop working, resetting the cache with the commands written above will help.

What’s next?

To learn more about Nativewind, visit Nativewind’s documentation at https://www.nativewind.dev/ to learn more.

In addition to using tailwind styles, animations are a simple method to enhance the appearance and experience of your application.

In my next article, I’ll be demonstrating how to make fluid animations with React Native Reanimated

Give this article a clap and follow me to get notified whenever it is published.

Thank you for taking the time to read my article.