tailwindcss styling not applied. [NOT FIXED] HELP | Next.js | Page 1

oblique orbit Oct 21, 2023, 3:45 AM

#

pages/_app.js:

import "../styles/globals.css"
import {NextUIProvider} from '@nextui-org/react'

function Application({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  )
}

export default Application;

pages/index.js

import Head from 'next/head'
import Header from '../components/Header'
import Footer from '../components/Footer'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Next.js Starter!</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Header title="Welcome to my app!" />
        <p className="description">
          Get started by editing <code>pages/index.js</code>
        </p>
      </main>

      <Footer />
    </div>
  )
}

styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  box-sizing: border-box;
}

main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-family: Menlo, Monaco, Lucida Console, Courier New, monospace;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

fathom sonnetBOT Oct 21, 2023, 3:45 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

oblique orbit Oct 21, 2023, 3:46 AM

#

the styles aren't applied:

#

vercel:

#

tailwind.config.js:

const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    "./pages/*.{html,js,ts,jsx,tsx}",
    "./pages/**/*.{html,js,ts,jsx,tsx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

#

the header

import React from "react";

import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";

 import {logo} from "../public/icon.jsx";
export default function App() {

const [isMenuOpen, setIsMenuOpen] = React.useState(false);

const menuItems = [

"Profile",

"Dashboard",

"Activity",

"Analytics",

"System",

"Deployments",

"My Settings",

"Team Settings",

"Help & Feedback",

"Log Out",

];

return (

<Navbar

isBordered

isMenuOpen={isMenuOpen}

onMenuOpenChange={setIsMenuOpen}

>

<NavbarContent className="sm:hidden" justify="start">

<NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />

</NavbarContent>

<NavbarContent className="sm:hidden pr-3" justify="center">

<NavbarBrand>

<logo />

<p className="font-bold text-inherit">ACME</p>

</NavbarBrand>

</NavbarContent>

<NavbarContent className="hidden sm:flex gap-4" justify="center">

<NavbarBrand>

<logo />

<p className="font-bold text-inherit">ACME</p>

</NavbarBrand>

<NavbarItem>

<Link color="foreground" href="#">

Features

</Link>

</NavbarItem>

<NavbarItem isActive>

<Link href="#" aria-current="page">

Customers

</Link>

</NavbarItem>

<NavbarItem>

<Link color="foreground" href="#">

Integrations

</Link>

</NavbarItem>

</NavbarContent>

<NavbarContent justify="end">

<NavbarItem className="hidden lg:flex">

<Link href="#">Login</Link>

</NavbarItem>

<NavbarItem>

<Button as={Link} color="warning" href="#" variant="flat">

Sign Up

</Button>

</NavbarItem>

</NavbarContent>

<NavbarMenu>

{menuItems.map((item, index) => (

<NavbarMenuItem key={`${item}-${index}`}>

<Link

className="w-full"

color={

index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"

}

href="#"

size="lg"

>

{item}

</Link>

</NavbarMenuItem>

))}

</NavbarMenu>

</Navbar>

);

}

#

how to fix?

#

NextUI styling not applied. [NOT FIXED] HELP

oblique orbit Oct 22, 2023, 1:57 PM

#

my tailwind.config.js is updated:

const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    "./pages/**/*.{html,js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

#

styling still not applied

#

tailwindcss styling not applied. [NOT FIXED] HELP

strong loom Oct 22, 2023, 2:07 PM

#

what file path of the route in which the style is not getting applied?

oblique orbit Oct 22, 2023, 2:08 PM

#

strong loom what file path of the route in which the style is not getting applied?

currently it only have a header, and tailwindcss is not applied in it 😭

strong loom Oct 22, 2023, 2:09 PM

#

what file path of the route in which the style is not getting applied?

oblique orbit Oct 22, 2023, 2:09 PM

#

strong loom what file path of the route in which the style is not getting applied?

components/Header.js

#

i use the header at pages/index.js

strong loom Oct 22, 2023, 2:10 PM

#

can you reproduce the issue on a new project?

oblique orbit Oct 22, 2023, 2:10 PM

#

wdym

strong loom Oct 22, 2023, 2:10 PM

#

create a new project, try to reproduce the bug

#

try to intentionally find out what causes the bug

oblique orbit Oct 22, 2023, 2:10 PM

#

i tried all the ways😭 stackoverflow, discord , kapa.ai

strong loom Oct 22, 2023, 2:11 PM

#

thats not what i meant

oblique orbit Oct 22, 2023, 2:11 PM

#

can i just do it in this project

#

what should i do

strong loom Oct 22, 2023, 2:11 PM

#

like in this case theres too much unknonwn
it could be from NextUI?
it could be from Tailwind?
it could be from using NextUI with Tailwind?

#

You should try reproducing the bug on a new project

oblique orbit Oct 22, 2023, 2:12 PM

#

what should i do in the project?

strong loom Oct 22, 2023, 2:12 PM

#

try to reproduce the bug.

oblique orbit Oct 22, 2023, 2:12 PM

#

i don't need to make another copy of this repo

strong loom Oct 22, 2023, 2:12 PM

#

you dont need to

oblique orbit Oct 22, 2023, 2:12 PM

#

i can do it in this

#

sorry i don't get it😭

strong loom Oct 22, 2023, 2:13 PM

#

yeah thats because you refuse to understand

oblique orbit Oct 22, 2023, 2:13 PM

#

i rlly don't get it

strong loom Oct 22, 2023, 2:13 PM

#

can you identify what causes the bug?

#

can you try removing stuff

oblique orbit Oct 22, 2023, 2:13 PM

#

how?

strong loom Oct 22, 2023, 2:13 PM

#

like remove NextUI

oblique orbit Oct 22, 2023, 2:13 PM

#

ok

strong loom Oct 22, 2023, 2:13 PM

#

does the bug still persists

#

Reproducing the bugs means you do it in a new project/create a copy of your proejct and remove stuff untill you found out what causes the bug

#

Like it should be deterministic and isolated, without other unecessary stuff thats irrelevant to the bug

oblique orbit Oct 22, 2023, 2:17 PM

#

strong loom Reproducing the bugs means you do it in a new project/create a copy of your proe...

i removed nextui stuffs

#

wating vercel runnin to see if styling appplied 🙂

strong loom Oct 22, 2023, 2:18 PM

#

oblique orbit wating vercel runnin to see if styling appplied 🙂

so its only removed in Vercel?

#

have you tried npm run build and npm run start

oblique orbit Oct 22, 2023, 2:18 PM

#

uh what

strong loom Oct 22, 2023, 2:19 PM

#

Have you tried building the project locally

#

so you dont have to wait for Vercel to build

#

...

oblique orbit Oct 22, 2023, 2:19 PM

#

im just remove importing nextui and remove it from packages

#

idk how to host local

#

im new to this stuff

#

like first creating site and install nextjs 4days ago

strong loom Oct 22, 2023, 2:20 PM

#

ok so do you know you can preview your code locally?

oblique orbit Oct 22, 2023, 2:21 PM

#

how

#

now i found out i forgot to push

strong loom Oct 22, 2023, 2:21 PM

#

how do you code?

oblique orbit Oct 22, 2023, 2:21 PM

#

😦

#

github

strong loom Oct 22, 2023, 2:21 PM

#

you code using github?

oblique orbit Oct 22, 2023, 2:21 PM

#

yea

strong loom Oct 22, 2023, 2:22 PM

#

so no text editor app?

oblique orbit Oct 22, 2023, 2:22 PM

#

it don't write the end bracketfor me

#

😦

strong loom Oct 22, 2023, 2:22 PM

#

have you tried VS Code? its pretty popular for web developers

oblique orbit Oct 22, 2023, 2:22 PM

#

i'll check it soon

#

(:

strong loom Oct 22, 2023, 2:22 PM

#

no like, check it now

#

or ill refuse to help

oblique orbit Oct 22, 2023, 2:22 PM

#

ok

strong loom Oct 22, 2023, 2:23 PM

#

how do you even learn how to use NextUI?

oblique orbit Oct 22, 2023, 2:24 PM

#

i want to give up

strong loom Oct 22, 2023, 2:24 PM

#

how do you learn how to make next.js project?

oblique orbit Oct 22, 2023, 2:24 PM

#

the header still there

oblique orbit Oct 22, 2023, 2:24 PM

#

strong loom how do you learn how to make next.js project?

google

strong loom Oct 22, 2023, 2:24 PM

#

what article did you use?

oblique orbit Oct 22, 2023, 2:24 PM

#

oblique orbit the header still there

eveni removed it from index.js

#

nextjs docs

strong loom Oct 22, 2023, 2:24 PM

#

how did you generate a Next.js project?

oblique orbit Oct 22, 2023, 2:24 PM

#

i folliwed the steps

#

copied from netlify

#

github template

strong loom Oct 22, 2023, 2:25 PM

#

ahh

oblique orbit Oct 22, 2023, 2:25 PM

#

and rmeoved those netlify stuffs

strong loom Oct 22, 2023, 2:25 PM

#

So

oblique orbit Oct 22, 2023, 2:25 PM

#

and updatethe versions

#

🙂

#

frompackages.json

#

so i want to give up

#

the header stuck there

strong loom Oct 22, 2023, 2:25 PM

#

Im just going to tell you right now, as much as you want to give up, its not really recommended to code in Github for basically anything

oblique orbit Oct 22, 2023, 2:25 PM

#

even i uninstalled nextui

#

the whole page won't change

#

whole projects sucks

#

/Mark Solution

signal gorge Oct 22, 2023, 2:26 PM

#

ive used nextui a lot and it works great

oblique orbit Oct 22, 2023, 2:26 PM

#

can u send me your git link

#

😦

#

u can remkve all your stuffs

#

and just original ones

#

i wanna find out

#

):

signal gorge Oct 22, 2023, 2:27 PM

#

Once you're setup in VSCode with Git feel free to message me

#

but it sounds like you are missing some fundamentals

oblique orbit Oct 22, 2023, 2:27 PM

#

sry i can't install vscode

#

i have some personal problems

#

can u send me the pages/_app.js the index, globals styles cssfile and tailwind.condig.js?

#

🥺

strong loom Oct 22, 2023, 2:29 PM

#

You dont need vscode, just get Git and any texteditor like Notepad++ or sublime

#

theres other editor that exists if you have personal problem with vscode

signal gorge Oct 22, 2023, 2:29 PM

#

read this page:
https://nextui.org/docs/frameworks/nextjs

there is a template you can use to get started:
App Router:
npx create-next-app -e https://github.com/nextui-org/next-app-template

Pages Router:
npx create-next-app -e https://github.com/nextui-org/next-pages-template

#

There is also a NextUI discord server that might provide more specific help. but it's a very small community so don't expect miracles.

strong loom Oct 22, 2023, 2:31 PM

#

I really want to help you but its been frustating so far. You will get better help if you cooperate and make it easier and i believe thats what we both want

signal gorge Oct 22, 2023, 2:33 PM

#

Sometimes trying to solve a problem can take a long time and make us very frustrated. Take a break and come back fresh.
If you try the templates I shared you should be able to get up and running.
Highly recommend you setup a local dev environment to get started.

oblique orbit Oct 23, 2023, 1:36 PM

#

i have personal problems on setting localenv

#

so i can't do that

#

i don't have console

oblique orbit Oct 23, 2023, 1:36 PM

#

signal gorge read this page: https://nextui.org/docs/frameworks/nextjs there is a template y...

thank you

#

oblique orbit Oct 23, 2023, 1:38 PM

#

signal gorge read this page: https://nextui.org/docs/frameworks/nextjs there is a template y...

i don't know typescript 😭

#

didn't even ever created a typescript file

#

im js newbie

signal gorge Oct 23, 2023, 1:39 PM

#

oblique orbit i don't know typescript 😭

idk then, maybe ask chatgpt to convert the tsx/ts files into js

oblique orbit Oct 23, 2023, 1:39 PM

#

chatgpt doesn't work

#

it's a trash model

#

worse output

#

i'll just try

#

oblique orbit Oct 23, 2023, 1:44 PM

#

signal gorge idk then, maybe ask chatgpt to convert the tsx/ts files into js

what's the difference between app template and pages template?

signal gorge Oct 23, 2023, 1:47 PM

#

oblique orbit what's the difference between app template and pages template?

I think that’s a question for another help post. This help post has become convoluted and doesn’t relate to your original problem of tailwind css not being applied

oblique orbit Oct 23, 2023, 1:50 PM

#

ok i'll just ask @quasi quest

oblique orbit Oct 24, 2023, 11:49 AM

#

probelm solved!

#

/Mark Solution

frank saffron Oct 24, 2023, 11:58 AM

#

oblique orbit probelm solved!

what fixed this?

#

ie which message (can send link)

oblique orbit Oct 25, 2023, 1:03 AM

#

frank saffron what fixed this?

#1165133743443410964 message

#tailwindcss styling not applied. [NOT FIXED] HELP