How to use Tailwind CSS in React Native
April 30, 2023
Introduction
Setting up Tailwind CSS in React Native can be difficult, while React Native and Tailwind CSS are two of the most successful open-source projects, each with over 60k stars on GitHub. Even so, react native those not support Tailwind out of the box since, by default; React Native uses the yoga layout for flex displays. Some advantages of working with Tailwind CSS are the following
- Faster development: Tailwind CSS makes it easier and faster to build responsive user interfaces. The pre-defined utility classes help you quickly style elements without writing custom CSS code.
- Consistency: Tailwind CSS provides a consistent design system that can be used across your entire project. This helps ensure that your application looks and feels the same no matter where it’s used.
- Customization: Tailwind CSS is highly customizable, and you can easily modify the default utility classes or create your own to fit your specific needs.
this article will explore two ways to use Tailwind CSS in React Native.
1. NativeWind
NativeWind is a package that uses Tailwind CSS as a scripting language to create a style system for React Native. It’s the most popular package, with over 2.2k on GitHub. NativeWind offers some features, such as:-
- Pseudo-classes
- Pre-complied
- fast running
and many more. To get started with nativeWind, follow the following steps
- Create a blank project with expo-go; run the following command.
yarn create expo-app nativewind
2. next, run the project for that, and run the command that follows
yarn start
This will open the expo application; now, we need to install native wind and to do so, run the command that follows
yarn add nativewind
yarn add --dev tailwindcss
now we need to set up the TailWind.
Setup Tailwind CSS
To set up Tailwind CSS, we need to install Tailwind CSS locally in your project; for that, run the command below.
npx tailwindcss init
This will create the tailwind.config.js file, which is used for tailwind configs, and modify the file to look like this.
// tailwind.config.js
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
After that, we need to create a file for the configurations, so go ahead and create a file called babel.config.js with the following formats.
// babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["nativewind/babel"],
};
};
Now that’s done, you can start writing tailwind CSS in your application to test that modify your App.js as follows.
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
export default function App() {
return (
<View className="flex-1 items-center justify-center bg-white">
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
Now your application is ready, and you can start writing tailwind CSS in your application 😀.
2.Tailwind-RN
In the section above we saw how to setup tailwind css for React native using native wind; in this section, we are going to see how to do the same with tailwind-rn, which is a new package that offers the same possibilities as the native wind with over 2k stars on GitHub.
To get started, we will install tailwind-rn in our project by doing
npm install tailwind-rn
Now that the dependency is set up, we must configure tailwind-rn for tailwind css to start working out of the box; run the following command.
npx setup-tailwind-rn
This command will create some necessary files and install needed dependencies jus wait for the command to finish; after that, we will need to update your App.js to test the installation.
// App.js
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import { TailwindProvider } from "tailwind-rn";
import utilities from "./tailwind.json";
const MyComponent = () => {
const tailwind = useTailwind();
return <Text style={tailwind("text-blue-600")}>Hello world</Text>;
};
export default function App() {
return (
<TailwindProvider utilities={utilities}>
<MyComponent />
</TailwindProvider>
);
}
And that’s it. You can now run your tailwind styles in react-native without any issues.
Conclusion
In this article, we saw how to set up Tailwind for react native, using native-tailwind and tailwind-rn, which are two great packages for the code source of the project; they can be found here. If you face any issues, feel free to ask in the comments.
lewatt23
Stanly is a web and mobile developer passionate about creating engaging and user-friendly digital experiences. he has 4+ years building web and mobile applications.
Related Posts
You may also like