In this article we will learn how to use
Tailwind CSS in React Native applications. But before we begin, we should know what
Tailwind CSS is and how it can be helpful in developing good user interfaces.
What is Tailwind CSS?
A utility-first CSS framework packed with classes that can be composed to build any user interface, directly in your HTML file. The good thing of this framework is it doesn't impose any design specification, which means you're not restricted for creating any design of your choice.
It is highly performant and small in size, Tailwind automatically removes all unused CSS when building for production, it ships the smallest CSS bundle possible. In fact, most Tailwind projects ship less than 10kB of CSS to the client.
Now, we've understood what Tailwind is, let us use see how we define classes in our
React App using JSX. For example, you could style a button with just a few classes which Tailwind offers.
Let us move forward by understanding how can we use
Tailwind CSS in React Native application.
It is a package that uses
Tailwind CSS as scripting language to create a universal style system for React Native. NativeWind components can be shared between platforms and will output their styles as
CSS Stylesheet on web and
Stylesheet for native.
React Native's Stylesheet system only provides static styles, with other features left for the user to implement. By using NativeWind you can focus on writing your system instead of building your own custom style system.
Step 1. Set up project
To set up our project, we'll scaffold a new react Native app using
react-native init. If you have already done this, skip this process, otherwise, run the command below:
Choose "Default new app" and then move into the project's directory.
Step 2. Install NativeWind
nativewind and it's peer dependency
Step 3. Set up Tailwind
Setup Tailwind CSS, run the command
npx tailwindcss init to create a
Step 4. Add Babel plugin
Add the Babel plugin, modify your
NativeWind extends the React Native types via declaration merging. The simplest method to include the types is to create a new
app.d.ts file and add a
triple-slash directive referencing the types.
Customizing the default theme for your project.
theme section of your
tailwind.config.js file is where you define your project’s color palette, type scale, fonts, border radius values, and more.
If you need theme values at runtime, its best to retrieve them directly from tailwind or your
Creating custom components
NativeWind also allow us to create our own components along with Tailwind classes.
Passing classes (or) style to components
When passing styles between components, they are compiled on the parent and then passed as a
style prop to the child.
styled() is a Higher-Order Component which allows your component to accept either the
className props. These props are compiled into Stylesheet objects and passed to your component via the
To sum up, Tailwind CSS won't restrict you for creating any design of your choice. You define that with adding classes for the required design.
I believe, this would be enough for getting started with Tailwind CSS in React Native. If you want to explore more, you can visit
NativeWind and experiment.