Next.js Discord

Discord Forum

tailwind-config not updating at all

Unanswered
Beveren posted this in #help-forum
Open in Discord
BeverenOP
I am editing my tailwind.config.ts file and I'm trying to add a new screen but for some reason the screen is not recognized when I look at the web page and when I use the old 2xl screen that was already there but I delete the screen from my tailwind.config it still works. So I'm guessing my tailwind config is not updating for some reason. I restared the app but nothing changed.

15 Replies

ItetsuLaTable
Hello there
There is a cmd to rebuilt your tailwind config
@ItetsuLaTable There is a cmd to rebuilt your tailwind config
BeverenOP
Do you mean using tailwind build in the terminal, because I already tried that and it didn't work.
ItetsuLaTable
I have no clue then :/ have you try to clear cache ?
On my side sometimes I need to wait a bit and try in private tab
BeverenOP
Yes I also tried deleting the „.next“ folder but it didn‘t help. The weird part is that the 2xl screen class that was in the tailwind config before still works and I can see the css changing depending on if it‘s applied or not. But any new changes I make to the config just don‘t show.
Silver carp
maybe you need to specify to tailwind which files are using css
Silver carp
BeverenOP
import {nextui} from '@nextui-org/theme';
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./node_modules/@nextui-org/theme/dist/components/[object Object].js",
    "./src/app/page.tsx",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "pc": "1200px",
        "2xl": "1400px",
      },
    },
Did that too, I even included the direct path ("./src/app/page.tsx",).
BeverenOP
I kind-of found a solution for some reason editing the tailwind config seems to work but only sometimes and it's delayed. I included a new screen called "xl" with "1200px" and that worked, for some reason pc still didn't work tough. And changing the value of "xl" to for example "800px" still didn't affect "xl" and it still only reacted to "1200px". So I just added a new class with the desired with, with an unused name and that worked for me.

So now it's:
      screens: {
        "xl": "1000px",
        "pc": "1200px",
        "2xl": "1400px",
      },


And finally it works. But I still don't understand why it doesn't update properly.
Silver carp
can i see the structure of your app and the located page
oh ok
it can help you