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