
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