Tailwind rn installed but not styling views

Question

This is my second go around installing tailwind rn for a project and I simply can't get it to work.

I ran npm install tailwind-rn followed by npx setup-tailwind-rn and I'm running it in development mode after changing the tailwind.config.js to scan the only app file: content: ["./App.js"],

The App.js file in the meantime looks like this:

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { useTailwind } from 'tailwind-rn';

export default function App() {
  const tw = useTailwind();
  return (
    <TailwindProvider utilities={utilities}>
      <View>
        <Text style={tw('text-blue-600')}>Hello world</Text>
        <StatusBar style="auto" />
      </View>
    </TailwindProvider>
  );
}

My tailwind.css and tailwind.json are both populated with defitions for .text-blue-600 and I receive no errors when running, but none of the styles I apply work. Very confused.

score 3 · Accepted Answer · answered Aug 12 '22 at 05:21

I would recommend using tailwind-react-native-classnames from jaredh159. No setup or extra configurations needed after installation. It works out of the box.

This package gives the flexibility of mixing styles.

Install using yarn add twrnc or npm install twrnc.

Get more info from the GitHub page

Tailwind rn installed but not styling views

1 Answers1