E-commerce UI with React Native and Tailwind CSS | Beginners tutorial | Code with Beto

Learn how to create a clean e-commerce UI using React Native combined with Tailwind CSS styles via the NativeWind library. You'll learn how to set up the project with Expo, installing dependencies, and configuring Tailwind for React Native.

You’ll also learn how to implement dark mode toggling using NativeWind’s color scheme hooks and how to style components efficiently with Tailwind classes. This tutorial is great for beginners who want to build mobile UI quickly with familiar Tailwind syntax.

What's inside

Setting up the React Native project with Expo and installing NativeWind and Tailwind CSS
Configuring tailwind.config.js for React Native and adjusting content paths
Adding NativeWind plugin to babel.config.js for Tailwind support
Using Tailwind CSS classes in React Native components and styling basics
Implementing dark mode support with NativeWind’s useColorScheme and toggleColorScheme hooks
Handling dark mode styling caveats, especially for text components
Creating UI elements like headers and product lists with Tailwind styles
Managing the status bar appearance based on light or dark mode

Setting up the React Native project with Expo and installing NativeWind and Tailwind CSS

I start by creating a new Expo project named "e-commerce" using the command:

After opening the project in Visual Studio Code, the next step is to install the required dependencies for styling:

NativeWind (Tailwind CSS for React Native)
Tailwind CSS itself

I copies installation commands from his platform and runs them to add these packages. This setup enables Tailwind-style utility classes in React Native projects.

Configuring tailwind.config.js for React Native and adjusting content paths

Once dependencies are installed, the tutorial covers generating the file using:

This config file defines which files Tailwind should scan for class names. I customize the array to include files inside a folder instead of a generic folder, matching the project structure.

This step ensures Tailwind processes the right files and applies styles correctly in the React Native environment.

Adding NativeWind plugin to babel.config.js for Tailwind support

To enable NativeWind’s Tailwind integration, you must add its Babel plugin. I copies a plugin line from his resources and inserts it into the array in :

This plugin allows Tailwind classes to be transformed properly during build time, making the styles work seamlessly in React Native.

Using Tailwind CSS classes in React Native components and styling basics

I demonstrate replacing the default React Native styles with Tailwind classes using the prop, similar to web Tailwind usage. For example:

This approach condenses styling into a single line, making the code cleaner and faster to write. I note that while many Tailwind utilities work, React Native has some limitations compared to web CSS.

Implementing dark mode support with NativeWind’s useColorScheme and toggleColorScheme hooks

I explain how to add dark mode support using NativeWind’s hooks:

to get the current color scheme (light or dark)
to switch between modes

I add a React Native component wired to these hooks, allowing users to toggle dark mode interactively. Tailwind classes prefixed with apply styles conditionally based on the active color scheme.

Handling dark mode styling caveats, especially for text components

A key caveat is that some dark mode styles, like , do not apply automatically to text components unless added directly to the element. Unlike web, React Native requires styles on the specific text tag.

I show how to move dark mode text color classes from parent views to the text components themselves to ensure proper color changes.

I also mentions that advanced CSS features like transitions, shadows, or blur effects are not supported in React Native Tailwind.

Creating UI elements like headers and product lists with Tailwind styles

The tutorial continues by building UI parts such as a "New Collection" header. I wrap text in a with flex row and gap utilities to align items horizontally with spacing.

I adjust font sizes and weights using Tailwind classes like and to style the header clearly.

Later, I add a products file with sample product data to populate the UI, demonstrating how to structure components and style them with Tailwind.

Managing the status bar appearance based on light or dark mode

I addresses an issue where the status bar icons are not visible in dark mode by conditionally setting the status bar style based on the color scheme:

Use component with for dark mode
Use for light mode

This ensures the status bar remains readable regardless of the app’s theme.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Let's connect!