🔥 Awesome Tailwind CSS Tips are coming!

🔥 #tip

You can create a floating input form with Tailwind CSS
using ":placeholder-shown" pseudo class.

By Surjith S M

🔗 Demo: https://play.tailwindcss.com/e9VYsoQ6ND

🔗 Alternate version: https://play.tailwindcss.com/gVoSIxxDbP

⭐️ Source: https://bit.ly/402GyG7



✨ Tailwind CSS Tips

🔥 #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

Hey everyone,

Just launched Tailwind CSS Notion Handbook on Twitter. Need your support 🙏

https://twitter.com/surjithctly/status/1633355869399183363

30 Tailwind CSS Tips compiled into ONE MEGA THREAD 👇

https://twitter.com/surjithctly/status/1635542102778994688?s=20

🔥 #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

🔥 #tip #showcase

Infinite Marquee Scrolling with Tailwind CSS ✨

by @surjithctly

🔗 https://play.tailwindcss.com/alDCOx6PU2

✨ Tailwind CSS Tips

🔥 #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

🔥 #tailwind_connect

✨ Tailwind Connect 2023 — Keynote

🔗 https://www.youtube.com/watch?v=CLkxRnRQtDE

🔥 #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

🔥 #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

🔥 #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

🔥 #tip

Nice tip from Marcel Pociot

🔗 https://play.tailwindcss.com/HY8N2f5txA

🔥 #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

🔥 #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

🔥 #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

🔥 #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

📣 #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

🔥 #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