Tailwind CSS in React Native — 2024

Tailwind CSS & React Native

Advanced Tailwind CSS Techniques for React Native Developers

What you’ll learn in this article:

• What is Tailwind CSS?
• Benefits of using Tailwind in React Native
• Why integrate Tailwind with a Babel plugin?
• Setting up Tailwind CSS in a React Native project
• Conclusion

What is Tailwind CSS?

Tailwind CSS is a unique utility-first CSS framework. It departs from traditional CSS paradigms by offering a vast collection of low-level utility classes. These classes, when combined, allow developers to construct any desired UI element. Tailwind fosters rapid prototyping and a consistent, component-agnostic styling approach.

Benefits of using Tailwind in React Native

• Rapid Prototyping: Tailwind’s utility classes enable rapid experimentation and UI construction, accelerating development cycles.
• Improved Consistency: Enforces consistent styling throughout your application, reducing inconsistencies and enhancing maintainability.
• Reduced CSS File Size: Tailwind only includes the classes you use, resulting in smaller CSS files and faster loading times.
• Platform-Agnostic Styling: Many classes work seamlessly across platforms, simplifying cross-platform development.

Why integrate Tailwind with a Babel plugin?

While Tailwind doesn’t directly integrate with React Native due to native platform limitations, Babel plugins bridge the gap. These plugins process your JSX code, transforming Tailwind classes into platform-specific styles. This approach offers:

• Simplified Workflow: Maintain your styling approach without significant modifications.
• Improved Performance: Plugins can optimize generated styles for native platforms, potentially leading to performance gains.

Setting up Tailwind CSS in a React Native project

1. Installation

You will need to install both nativewind and tailwindcss
tailwindcss is not used during runtime so it can be added as a development dependency.

yarn add nativewind
yarn add --dev tailwindcss@3.3.2

2. Configuration
Run npx tailwindcss init to create a tailwind.config.js file
Add the paths to all of your component files in your tailwind.config.js file.

// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}",
            "./<custom-folder>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}​

Key Changes:

• The content property now includes two elements:
• "./App.{js,jsx,ts,tsx}": Specifies that Tailwind should scan for Tailwind class usage in the App component file regardless of its extension (js, jsx, ts, or tsx). This ensures compatibility with different file types.
• "./<custom-folder>/**/*.{js,jsx,ts,tsx}": This pattern dynamically includes all files with the specified extensions (js, jsx, ts, or tsx) recursively within the folder named <custom-folder>. Replace <custom-folder> with the actual name of your custom folder.

By making these changes, you inform Tailwind about the locations where it should search for Tailwind classes being used in your React Native project, ensuring it generates the appropriate CSS styles based on your usage.

If you face dynamic file configuration issue like "./<custom-folder>/**/*.{js,jsx,ts,tsx}" you can check my Stack Overflow answer here:
Tailwind CSS configuration not working

3. Add Babel Plugin

Modify your babel.config.js

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

that’s it. Setup Completed.

React Native Stylesheet VS Tailwind Style
Style using a React Native stylesheet for comparison:

import React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';

const Card = ({ title, text, onPress }) => {
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>{title}</Text>
      <Text style={styles.cardText}>{text}</Text>
      <Button title="Click Me" onPress={onPress} style={styles.cardButton} />
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
  },
  cardTitle: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  cardText: {
    marginTop: 10,
    marginBottom: 15,
  },
  cardButton: {
    backgroundColor: 'blue',
    color: 'white',
  },
});

export default Card;

Tailwind CSS: Applying Classes Directly
In Tailwind CSS, you can apply utility classes directly to JSX elements to style them. This approach offers a concise and efficient way to build user interfaces without creating separate stylesheets.

Style by applying classes directly in a React Native component:

import React from 'react';

const Card = ({ title, text, onPress }) => {
  return (
    <View className="bg-white p-20 rounded-lg shadow shadow-gray-200">
      <Text className="text-2xl font-bold">{title}</Text>
      <Text className="mt-10 mb-15">{text}</Text>
      <Button
        title="Click Me"
        onPress={onPress}
        className="bg-blue-500 text-white"
      />
    </View>
  );
};
export default Card;

Conclusion
Tailwind CSS offers a compelling approach to styling React Native applications. Its utility-first style and Babel plugin integration streamline development while promoting consistency and efficiency. Consider incorporating Tailwind in your projects to enhance your React Native development experience.