Unsupported Tailwind class

Hey! I’m currently starting up a new project using tailwind-rn, react-native and expo, however I’m facing a bit of a strange issue.

See, I’ve followed the setup guide to the letter, and I managed to get the library somewhat working, but on a lot of classes, it seems that it just doesn’t work (whether i use build:tailwind or dev:tailwind).

Looking at the tailwind.json and the tailwind.css (links attached), you can see a few classes being generated. However, I have no idea where these are coming from. For example, I’m not using border-red-500 or mb-1 anywhere yet, which makes me wonder why on earth would these classes get generated in the first place.

Taking a look at my tailwind.config.js, it would seem that everything is fine.

module.exports = {
  content: ['./src/**/*.{tsx,ts)'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#F0F6FF',
          100: '#DBEAFF',
          200: '#B8D5FF',
          300: '#85B8FF',
          400: '#388BFF',
          500: '#004EBF',
          600: '#0046A8',
          700: '#004099',
          800: '#003580',
          900: '#002457'
        }
      },
      fontSize: {
        '5xl': '2.5rem'
      }
    }
  },
  plugins: [],
  corePlugins: { transform: false, translate: false, boxShadow: false }
};

The classes that are almost “randomly” generated in the tailwind.json/css are perfectly usable, such as text-red-500, but not the text-4xl that is currently being applied to the same <Text>:

Here is also a link to my package.json.

[kxxoling]

Same issue here. I’ve created a fresh new project and encountered the same issue.

This is my App.tsx:

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';
import {TailwindProvider, useTailwind} from 'tailwind-rn';

import React from 'react';
import utilities from './tailwind.json';

const Section: React.FC<{
  title: string;
}> = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const CustomHeader = () => {
  const tailwind = useTailwind();
  return <Text style={tailwind('bg-primary')}>custom header3</Text>;
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <TailwindProvider utilities={utilities}>
      <SafeAreaView style={backgroundStyle}>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={backgroundStyle}>
          <CustomHeader />
          <Header />
          <View
            style={{
              backgroundColor: isDarkMode ? Colors.black : Colors.white,
            }}>
            <Section title="Step One">
              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
              screen and then come back to see your edits.
            </Section>
            <Section title="See Your Changes">
              <ReloadInstructions />
            </Section>
            <Section title="Debug">
              <DebugInstructions />
            </Section>
            <Section title="Learn More">
              Read the docs to discover what to do next:
            </Section>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </TailwindProvider>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

And all the configs are updated by npx setup-tailwind-rn.

I’m using the newest Xcode and simulator on M1 Max MBP

[grrbm]

neat ! 😃