Tailwind CSS Tips

โ„น๏ธ Learn the most popular utility-first framework.

๐Ÿ”ฅ #tips, โญ๏ธ #tricks, ๐Ÿ†• #news

Maintainer: @ilyosjon_k

View in Telegram

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
๐Ÿ”ฅ#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
๐Ÿ“ฃ#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
๐Ÿ”ฅ#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
๐Ÿ”ฅ#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
๐Ÿ”ฅ#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
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
๐Ÿ”ฅ#tip

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
๐Ÿ”ฅ#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
๐Ÿ”ฅ#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
๐Ÿ”ฅ#tailwind_connect

โœจ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
๐Ÿ”ฅ#tip#showcase

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
30 Tailwind CSS Tips compiled into ONE MEGA THREAD ๐Ÿ‘‡

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
๐Ÿ”ฅ#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
See more posts

View in Telegram