Issue with bleed-none about tailwindcss-full-bleed HOT 8 CLOSED

I provided the fix for this issue @dgknca

from tailwindcss-full-bleed.

Hi @sayjeyhi . Thanks for the issue. But i can't reproduce what you said. Can you create a minimal repo that reproduces the issue you're experiencing? Or you can just give me the css you wrote. I checked this and didn't see any problem:

size-40 bleed-border-t-2 bleed-red-500 md:bleed-none

from tailwindcss-full-bleed.

@dgknca you need to have a border on the desktop:
size-40 bleed-border-t-2 bleed-red-500 md:bleed-none md:border-gray-200

then in desktop the border top and bottom will be effected

from tailwindcss-full-bleed.

I tried your code and still can't see any border on desktop. Can you create a project from scratch (with create-next-app etc.) and try again to see if your issue related to the plugin?

from tailwindcss-full-bleed.

Create an app in next.js 14 and replace page.js/ts with this:

export default function Home() {
  return (
    <div className="max-w-[400px] mx-auto p-9 my-24 border border-amber-700">
      <div className="size-64 flex flex-col items-center border-2 border-amber-700 rounded-2xl bleed-border bleed-red-500 md:bleed-none">
        TEST
      </div>
    </div>
  )
}

Sample app:

reproduce.zip

In desktop the top and bottom borders are dark but I applied amber-700

In Mobile bleed is fine:

from tailwindcss-full-bleed.

I just reviewed it and see the issue. So you want to have bleeding borders at the top and bottom on mobile only and regular borders on desktop, right? if you do this md:border-2 md:border-amber-700 it will work fine. (it's not dark, there is no top-bottom border on desktop)

In the PR, you added var(--tw-full-bleed-color) to the border colors but here it doesn't matter what the border color is. Bleed color is specified in border-image. If you will have bleed-none on md breakpoint, you shouldn't care about anything from bleed classes from lower breakpoints. We should say "I reset the bleeding on md, so I no longer have to consider anything from it". But if you add var(--tw-full-bleed-color) in bleed borders, you say you want to use this fallback color even if you reset the bleeding. It's not a best-practice. (In your situation this won't work too, because border-top and bottom widths are 0. You will need to make md:border-2 anyway) You should specify border-width and color after resetting the bleed.

from tailwindcss-full-bleed.

Well, actually in my case it was happening and I couldn't find any other solution and cloned the repo and using the cloned one, anyways thanks for the great work

from tailwindcss-full-bleed.

ok. I'm always here for help. Closing this now.

from tailwindcss-full-bleed.