Hey everyone,
Just launched Tailwind CSS Notion Handbook on Twitter. Need your support 🙏
https://twitter.com/surjithctly/status/1633355869399183363
Just launched Tailwind CSS Notion Handbook on Twitter. Need your support 🙏
https://twitter.com/surjithctly/status/1633355869399183363
X (formerly Twitter)
Surjith S M ✪ (@surjithctly) on X
Product Launch 📢✨
Introducing "Tailwind CSS Notion Handbook"
↳ Tailwind CSS Basics
↳ 30 Tailwind CSS Tips
↳ 10 Bonus Tips
↳ Production Checklist
↳ UI Kits & Templates
↳ 20+ Tools & Resources
Launch Price: $9 for 24 hours ⏰
Code: LAUNCH75
👉 https://t.co/4bBTz76zYR
Introducing "Tailwind CSS Notion Handbook"
↳ Tailwind CSS Basics
↳ 30 Tailwind CSS Tips
↳ 10 Bonus Tips
↳ Production Checklist
↳ UI Kits & Templates
↳ 20+ Tools & Resources
Launch Price: $9 for 24 hours ⏰
Code: LAUNCH75
👉 https://t.co/4bBTz76zYR
March 8, 2023
30 Tailwind CSS Tips compiled into ONE MEGA THREAD 👇
https://twitter.com/surjithctly/status/1635542102778994688?s=20
https://twitter.com/surjithctly/status/1635542102778994688?s=20
March 14, 2023
🔥 #new_release
Tailwind CSS v3.3 released
🎨 Extended color palette for darker darks:
New darker 950 shades for every color.
🌀 ESM and TypeScript support:
Write your config file using ESM or TypeScript.
👈 Simplified RTL support with logical properties:
Build layouts that adapt to different directions.
🦄 Fine-tune gradient color stop positions:
Specify exactly where you want each color stop to go.
🗜 Line-clamp out of the box: Truncate multi-line text without a plugin.
🅰️ New line-height modifier:
Set your font-size and line-height with one class.
🪄 CSS variables without the var():
New shorthand syntax for arbitrary values.
🍀 Configurable font-variation-settings:
Baked directly into your font-* utilities.
🤣 New list-style-image utilities:
So you can use horrible clip art for bullet points.
➖ New hyphens utilities:
For fine-tuning hyphenation behavior.
🏷 New caption-side utilities:
Title your tables with style.
🔗 https://tailwindcss.com/blog/tailwindcss-v3-3
✨ Tailwind CSS Tips
Tailwind CSS v3.3 released
🎨 Extended color palette for darker darks:
New darker 950 shades for every color.
🌀 ESM and TypeScript support:
Write your config file using ESM or TypeScript.
👈 Simplified RTL support with logical properties:
Build layouts that adapt to different directions.
🦄 Fine-tune gradient color stop positions:
Specify exactly where you want each color stop to go.
🗜 Line-clamp out of the box: Truncate multi-line text without a plugin.
🅰️ New line-height modifier:
Set your font-size and line-height with one class.
🪄 CSS variables without the var():
New shorthand syntax for arbitrary values.
🍀 Configurable font-variation-settings:
Baked directly into your font-* utilities.
🤣 New list-style-image utilities:
So you can use horrible clip art for bullet points.
➖ New hyphens utilities:
For fine-tuning hyphenation behavior.
🏷 New caption-side utilities:
Title your tables with style.
🔗 https://tailwindcss.com/blog/tailwindcss-v3-3
✨ Tailwind CSS Tips
March 28, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #tip #showcase
Infinite Marquee Scrolling with Tailwind CSS ✨
by @surjithctly
🔗 https://play.tailwindcss.com/alDCOx6PU2
✨ Tailwind CSS Tips
Infinite Marquee Scrolling with Tailwind CSS ✨
by @surjithctly
🔗 https://play.tailwindcss.com/alDCOx6PU2
✨ Tailwind CSS Tips
June 21, 2023
🔥 #ui #components #alpinejs
Introducing Pines UI by DevDojo
"Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects."
🔗 https://devdojo.com/pines
✨ Tailwind CSS Tips
Introducing Pines UI by DevDojo
"Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects."
🔗 https://devdojo.com/pines
✨ Tailwind CSS Tips
June 22, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #template
Meet Studio by Tailwind Labs
"Studio is a beautiful multi-page agency template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team"
🔗 https://tailwindui.com/templates/studio
✨ Tailwind CSS Tips
Meet Studio by Tailwind Labs
"Studio is a beautiful multi-page agency template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team"
🔗 https://tailwindui.com/templates/studio
✨ Tailwind CSS Tips
July 23, 2023
🔥 #ui #component
Langui - Beautiful components for your AI projects
by Ahmad Bilal
LangUI is an Open Source Tailwind library with free to use components tailored for your AI and GPT projects.
🔗 https://langui.dev/
✨ Tailwind CSS Tips
Langui - Beautiful components for your AI projects
by Ahmad Bilal
LangUI is an Open Source Tailwind library with free to use components tailored for your AI and GPT projects.
🔗 https://langui.dev/
✨ Tailwind CSS Tips
August 1, 2023
Which frontend framework do you use?
Final Results
58%
React/Next
22%
VueJS/Nuxt
3%
Svelte
10%
Alpine
6%
JQuery
August 28, 2023
🔥 #course #ebook
✨
Introducing Level up with Tailwind CSS
by Shruti Balasa
An in-depth course to take your Tailwind CSS skills to the next level
Level up with Tailwind CSS is a comprehensive guide to learning and mastering Tailwind CSS
☘️ Strengthen your foundation in Tailwind CSS and learn how to customize it for your projects
⚡️ Discover the power and flexibility of Tailwind CSS features, such as variants, utilities, plugins, and more
💎 Find useful resources, such as component libraries, extensions, and tools, to enhance your Tailwind CSS workflow
It's not a secret that Shruti creates one of the best Tailwind CSS content on her YouTube channel.
This course is a real gem 🤩 for those who loves high-quality yet simple to understand tutorials!
Order your copy of the course right now by using the link below (affiliated):
🔗 http://bit.ly/lvl-up-twdcss
Great news! Subscribers of this channel can get 15% off the course with the code below. Don't wait, enroll now and learn from the best!
TAILWINDTIPS
✨
Introducing Level up with Tailwind CSS
by Shruti Balasa
An in-depth course to take your Tailwind CSS skills to the next level
Level up with Tailwind CSS is a comprehensive guide to learning and mastering Tailwind CSS
☘️ Strengthen your foundation in Tailwind CSS and learn how to customize it for your projects
⚡️ Discover the power and flexibility of Tailwind CSS features, such as variants, utilities, plugins, and more
💎 Find useful resources, such as component libraries, extensions, and tools, to enhance your Tailwind CSS workflow
It's not a secret that Shruti creates one of the best Tailwind CSS content on her YouTube channel.
This course is a real gem 🤩 for those who loves high-quality yet simple to understand tutorials!
Order your copy of the course right now by using the link below (affiliated):
🔗 http://bit.ly/lvl-up-twdcss
Great news! Subscribers of this channel can get 15% off the course with the code below. Don't wait, enroll now and learn from the best!
September 6, 2023
🔥 #news #new_release
🥳 Tailwind CSS v3.4 released!
📱 Dynamic viewport units
👨👨👦 Style children with the * variant
⚖️ Balanced headlines with text-wrap utilities
🎛 Subgrid support
📐 Extended min-width, max-width, and min-height scales
🪟 Extended opacity scale
💠 Extended grid-rows-* scale
📸 New forced-colors variant
🎚 New forced-color-adjust utilities
🔗 https://tailwindcss.com/blog/tailwindcss-v3-4
✨ Tailwind CSS Tips
🥳 Tailwind CSS v3.4 released!
📱 Dynamic viewport units
👨👨👦 Style children with the * variant
⚖️ Balanced headlines with text-wrap utilities
🎛 Subgrid support
📐 Extended min-width, max-width, and min-height scales
🪟 Extended opacity scale
💠 Extended grid-rows-* scale
📸 New forced-colors variant
🎚 New forced-color-adjust utilities
🔗 https://tailwindcss.com/blog/tailwindcss-v3-4
✨ Tailwind CSS Tips
December 20, 2023
December 31, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #component
🃏 Cards with nice hover animation
You can style pseudo-elements to create nice decorations and effects
🔗 https://play.tailwindcss.com/1DBQtJw3K5
—
📣
Dear subscribers,
What kind of content would you like to see on this channel?
Please write your answers in comments!
✨ Tailwind CSS Tips
🃏 Cards with nice hover animation
You can style pseudo-elements to create nice decorations and effects
🔗 https://play.tailwindcss.com/1DBQtJw3K5
—
📣
Dear subscribers,
What kind of content would you like to see on this channel?
Please write your answers in comments!
✨ Tailwind CSS Tips
January 3, 2024
🔥 #tutorial
First original video tutorial from this channel!
✨ Ceate a paragraph focus effect using Tailwind CSS
I hope you like it!
🔗 Tutorial: https://www.youtube.com/watch?v=YI8kTDQOiY8
🔗 Live demo: https://play.tailwindcss.com/ItPPlRMz6p
✨ Tailwind CSS Tips
First original video tutorial from this channel!
✨ Ceate a paragraph focus effect using Tailwind CSS
I hope you like it!
🔗 Tutorial: https://www.youtube.com/watch?v=YI8kTDQOiY8
🔗 Live demo: https://play.tailwindcss.com/ItPPlRMz6p
✨ Tailwind CSS Tips
March 22, 2024
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #news #devtools
Gimli Tailwind
by Gimli App team
A super helpful devtools extention that provides powerful features to improve DX while developing Tailwind CSS websites and apps
Suggested by @rasulcode
🔗 Official Website
Gimli Tailwind
by Gimli App team
A super helpful devtools extention that provides powerful features to improve DX while developing Tailwind CSS websites and apps
Suggested by @rasulcode
🔗 Official Website
June 28, 2024
📣 #announcement
Dear subscribers!
If you have any ideas or suggestions for this channel, please visit following link and post them there by clicking Make a Suggestion button.
🔗 https://suggest.gg/tailwindcss_tips
Best regards,
@tailwindcss_tips
Dear subscribers!
If you have any ideas or suggestions for this channel, please visit following link and post them there by clicking Make a Suggestion button.
🔗 https://suggest.gg/tailwindcss_tips
Best regards,
@tailwindcss_tips
Suggest.gg
tailwindcss_tips - Suggest.gg
tailwindcss_tips is on Suggest.gg, check out their profile to see content ideas and feedback.
July 21, 2024
🔥 #template
Introducing Radiant
by Tailwind Labs
Radiant is a beautiful multi-page SaaS business template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team.
🔗 https://tailwindui.com/templates/radiant
✨ @tailwindcss_tips
Introducing Radiant
by Tailwind Labs
Radiant is a beautiful multi-page SaaS business template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team.
🔗 https://tailwindui.com/templates/radiant
✨ @tailwindcss_tips
September 14, 2024
🔥 #news #v4
⚡️ Built for performance — full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
🔨 Unified toolchain — built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
⚙️ CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
✨ Designed for the modern web — built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.
🔗 Release notes
📺 Exploring the Tailwind CSS v4.0 Beta with Sam Selikoff
✨ @tailwindcss_tips
⚡️ Built for performance — full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
🔨 Unified toolchain — built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
⚙️ CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
✨ Designed for the modern web — built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.
🔗 Release notes
📺 Exploring the Tailwind CSS v4.0 Beta with Sam Selikoff
✨ @tailwindcss_tips
Please open Telegram to view this post
VIEW IN TELEGRAM
November 22, 2024
January 21
🔥 #news #v4
🎉 Tailwind CSS v4.0 is here! 🎉
Tailwind CSS has released version 4.0, bringing several improvements to make your development faster and easier:
- 🚀 Faster Builds: Full builds are up to 5 times quicker, and updates are over 100 times faster.
- 🛠 Modern CSS Features: Now using the latest CSS capabilities like cascade layers and
- 🎨 Simplified Setup: Install with just one line in your CSS file—no extra configuration needed.
- 🖌 CSS-First Customization: Customize directly in your CSS files instead of using JavaScript.
- 🌈 Enhanced Color Palette: A more vivid color palette that takes full advantage of modern display technology.
To start using Tailwind CSS v4.0, check out the official release notes and the brand new design of the website
✨ @tailwindcss_tips
🎉 Tailwind CSS v4.0 is here! 🎉
Tailwind CSS has released version 4.0, bringing several improvements to make your development faster and easier:
- 🚀 Faster Builds: Full builds are up to 5 times quicker, and updates are over 100 times faster.
- 🛠 Modern CSS Features: Now using the latest CSS capabilities like cascade layers and
color-mix(). - 🎨 Simplified Setup: Install with just one line in your CSS file—no extra configuration needed.
- 🖌 CSS-First Customization: Customize directly in your CSS files instead of using JavaScript.
- 🌈 Enhanced Color Palette: A more vivid color palette that takes full advantage of modern display technology.
To start using Tailwind CSS v4.0, check out the official release notes and the brand new design of the website
✨ @tailwindcss_tips
January 23
Please open Telegram to view this post
VIEW IN TELEGRAM
January 23
🔥 #course #ui
🎨 Build UIs that don't suck
by Adam Wathan
A crash course by creator of Tailwind CSS that covers different tips and tricks to solve interesting UI problems
🔗 https://tailwindcss.com/build-uis-that-dont-suck
📹 Intro video
✨ @tailwindcss_tips
🎨 Build UIs that don't suck
by Adam Wathan
A crash course by creator of Tailwind CSS that covers different tips and tricks to solve interesting UI problems
🔗 https://tailwindcss.com/build-uis-that-dont-suck
📹 Intro video
✨ @tailwindcss_tips
March 5
🚀 Tailwind CSS v4.1 is Here!
✨ Text Shadows: Add sleek shadows to your text for a stylish look. 🖤
🎭 Mask Elements: Use images or gradients as masks for unique designs. 🌈
🌍 Browser Compatibility: Better rendering even on older browsers. 🖥️
📝 Fine-Grained Text Wrapping: Keep your layout intact with smarter text handling. 📜
🌟 Colored Drop Shadows: Apply vibrant colors to drop shadows for added flair. 🎨
📱 Pointer Targeting: Optimize designs for touchscreens or precise mouse inputs. 🖱️
📐 Baseline Alignment: Align items to the last line of text seamlessly. 📏
🔒 Safe Alignment: Keep your content visible even in tight spaces. 🔑
🔗 Full blog post
📹 https://www.youtube.com/watch?v=HTFHoA12MJk
✨ @tailwindcss_tips
Please open Telegram to view this post
VIEW IN TELEGRAM
April 3
🔥 #components
Taildrops is a website FULL of beautiful, ready-to-use Tailwind components — super clean, modern, and production-ready. No signup, no fluff. Just copy, paste, and ship! ✈️
✨ 100% Free – Yup, no paywalls.
✨ Copy to Clipboard – One click = ready to go.
✨ Dark Mode Components – Built-in support! 🌑
✨ Beautiful UI – Buttons, cards, modals, navbars... All crafted with love ❤️
✨ Super Minimal – Fast, lightweight website. No distractions, just components.
👀 Go explore it now → Taildrops.com
Taildrops is a website FULL of beautiful, ready-to-use Tailwind components — super clean, modern, and production-ready. No signup, no fluff. Just copy, paste, and ship! ✈️
✨ 100% Free – Yup, no paywalls.
✨ Copy to Clipboard – One click = ready to go.
✨ Dark Mode Components – Built-in support! 🌑
✨ Beautiful UI – Buttons, cards, modals, navbars... All crafted with love ❤️
✨ Super Minimal – Fast, lightweight website. No distractions, just components.
👀 Go explore it now → Taildrops.com
April 28