how can i apply the grid effect in tailwind

like in the image

32 Replies

Jochem•16mo ago

if you inspect the site, you can see that it's a background image using a couple of gradients:

.bg-grid {
    background-size: 20px 20px;
    background-image: linear-gradient(to right, rgb(35, 38, 45) 1px, transparent 1px), linear-gradient(rgb(35, 38, 45) 1px, transparent 1px);
    background-position: center top;
    image-rendering: pixelated;
    mask-image: linear-gradient(transparent, 10%, white, 90%, transparent);
}

.bg-grid {
    background-size: 20px 20px;
    background-image: linear-gradient(to right, rgb(35, 38, 45) 1px, transparent 1px), linear-gradient(rgb(35, 38, 45) 1px, transparent 1px);
    background-position: center top;
    image-rendering: pixelated;
    mask-image: linear-gradient(transparent, 10%, white, 90%, transparent);
}

JOY•16mo ago

not getting the same effect hmm

Jochem•16mo ago

change the background color to something darker, that's probably on the entire site somewhere yup, there's rgb(23, 25, 30) on the main tag might have to set it on a parent tag

JOY•16mo ago

<div class="bg-slate-900 ">
        <div class="bg-grid">
            <Navbar />
            <Hero />
        </div>
    </div>

<div class="bg-slate-900 ">
        <div class="bg-grid">
            <Navbar />
            <Hero />
        </div>
    </div>

its making the navbar and hero section a little faded

JOY•16mo ago

before

Jochem•16mo ago

is there any opacity on the navbar colors? If not, share the whole thing in a codepen if you can

JOY•16mo ago

@jochemm https://codepen.io/Sup-the-builder/pen/NWEoVPN navbar in css index.astro in html

Jochem•16mo ago

this is all I see, along with the code:

Jochem•16mo ago

like... we ask for codepen links because then you can see the code run and function like it does for you, so it's easier to figure out what is going on you can use https://play.tailwindcss.com/ to share tailwind stuff easily, just like... share it in a way that is helpful for someone trying to help you. I need to see what's wrong in a live version, or all I'm doing is guessing. as for guessing now, you have text-gray-900 on your links

JOY•16mo ago

https://codepen.io/Sup-the-builder/pen/NWEoVPN?editors=1100

Sup

CodePen

NWEoVPN

...

JOY•16mo ago

idk why the bg color isnt workin in codepen wait wait wait

Jochem•16mo ago

are there any classes set on the body maybe? or other CSS included you didn't put in the CSS box?

JOY•16mo ago

https://play.tailwindcss.com/NuCPU5TQD4

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

JOY•16mo ago

its not fading like it should no sir

Jochem•16mo ago

yeah, you have text-gray-900 on those nav links, that's making them that color when you inspect an element, you can go to computed style, then expand the color and see where the color is coming from

JOY•16mo ago

it still aint working its related to mask-image in css box

Jochem•16mo ago

hm, yeah, I see what you mean. that's weird tbh if you move the bg-grid class to container it seems to work like it's supposed to though hm, yeah, the mask-image property messes with the alpha channel for the element it's set on, so that was what was making the text a little transparent, which showed the background color through it

JOY•16mo ago

my heading is also faded and the button

Jochem•16mo ago

hm, if you look at the astro site where this is originally from, they're putting the background in an absolute div with inset-0 on it instead of setting it on the div itself. Here's an updated playground link: https://play.tailwindcss.com/orh96qgorT

JOY•16mo ago

bro it worked you the fucking G fuck if i become rich one day i'll donate to you to keep it up ,no shit is kevin paying you tho

Jochem•16mo ago

all the mods are volunteers, and the helping isn't part of being a mod, I just like to solve problems 🙂

JOY•16mo ago

now the navbar isnt working due to absolute

<div class="bg-grid absolute inset-0"></div>

<div class="bg-grid absolute inset-0"></div>

Jochem•16mo ago

Try setting relative on the parent

JOY•16mo ago

already tried its making the grid disappear

Mannix•16mo ago

add pointer-events-none on that div

JOY•16mo ago

that worked thanks

Mannix•16mo ago

do you know why it worked ?

JOY•16mo ago

im reading about it but i dont understand properly

Mannix•16mo ago

you made that div cover whole screen w position: absolute; and inset: 0; so you can only interact with that div anything below is not clickable. By adding pointer-events: none; we disable the ability to click/interact on that div so everything else becomes clickable again. it would be better if you would learn css first then start using tailwind for it 😉

Jochem•16mo ago

adding relative on the container tag works as well btw, it keeps the grid inside the container and not covering the nav at all https://play.tailwindcss.com/db0ldbXZcZ But yes, 100% this @joy2op

Mannix•16mo ago

you could also increase z-index on that hamburger button but pointer events will fix any future potential issues

JOY•16mo ago

hmm make sense thanks both right yeet

Gaming

Programming

how can i apply the grid effect in tailwind