Pinned
30 Tailwind CSS Tips ✨
O N E M E G A T H R E A D ↓
00:00
Surjith S M ✪
10.1K posts
Surjith S M ✪
@surjithctly
Hey, I'm a front-end developer, maker & entrepreneur.
web3forms.com
web3templates.com
web3creative.com
web3inspiration.com
- Tailwind CSS Tip ✨ You can create a frosted glass in @tailwindcss using backdrop-blur. Live demo ↓ play.tailwindcss.com/73CTwSIeqU (16/30) follow for 14 more tips 🔔
00:00 - Tailwind CSS Tip ✨ You can create a multi-level dropdown menu using @tailwindcss without javascript. Live demo / copy code ↓ play.tailwindcss.com/0xQBSdXxsK (15/30) follow for 15 more tips 🔔
00:00 - Tailwind CSS Tip ✨ You can create a pure css carousel in @tailwindcss using scroll snap. Live demo ↓ play.tailwindcss.com/ygdR4VidYh (21/30) follow for 9 more tips 🔔
00:00 - Tailwind CSS Tip ✨ You can create a floating input form with @tailwindcss using ":placeholder-shown" pseudo class. Live Demo & Code 👇 play.tailwindcss.com/e9VYsoQ6ND (8/30) follow for 22 more tips 🔔
00:00 - Tailwind CSS Tip ✨ You can create a nostalgic neumorphic button in @tailwindcss using drop shadows. Live demo ↓ play.tailwindcss.com/ph4rOFtCBr (25/30) follow for 5 more tips 🔔
00:00 - I’ve been promoted as “Dad” 🥳 Its a Baby Girl 🥰🥰
- Tailwind CSS Tip ✨ Using radio groups, you can create a pricing plan chooser in @tailwindcss as shown below. Live demo ↓ play.tailwindcss.com/1SD5Q1DXed (17/30) follow for 13 more tips 🔔
00:00 - Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using @tailwindcss. Thanks to @tailscan for the inspiration. Demo & Code 👇 play.tailwindcss.com/OPAsySKNCd (14/30) follow for 16 more tips 🔔
00:00 - Made with Tailwind CSS 😇 Source code is available in the handbook.
00:00 - Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css @tailwindcss form validation without javascript. View code 👇 play.tailwindcss.com/F6G5XxxWII (5/30) follow for 25 more tips 😊
00:00 - Tailwind CSS Tip ✨ You can create this beautifully animated loading skeleton using @tailwindcss (credits: @delba_oliveira) View code 👇 play.tailwindcss.com/T53FThvo8i (12/30) follow for 18 more tips 🔔
00:00 - Tailwind CSS Tip ✨ You can create an on-scroll animation using @tailwindcss without javascript. ⚠️ Experimental. Not Ready for Production ⚠️ Live demo ↓ play.tailwindcss.com/PSSHaEQmEz (19/30) follow for 11 more tips 🔔
00:00 - Left: What people think of how Tailwind CSS project might look like. Right: Actual Project Source Code 😅
