Next.js Discord

Discord Forum

Tailwind CSS does not work in my project that has Tailwind added

Answered
WhyFencePost posted this in #help-forum
Open in Discord
WhyFencePostOP
I am trying to use tailwind, and it does not change anything on my site. I think I have found the root of my project, as in my global css it says that the rule @tailwind is not defined. I dont know how to fix it, and I need tailwind to work
Answered by WhyFencePost
there we go, just idk what, but restaring it again worked
View full answer

54 Replies

American Chinchilla
How did you set up tailwind
Usig next script
Or you added it?
WhyFencePostOP
when I made the project
yesterday
American Chinchilla
Oh oky.
Can you show your global.css
WhyFencePostOP
@tailwind base;
@tailwind components;
@tailwind utilities;

.main-grid {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  grid-template-rows: 4.5rem 1fr;
  gap: 0.7px 0.7px;
  grid-auto-flow: row;
  grid-template-areas:
    "main-logo main-header"
    "main-whitespace page-content";
}

.main-logo { 
  grid-area: main-logo;
}

.main-header { 
  grid-area: main-header;
}

.main-whitespace { 
  grid-area: main-whitespace;
}

.page-content { 
  grid-area: page-content;
  overflow-x: hidden;
  overflow-y: scroll;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
there
the classes are for a grid i cant do with tailwind
American Chinchilla
Can you also show your package.json
Just want to vheck if it is installed
Tailwind and its properly configured in tailwind config object
Its strange because next.js setup with tailwind should work
WhyFencePostOP
{
  "name": "site",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.3"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.3"
  }
}
it is tho
its there
and the default site worked, but not the new one
that im trying to write
American Chinchilla
Can you show your tailwind
Config
WhyFencePostOP
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;
there
shadow
i mean it should be working
WhyFencePostOP
does it have to do that i am using it in layout.ts?
shadow
no because you have the extension there

"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
American Chinchilla
I googled and came across stack overflow
shadow
remove node_modules and npm install
American Chinchilla
One idea is to delete .next and run next dev again
Yeah what shadow said
@shadow remove node_modules and npm install
WhyFencePostOP
npm install? do you mean pnpm i?
shadow
yes
same thing
WhyFencePostOP
and the node modules folder?
shadow
yes
@WhyFencePost npm install? do you mean pnpm i?
shadow
its just different package managers, they basically do the same thing
WhyFencePostOP
yea
just asking that it did not specificly have to be npm
American Chinchilla
Also check if you imported your global.css into your layout
Or main file
For the styles to apply as well
@American Chinchilla Also check if you imported your global.css into your layout
shadow
@WhyFencePost should be something like this:
import "./globals.css";
WhyFencePostOP
yea i did
layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Core",
  description: "Core Development",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="bg-slate-400">
        <div className="main-grid bg-slate-50">
          <div className="main-logo bg-slate-50"></div>
          <div className="main-header bg-slate-50"></div>
          <div className="main-whitespace bg-slate-50"></div>
          <div className="page-content bg-slate-50">{children}</div>
        </div>
      </body>
    </html>
  );
}
that should work right?
American Chinchilla
Yes
WhyFencePostOP
wait it kinda worked
now
but only kinda
shadow
why kinda
WhyFencePostOP
the bg-slate-50 aplied, but the bg-slate-400 did not
shadow
go see in dev tools
maybe its hidden behind the others
WhyFencePostOP
there we go, just idk what, but restaring it again worked
Answer