Styles not being applied on a clean install

[Viraj-10]

Discussed in https://github.com/gluestack/gluestack-ui/discussions/2526

^{Originally posted by Wolvinny October 23, 2024} Hi all. First of all, i am very new to web development. I do have experience in typescript and node, but this is my first time touching web development, other than fooling around a little with React, so this might be a very simple fix but i've been stuck at this for over 6 hours at this point. Currently, i am stuck on an issue, where i can import buttons and other components just fine, but they just wont be styled.

Following the guide, i first created an expo project (i am using, or well, trying to use react native) After that, i ran the gluestack-ui init command and added a button (yes, i also added it using the npx command). I also tried the manual installation but this only caused more issues. Upon running the npm start command, and opening the web version, i am greeted with this error: Unable to resolve module '@/global.css' from C:\Users\<>\app\app\_layout.tsx: '@/global.css' could not be found within the project or in these directories: node_modules. This points to the lines

import "'@/global.css'";
import { GluestackUIProvider } from "@/'components/ui'/gluestack-ui-provider";

which for some reason have additional ' in them (again, clean install, i did not change any code)

After removing those; and restarting the web server, and running the following code.

import { Button, ButtonText } from "@/components/ui/button";
import React from "react";
import { View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
    
      <Button size="md" variant="solid" action="primary" >
          <ButtonText>Hello World!</ButtonText>
        </Button>
      
    </View>
  );
}

i get the following result: None of the other components also render. I am using Node v22.9.0; react v18.2.0 and expo SDK 51.0.38

I cannot make a snack (it freezes when i upload my code) or a sandbox (it does not allow me to upload any files), but i feel this is a very simple issue that i cannot wrap my head around, nor have i seen someone with the same issue

Full npm ls output:

├── @babel/[email protected]
├── @expo/[email protected]
├── @gluestack-ui/[email protected]
├── @gluestack-ui/[email protected]
├── @gluestack-ui/[email protected]
├── @gluestack-ui/[email protected]
├── @react-navigation/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
```</div>

[gaofc]

I also followed the guide and the button didn't display. Has this problem been resolved?

[JackGrantham]

Seeing the same issue. Fresh expo react native app with no changes and follow the gluestack-ui guide both using CLI and manually and styles don't display.

[mithun-si]

I am experiencing the same issue in my Next.js project and also try to applying Tailwind utility classes to the button, there is no effect on its style.

[Viraj-10]

Hey @mithun-si , @JackGrantham @gaofc, Can you please share repo? and also which OS you are using windows or mac?

[mithun-si]

I'm using Windows

[gaofc]

I'm using Windows too.

[mithun-si]

https://codesandbox.io/p/devbox/playaround-hpfszq

this is the my code sandbox link I think that you can get idea from there and also for your information I am using next.js and npx gluestack-ui@latest init npx gluestack-ui@latest add --all command to install gluestack-ui and it's components

[ryanmitchell]

I'm seeing the same issue in an Expo project. The components work but no styling is applied.

[vaibhk20]

Hey everyone! We've released an updated version of the CLI with bug fixes to address the reported issues. Let us know if you face any issues while using it.

[mithun-si]

Hi @vaibhk20, I am created fresh Next.js project and then install the latest gluestack-ui with this command "npx gluestack-ui@latest init" and try to used Button component but still the style is not applied

Next.js version: 14.2.16

[Viraj-10]

Hey @mithun-si, Please add "jsxImportSource": "nativewind" to your tsconfig file.

[JackGrantham]

I am still seeing the same issue.

Here are the steps I am taking:

1. run 'npx create-expo-app@latest --template' using the Blank Typescript template
2. run 'npm start' to make sure the application runs as expected
3. stop application and follow the gluestack-ui guide and start by running 'npx gluestack-ui init'
4. run 'npm start'
5. see issues with import of global.css and GluestackUIProvider
6. Remove extra single quotes from both import statements
7. run 'npm start' ... application starts fine
8. stop application and run 'npx gluestack-ui add button'
9. add Button with ButtonText in App.tsx file making sure to import from './components/ui/button'
10. run 'npm start' ... see button text rendering but no styling

I also have tried adding "jsxImportSource": "nativewind" to my tsconfig file and this did not change anything for me.

I am using Windows 11

Here is my code: https://github.com/JackGrantham/gluestackv2-test

[Viraj-10]

Hey @JackGrantham, I have created a PR with all the fixes. Seems like cli is not working properly on windows.

[Viraj-10]

I'm seeing the same issue in an Expo project. The components work but no styling is applied.

Hey @ryanmitchell, Can you checkout this PR and try to make same changes to it for more detailed guide please have look at nativewind docs.

[ryanmitchell]

Yeah thanks. I got it working by copying over the configs from the starter kit app.

[JackGrantham]

Thanks @Viraj-10 your changes worked. However, I did need to downgrade to Node v20 from v22 since I was running into issues with 'require' not being defined in some imports in tailwind.config.js and metro.config.js

[mathis-kdio]

Does this also work with nativewind 4.1.23?

[mithun-si]

Hey @Viraj-10 , After adding this "jsxImportSource": "nativewind" to mytsconfig file now I can use tailwindcss it's work thanks but the default behavior still not working for example

  <Button size="md" variant="outline" action="primary" >
      <ButtonText>Hello World!</ButtonText>
    </Button>

it should show a button with some outline right? but my case I only see the Hello World! text nothing else

Next.js: 14.2.16 windows: 11 pro

[Viraj-10]

Does this also work with nativewind 4.1.23?

@mathis-kdio, We are releasing support for v4.1 this week. #2475 you can checkout all the changes here.

[Viraj-10]

Hey @Viraj-10 , After adding this "jsxImportSource": "nativewind" to mytsconfig file now I can use tailwindcss it's work thanks but the default behavior still not working for example

  <Button size="md" variant="outline" action="primary" >
      <ButtonText>Hello World!</ButtonText>
    </Button>

it should show a button with some outline right? but my case I only see the Hello World! text nothing else

Next.js: 14.2.16 windows: 11 pro

@mithun-si please check your content property in tailwind.config.js file. give proper path to all the components and pages. checkout guide from tailwind here

[mithun-si]

Hey @Viraj-10 , After adding this "jsxImportSource": "nativewind" to mytsconfig file now I can use tailwindcss it's work thanks but the default behavior still not working for example

  <Button size="md" variant="outline" action="primary" >
      <ButtonText>Hello World!</ButtonText>
    </Button>

it should show a button with some outline right? but my case I only see the Hello World! text nothing else Next.js: 14.2.16 windows: 11 pro

@mithun-si please check your content property in tailwind.config.js file. give proper path to all the components and pages. checkout guide from tailwind here

Thanks @Viraj-10 it's working now but for action="primary"/"secondary" the color is not shown why? is there anything else need to add to show color I am using gluestack-ui CLI also when I am building my Next.js application there is a lot's of type related warning and error and that's why application build is failed please solve this ASAP and If I use //@ts-ignore for where need type I can successfully build application so if I use //@ts-ignore is there any problem arise in future?

[miguel93041]

@Viraj-10 Any updates on when #2475 will be released? Nativewind 4.1 supposedly addresses https://github.com/nativewind/nativewind/issues/924, which has been a major hassle for both production and development.

[Viraj-10]

@miguel93041 you can install v4.1 with --alpha flag in CLI. we announced it yesterday on discord and twitter.

[flyingL123]

Seeing the same issue. Fresh expo react native app with no changes and follow the gluestack-ui guide both using CLI and manually and styles don't display.

@ryanmitchell did you ever get this working? I followed the instructions to try and start using gluestack in an existing expo project, but I can't get any styles to be applied to the components. Literally just trying to display a box from the documentation, but none of the styles are working. The component is rendered, but no styles.

I also followed all of these instructions, with no luck: https://www.nativewind.dev/getting-started/expo-router

[Viraj-10]

Hey @flyingL123, Please try this repo. Let me know if it works for you. Also Please provide your repo as well.

[flyingL123]

@Viraj-10 yes the repo you provided does work for me. I copied all of the config files from your project to mine, but still no styles are applied. The only difference I notice is that both of our projects are using expo52, but your project uses the new architecture and mine does not. Is there any way that could possibly be causing the problem?

Unfortunately I can not share my repo because it's private, but I can try to make a minimal example to reproduce the problem if necessary.

[Viraj-10]

Hey @flyingL123, Even after disabling new arch it's working for me. Can you please try to reproduce this in similar repo?

[ryanmitchell]

@Viraj-10 I've just updated to Expo 52 and everything is broken again, no styles are being generated. I tried rolling back my changes but still no styles are generated. I cant figure out why.

I've tried different node versions (22, 21, 20) and lots of different configurations of tailwinds.config.js and metro.config.js and tsconfig.js.

Can I share the repo with you to see if you can see the issue?

[Viraj-10]

Hey @ryanmitchell, Please try this documentation otherwise please provide a repo so that we will be able to see the issue.

[ryanmitchell]

@Viraj-10 thanks for that, the changes to the metro.config.js file made the difference