Although your setup appears to be sound, let’s troubleshoot those absent styles:
- Utility files are accepted by TailwindProvider via context; ./tailwind.json is not required. Simply take out that import and utilise tw within the Provider.
- Verify again whether the tailwind.config.js theme has the same.You’re using the text-blue-600 specification in App.js.
- Make sure the Tailwind plugin is loaded and that PostCSS is configured appropriately (check your babel or postcss config files).
Essentially, styled from nativewind combines the power of Tailwind utilities with the familiar syntax of React Native components in a more succinct, manageable, and theme-aware manner.
Here’s an example:
import React from 'react';
import { styled } from 'nativewind';
const MyText = styled.Text`
text-blue-600
`;
export default function App() {
return (
<View>
<MyText>Hello world, styled with ease!</MyText>
</View>
);
}
Support On Demand!
