Tailwind breakpoints are working unexpectedly

[kriptonian1]

When we started working on the project, the tailwind breaking points were working fine, but one fine day we found things were not working as expected. This is really annoying because when I went to debug it, what it was showing things that didn't make sense. I will really appreciate the help.

Here is my tailwind.config.js file, this custom things are from tremor

/* eslint-disable prefer-named-capture-group -- required for tailwindcss */
const sharedConfig = require("tailwind-config/tailwind.config.js");
const colors = require("tailwindcss/colors");

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...sharedConfig,
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module
  ],
  theme: {
    transparent: "transparent",
    current: "currentColor",
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
      },
      colors: {
        // light mode
        tremor: {
          brand: {
            faint: colors.blue[50],
            muted: colors.blue[200],
            subtle: colors.blue[400],
            DEFAULT: colors.blue[500],
            emphasis: colors.blue[700],
            inverted: colors.white,
          },
          background: {
            muted: colors.gray[50],
            subtle: colors.gray[100],
            DEFAULT: colors.white,
            emphasis: colors.gray[700],
          },
          border: {
            DEFAULT: colors.gray[200],
          },
          ring: {
            DEFAULT: colors.gray[200],
          },
          content: {
            subtle: colors.gray[400],
            DEFAULT: colors.gray[500],
            emphasis: colors.gray[700],
            strong: colors.gray[900],
            inverted: colors.white,
          },
        },
        // dark mode
        "dark-tremor": {
          brand: {
            faint: "#0B1229",
            muted: colors.blue[950],
            subtle: colors.blue[800],
            DEFAULT: colors.blue[500],
            emphasis: colors.blue[400],
            inverted: colors.blue[950],
          },
          background: {
            muted: "#131A2B",
            subtle: colors.gray[800],
            DEFAULT: "#37373C",
            emphasis: colors.gray[300],
          },
          border: {
            DEFAULT: "#525252",
          },
          ring: {
            DEFAULT: colors.gray[800],
          },
          content: {
            subtle: colors.gray[600],
            DEFAULT: colors.white,
            emphasis: colors.gray[200],
            strong: colors.gray[50],
            inverted: colors.gray[950],
          },
        },
      },
      boxShadow: {
        // light
        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        "tremor-card":
          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        "tremor-dropdown":
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
        // dark
        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        "dark-tremor-card":
          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        "dark-tremor-dropdown":
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      },
      borderRadius: {
        "tremor-small": "0.375rem",
        "tremor-default": "0.5rem",
        "tremor-full": "9999px",
      },
      fontSize: {
        "tremor-label": ["0.75rem", { lineHeight: "1rem" }],
        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
      },
    },
  },
  safelist: [
    {
      pattern:
        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    {
      pattern:
        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    {
      pattern:
        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    ...["[#26B682]"].flatMap((customColor) => [
      `bg-${customColor}`,
      `border-${customColor}`,
      `hover:bg-${customColor}`,
      `hover:border-${customColor}`,
      `hover:text-${customColor}`,
      `fill-${customColor}`,
      `ring-${customColor}`,
      `stroke-${customColor}`,
      `text-${customColor}`,
      `ui-selected:bg-${customColor}`,
      `ui-selected:border-${customColor}`,
      `ui-selected:text-${customColor}`,
    ]),
  ],
  plugins: [require("@headlessui/tailwindcss"), require("@tailwindcss/forms")],
};

1st issue

Screenshots

on large screen

on mobile

Code

here is the Next.Js code:

<nav className="mx-3 mt-2 flex items-center justify-between rounded-[1.25rem] bg-neutral-800 p-2 md:mx-6 md:mt-0 md:p-5 ">
      <Link href="/">
        <Logo className="hidden md:flex" />
        <LogoM className="flex w-[3rem] md:hidden" />
      </Link>
      <div className="hidden md:flex">
        <Search
          onClick={() => {
            setShowDialog(!showDialog);
          }}
        />
      </div>
...
</nav>

dev tool

2nd issue

Screenshots

on large screen

on mobile

Code

here is the Next.Js code:

    <main className="flex justify-center overflow-y-hidden">
      <div className="w-[90rem] overflow-y-hidden md:mt-4 2xl:mt-[3vh]">
        <Navbar />
        <button
          className="ml-4 mt-4 flex md:hidden"
          onClick={() => {
            setIsOpen(!isOpen);
          }}
          type="button"
        >
          <div className="grid gap-1 rounded-xl bg-neutral-700/40 p-2">
            <div className="h-1 w-8 rounded-full bg-neutral-700" />
            <div className="h-1 w-8 rounded-full bg-neutral-700" />
            <div className="h-1 w-8 rounded-full bg-neutral-700" />
          </div>
        </button>
        <div className="flex w-full overflow-y-hidden">
          <div className="hidden md:flex">
            <SidebarComponent />
          </div>
          <div className="flex md:hidden">
            {isOpen ? <SidebarComponent /> : null}
          </div>

          <div className="w-full overflow-auto px-5">{children}</div>
        </div>
      </div>
    </main>

dev tool

[wongjn]

It seems like you have Tailwind CSS included twice somehow. Consider providing a project that reproduces the unexpected behavior, if you would like help in debugging further.

[kriptonian1]

This is a private repo, so I can't provide it, but I can give you a detail of how it's been set

[wongjn]

You could make a different project that has the same structure and that reproduces the same unexpected behavior.

[kriptonian1]

Not sure if that will work because when I 1st set it up it was working fine 🥲

[kriptonian1]

This is the file structure:

apps
    |--docs <-- this is for storybook docs
    |__web <-- this is the main next.js project
packages
    |--eslint-config-custom
    |--icon
    |--tailwind-config <-- shared tailwind config
        |--package.json
        |--tailwind.config.js
    |--tsconfig
    |__ui
        |--components
        |--styles
            |__index.css
        |--utils
        |--index.tsx
        |--package.json
        |--postcss.config.cjs
        |--tailwind.config.mjs
        |--tsconfig.json
        |__tsup.config.ts
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
prettier.config.js
tsconfig.json
turbo.json