Tailwind CSS Mouse-Tracking Glow Effect with JavaScript
In this Tailwind CSS tutorial, we'll explore how to add an interactive, mouse-tracking glow effect to web elements using just JavaScript and Tailwind CSS. This simple yet eye-catching effect will enhance the user experience on your webpage.
*Prerequisites:*
- Basic knowledge of HTML, CSS, and JavaScript.
- Tailwind CSS installed in your project.
📕 Read the blog post: https://webcrunch.com/posts/mouse-tra...)
⚙️ Source code: https://github.com/justalever/tailwin...
Timestamps:
00:00 - Video overview/Intro
00:26 - Project demo
01:14 - Project setup with Vite.js (https://vitejs.dev)
04:00 - Install Tailwind CSS
05:52 - Extending the default Tailwind CSS configuration
07:27 - Main HTML Structure
09:11 - Add custom glow overlay CSS
11:04 - Learn more about radial gradients
12:00 - Add a custom Tailwind CSS plugin and glow variants
15:34 - Add the JavaScript
20:40 - Add new glow variant classes to create the new effect
22:24 - Demo of the final product
24:42 - Limitations and gotchas with transform effects
26:00 - Please like and subscribe!
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunc...
💻 Read the written version:
https://web-crunch.com/posts/
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://webcrunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤
/ webcrunchblog .
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
-
21:33
Webcrunch
5 months agoHow I Create Tailwind CSS Plugins From Scratch
4 -
0:59
Code Boxx
4 months agoBlinking Effect In HTML CSS
2 -
10:23
Techmaker Studio
2 years agoTailwind Tutorial | How to Handle Background Images, Gradients, and Overlays in Tailwind CSS
48 -
4:16
AHMEDKAZEKA97
2 years agoTailwind CSS : Build 2 Advanced Projects
61 -
0:58
Code Boxx
3 months agoTypewriter Effect In HTML CSS (No Javascript)
6 -
4:26
JustDoAll
8 months agoHow to create a highlighter marker effect in SystemeIO (CSS)
-
8:39
NeoDev
9 months agoCreate a Random Color Generator with JavaScript
7 -
36:41
NeoDev
11 months agoAnimated Hover Card with Sass
9 -
0:59
Code Boxx
3 months agoText Over Image On Mouse Hover In HTML CSS
8 -
5:00
Pixel Rocket
2 years agoTailwindCSS - What Is The theme.config.js File?
6