Styles not working

[udemezue01]

I followed up the installation process, but could not get the styles to work, what should I do about it? Previous versions used last year worked perfectly, not until I installed this new version, any help would be kindly appreciated.

[djamaatul]

i have same problem ,version 3.0.1 still working

[vadimdemedes]

I can't help you without any details, logs or error messages. Could you share something? What exactly isn't working?

[vadimdemedes]

If you're migrating from the v3.x, there's a migration guide here → https://github.com/vadimdemedes/tailwind-rn/blob/master/migrate.md.

[udemezue01]

Thanks, I installed it properly I got no error, from the console but when I try to apply styles It does not show up

[vadimdemedes]

Could you show your source code where you use tailwind-rn and the contents of tailwind.css and tailwind.json files?

[udemezue01]

okay

Here is the Landing.js

 import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import {useTailwind} from 'tailwind-rn';
import tw from 'tailwind-react-native-classnames';

const Landing = () =>{

  const tailwind = useTailwind();

  return(

  <View style={styles.container}>

    <Text style={tw`p-4 text-green-600 flex-row text-2xl tracking-wider`} > Gitchat</Text>

    <Text style={tw `text-white bg-green-500 px-4 py-4 rounded-lg mt-32`}>Get started</Text>
    <StatusBar style="auto" />
  </View>

  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default  Landing

I had to use a different Taiwind package here

2. Tailwinds.css is empty

3. Tailwinds.js is also empty

   {}

[vadimdemedes]

In your example tailwind function isn't used anywhere.

[udemezue01]

I added is but it still wont work

On Tue, Feb 8, 2022 at 8:54 AM Vadim Demedes @.***> wrote:

In your example tailwind function isn't used anywhere.

— Reply to this email directly, view it on GitHub https://github.com/vadimdemedes/tailwind-rn/issues/145#issuecomment-1032310185, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2KU4P6BKR7GCUPN6GUPU3U2DD4JANCNFSM5NVYAJFQ . You are receiving this because you authored the thread.Message ID: @.***>

-- https://about.me/thejohnbenjamin?promo=email_sig&utm_source=product&utm_medium=email_sig&utm_campaign=gmail_api&utm_content=thumb Nwabufor John

Web Developer, Blogger, Digital Marketing Expert and Serial Entrepreneur.

Visit the Link Below.

Tchelete.com http://Tchelete.com (Blog)

Make sure to also visit the links below. 🖐🏼

👉👉 How To Start a Blog. http://Tchelete.com/how-to-start-a-blog

[vadimdemedes]

I can't help unless you post these:

• Source code where tailwind-rn is used, as minimal as possible
• Commands you use to compile Tailwind CSS and tailwind-rn
• Contents of tailwind.css and tailwind.json files
• Tailwind CSS config from tailwind.config.js

[Gregoirevda]

If your tailwind.json or tailwind.css is empty, make sure you didn't forgot to add

content: ['./App.js', './src/**/*.js'], in your tailwind.config.js and for me this had to be disabled in tailwind.config.js too

corePlugins: {
   boxShadow: false,
   translate: false,
   transform: false,
   ringWidth: false,
},

[djamaatul]

still not working for me,code detail here : command with yarn dev:tailwind and no error result in console

[vadimdemedes]

TailwindProvider must be above the component that uses a useTailwind hook.

[djamaatul]

thanks it working ,but if i use in external componen, tailwind in tailwind.json not generated ,but tailwind.css is generated .it will response in console like this , :

and while im use tailwind with flatList will response in console like this :

[vadimdemedes]

thanks it working ,but if i use in external componen, tailwind in tailwind.json not generated ,but tailwind.css is generated .it will response in console like this , :

Make sure paths in content in Tailwind CSS config cover all your project files.

and while im use tailwind with flatList will response in console like this :

This error isn't related to tailwind-rn, it's coming from your code.

[djamaatul]

thanks you

[jaykeerti]

TailwindProvider must be above the component that uses a useTailwind hook.

Why does it not work at same level ? in the above example like App.js? i need to create a child component always for it to work?