Fixing className Not Working in React Native with NativeWind Styling

If you're using React Native with NativeWind (Tailwind CSS for React Native) and find that className isn't working as expected, you're not alone. Here's a complete guide to troubleshooting and resolving this issue.

Understanding the Issue

NativeWind allows you to use Tailwind CSS classes in React Native via the className prop. However, if you're working with custom components or miss certain configuration steps, styles might not be applied. This guide will address these scenarios.

Common Causes and Solutions

1. Missing `app.d.ts` File

NativeWind requires a TypeScript declaration file to work correctly.

Solution:

Create a file named app.d.ts in the root of your project.
Add the following line:

/// <reference types="nativewind/types" />

For TypeScript projects, ensure your tsconfig.json includes this file:

"include": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "app.d.ts"
]

2. Updating `tailwind.config.js`

Make sure your Tailwind configuration includes all necessary files.

Solution: Update your tailwind.config.js file to include your components, screens, and other relevant directories:

/** @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: [],
}

3. Custom Components and ClassName

When using custom components, the className prop might not pass down correctly.

Solution: Use NativeWind's styled utility for custom components. Here's an example:

import { styled } from 'nativewind'
import { Image } from 'react-native'

const StyledImage = styled(Image)

const CategoryCard = ({ imgUrl, title }) => {
  return (
    <TouchableOpacity>
      <StyledImage source={{ uri: imgUrl }} className="h-7 w-7 rounded-full bg-gray-300 p-4" />
      <Text>{title}</Text>
    </TouchableOpacity>
  )
}

export default CategoryCard

4. Install Missing Dependencies

Ensure all required dependencies for NativeWind are installed.

Solution: Run the following command:

npm install nativewind tailwindcss react-native-tailwindcss

5. Check Your React Native Version

NativeWind works best with newer versions of React Native.

Solution: Ensure your React Native version is compatible with NativeWind by consulting the NativeWind documentation.

Complete Example

Here's a working example of using className with NativeWind and a custom component:

import React from 'react'
import { TouchableOpacity, Text, Image } from 'react-native'
import { styled } from 'nativewind'

const StyledImage = styled(Image)

const CategoryCard = ({ imgUrl, title }) => {
  return (
    <TouchableOpacity className="flex items-center rounded-lg bg-gray-200 p-4">
      <StyledImage source={{ uri: imgUrl }} className="h-20 w-20 rounded-full" />
      <Text className="mt-2 text-lg font-semibold">{title}</Text>
    </TouchableOpacity>
  )
}

export default CategoryCard

FAQs

Q1: Why is `className` not working in my custom component?

Custom components need to use the styled utility from NativeWind to apply styles. Ensure you're using styled(Component) for your custom components.

Q2: Do I need to install Tailwind CSS separately for NativeWind?

No, NativeWind includes Tailwind CSS utilities. Just ensure your tailwind.config.js file is properly configured.

Q3: How can I debug NativeWind issues?

Check the console for errors.
Verify your tailwind.config.js file includes all necessary directories.
Ensure you’ve created the app.d.ts file if using TypeScript.