how can i apply the grid effect in tailwind

like in the image

32 Replies

Jochem•2y 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);
}

JOYOP•2y ago

not getting the same effect hmm

Jochem•2y 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

JOYOP•2y 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

JOYOP•2y ago

before

Jochem•2y ago

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

JOYOP•2y ago

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

Jochem•2y ago

this is all I see, along with the code:

Jochem•2y 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

JOYOP•2y ago

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

Sup

CodePen

NWEoVPN

...

JOYOP•2y ago

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

Jochem•2y ago

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

JOYOP•2y 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.

JOYOP•2y ago

its not fading like it should no sir

Jochem•2y 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

JOYOP•2y ago

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

Jochem•2y 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

JOYOP•2y ago

my heading is also faded and the button

Jochem•2y 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

JOYOP•2y 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•2y ago

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

JOYOP•2y 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•2y ago

Try setting relative on the parent

JOYOP•2y ago

already tried its making the grid disappear

Mannix•2y ago

add pointer-events-none on that div

JOYOP•2y ago

that worked thanks

Mannix•2y ago

do you know why it worked ?

JOYOP•2y ago

im reading about it but i dont understand properly

Mannix•2y 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•2y 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•2y ago

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

JOYOP•2y ago

hmm make sense thanks both right yeet

Gaming

Programming

how can i apply the grid effect in tailwind