
Tailwind CSS Tips
ℹ️ Learn the most popular utility-first framework.
🔥 #tips, ⭐️ #tricks, 🆕 #news
Maintainer: @ilyosjon_k
Recent Posts
🔥#news#v4
💥 Tailwind CSS v4.0 Beta1 has been released
⚡️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
🔥#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
📣#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
🔥#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
🔥#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
🔥#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
https://play.tailwindcss.com/K8kPtkzFCO
🥳
🥳
🔥#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
🔥#tip
Nice tip from Marcel Pociot
🔗https://play.tailwindcss.com/HY8N2f5txA
Nice tip from Marcel Pociot
🔗https://play.tailwindcss.com/HY8N2f5txA
🔥#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!
🔥#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
🔥#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
🔥#tailwind_connect
✨Tailwind Connect 2023 — Keynote
🔗https://www.youtube.com/watch?v=CLkxRnRQtDE
✨Tailwind Connect 2023 — Keynote
🔗https://www.youtube.com/watch?v=CLkxRnRQtDE
🔥#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
🔥#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
🔥#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
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
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
🔥#tip
You can use peer/{name} to create a beautiful "Pill Menu Animation" like this.
❌ No javascript
❌ No custom styles
By Surjith S M
🔗 Demo: https://play.tailwindcss.com/Qd98eMhkxy
⭐️ Source: https://bit.ly/3Dn5COj
✨Tailwind CSS Tips
You can use peer/{name} to create a beautiful "Pill Menu Animation" like this.
❌ No javascript
❌ No custom styles
By Surjith S M
🔗 Demo: https://play.tailwindcss.com/Qd98eMhkxy
⭐️ Source: https://bit.ly/3Dn5COj
✨Tailwind CSS Tips