Tailwind CSS Tip (24/30) ✨ You can create a... transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉show more

Tailwind CSS Tip ✨ You can create a pure... css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔show more

Tailwind CSS Tip ✨ You can create some cool... looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔show more

Tailwind CSS Tip ✨ You can create a floating... input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔show more

Quick tip everyone using Tailwind CSS You can easily... create your brand's color palette with Pro tip: hit space to cycle through colors ✨show more

✨ Build Next.js, Tailwind CSS & shadcn websites with... drag and drop. And yes, you can export the code. Link below.show more

💡 CSS Tip! Get the scroll progress of the... page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇show more

🎮 New CSS Game! What about a CSS game... that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩show more

💡 CSS Tip! Do you know that One-Time password... field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.show more

Future CSS Tip! 🤞 You could create an image... zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇show more

Tip: *only* using CSS you can apply styles to... a number input conditionally depending on whether its value is within our out of range 🤯show more

the trick to this css card glow/shine effect is... blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!show more

Do you know about the filter property in CSS?... Among many other awesome options, it allows you to easily add a black and white effect on images.show more

💡CSS techniques: "The Backlight" Using a blur filter you... can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:show more

The future of AI in web development? This app... generates code and images to convert a screenshot into HTML/Tailwind CSS. I just gave it a screenshot of my X feed, and look what it produced (Notes & link in the comments):show more

CSS Clamp function 🌟 -> clamp() is a function... in CSS that provides a concise way for combining both the min() and max() functions. ⚠ Note: This can be achieved by this also - min(100px, max(50%, 200px))show more

If elements ever shift unexpectedly by a few pixels... during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.show more

💡 Do you know about the `clip` value? In... CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:show more

This one CSS property will fix your z-index headache.... In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️show more

`tabular-nums` should be the default for any number that... updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }show more