[BUG] - Border doesn't get applied without border-solid

[ta1bbty]

Hey @jrgarciadev 👋

Thanks a lot for this awesome library 🥳

Describe the bug

Unless border is applied as border solid no border gets applied.

import React from "react";

export default function nextUI() {
    return (
            <div className="bg-white dark:bg-gray-800 dark:border-gray-700 p-100">
                <div className="border-t-4 border-t-indigo-500">
                    Thanks for the awesome NextUI 👋
                </div>
            </div>
    );
}

Changing the code to this :

import React from "react";

export default function nextUI() {
    return (
        <div className="bg-white dark:bg-gray-800 dark:border-gray-700 p-100">
            <div className="border-t-4 border-t-indigo-500 border-solid">
                Thanks for the awesome NextUI 👋
            </div>
        </div>
    );
}

To get what I want , i.e. indigo border only on top, I conjured a hack : ( removed borders from all other sides )

import React from "react";

export default function nextUI() {
    return (
        <div className="bg-white dark:bg-gray-800 dark:border-gray-700 p-100">
            <div className="border-t-4 border-t-indigo-500 border-solid border-l-0 border-r-0 border-b-0">
                Thanks for the awesome NextUI 👋
            </div>
        </div>
    );
}

I checked this too - #429

tailwind.config.js

module.exports = {
  important: true,
  // Active dark mode on class basis
  darkMode: "class",
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  },
  purge: {
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
  },
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      border: ['focus'], // https://night-tailwindcss.vercel.app/docs/hover-focus-and-other-states#default-variants-reference
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

globals.css

@tailwind components;
@tailwind utilities;

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create a new next JS application and add Next UI into it.

Dependencies :

"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"@nextui-org/react": "^1.0.0-beta.11",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.2",
"@tailwindcss/typography": "^0.5.8",

Dev Dependencies :

"devDependencies": {
    "@types/micro-cors": "^0.1.2",
    "@types/node": "^18.11.18",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "prisma": "^4.8.0",
    "tailwindcss": "^3.2.4",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  }

Expected behavior

Border should be applied only to top .

Screenshots or Videos

No response

Operating System Version

Mac OS

Browser

Chrome

[ta1bbty]

Here's the stackblitz sample project, with all the code files ( though for some reason this doesn't work ) : https://stackblitz.com/edit/nextjs-dw1wjh?file=pages/index.tsx

[jrgarciadev]

Hey guys sorry for the delay, please upgrade to V2