Tailwind CSS Tips
4.1K subscribers
101 photos
1 video
135 links
â„šī¸ Learn the most popular utility-first framework.

đŸ”Ĩ #tips, â­ī¸ #tricks, 🆕 #news

Maintainer: @ilyosjon_k
Download Telegram
đŸ”Ĩ #tutorial

Just-in-Time Compiler, Now in Core – What's new in Tailwind CSS

by Tailwind Labs

🔗 https://www.youtube.com/watch?v=QwUpnXumcw4
đŸ”Ĩ #news #tutorial

What's New in Tailwind CSS v2.2

By Tailwind Labs

Highlights:

đŸŸĸ All-new high-performance Tailwind CLI
đŸŸĸ Before and after variants
đŸŸĸ First-letter/line variants
đŸŸĸ Selected text variants
đŸŸĸ List marker variants
đŸŸĸ Sibling selector variants
đŸŸĸ Exhaustive pseudo-class support
đŸŸĸ Shorthand color opacity syntax
đŸŸĸ Extended arbitrary value support
đŸŸĸ Improved nesting support
đŸŸĸ Caret color utilities
đŸŸĸ Background origin utilities
đŸŸĸ Simplified transform and filter composition
đŸŸĸ Per-side border color utilities
đŸŸĸ Built-in safelist, transform, and extract support

🔗 https://www.youtube.com/watch?v=DxcJbrs6rKk
đŸ”Ĩ #tutorial

How to Use Custom Fonts with Tailwind CSS

By Tailwind Labs


Highlights:

đŸŸĸ Using Google Fonts with Tailwind CSS
đŸŸĸ Self-hosting fonts with @font-face rules

🔗 https://www.youtube.com/watch?v=sOnBG2wUm1s
đŸ”Ĩ #template #dashboard #components

Windmill Dashboard

By Estevan Maito

Features:

đŸŸĸ Dark theme enabled (load even different images based on theme)
đŸŸĸ Throughly accessible (developed using screen readers)
đŸŸĸ 100% keyboard navigable
đŸŸĸ Custom components
đŸŸĸ Alpine JS (used for dropdowns and toggles)
đŸŸĸ Tailwind CSS
đŸŸĸ Chart.js
đŸŸĸ Heroicons

🔗 https://windmillui.com/
đŸ”Ĩ #tutorial

Floating Labels with Tailwind CSS

By Tailwind Labs

In this video, you'll learn how to pull off that cool "floating labels" effect using just Tailwind CSS utility classes. We'll use a bunch of new features added in Tailwind CSS v2.2, including the new placeholder-shown variants and the peer sibling selector variant.

🔗 https://www.youtube.com/watch?v=nJzKi6oIvBA
đŸ”Ĩ #tutorial

Rebuilding iOS 15 with Tailwind CSS

By Tailwind Labs

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

📝 https://play.tailwindcss.com/kY4LYXwsNZ
đŸ”Ĩ #app

Meet Tails a TailwindCSS Page Creator with over 170+ components to boost your workflow.

🔗 https://devdojo.com/tails
đŸ”Ĩ #showcase #dashboard_kit

Huge Dashboard kit built for Tailwind CSS

By @heyjamshid

🔗 https://dashwind.design/
đŸ”Ĩ #news

Introducing Tailwind UI Ecommerce

By Tailwind Labs

🔗 https://blog.tailwindcss.com/tailwind-ui-ecommerce
đŸ”Ĩ #announcement #design_kit

Dashwind - Dashboard Kit for Tailwind CSS

The dashboard kit offering a huge discount. Buy the design kit for only $5.

You will have access to Figma file with most complete dashboard UI components tailored for your next great project.

Buy once and get access to upcoming full TailwindCSS implementation.

By @heyjamshid

🔗 https://dashwind.design
đŸ”Ĩ #tutorial

Responsive Grid Layout with Tailwind CSS

By Tailwind Labs

In this video, Simon shows us how to build a responsive grid layout with Tailwind CSS utility classes.

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

Demo: 🔗 https://play.tailwindcss.com/9IEjFauwTF
đŸ”Ĩ #fun

Tailwind in 100 Seconds

By Fireship

🔗 https://www.youtube.com/watch?v=mr15Xzb1Ook
đŸ”Ĩ #tutorial

Glowing Background Gradient Effects with Tailwind CSS

By Tailwind Labs

Learn how to achieve that awesome glow effect popping up everywhere with vanilla Tailwind CSS utilities.

Turotial: 🔗 https://www.youtube.com/watch?v=5W6kEP65AH4

Demo: 🔗 https://play.tailwindcss.com/fNKKyOG2Yv
đŸ”Ĩ #tutorial

Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js

By Tailwind Labs

How to build a simple Ecommerce website with Tailwind UI, Shopify, and Next.js.

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

🔗 Demo: https://tailwindui-shopify.vercel.app/
đŸ”Ĩ #tutorial

Ultimate Tailwind CSS Tutorial - Build a Discord-inspired Animated Navbar

By Fireship

🔗 https://www.youtube.com/watch?v=pfaSUYaSgRo
đŸ”Ĩ #news #v3

The All-New Just-in-Time CDN — Tailwind CSS v3.0 Preview 👀

By Tailwind Labs

In this video, Simon will show you an early preview of the upcoming Just-in-Time CDN, which will ship with Tailwind CSS v3.0.

🔗 https://www.youtube.com/watch?v=QAIdYGslQGo
đŸ”Ĩ #article

Beginner's guide to TailwindCSS: The new way of styling

By Reza Bozorgi

🔗 https://dev.to/rezab/beginner-s-guide-to-tailwind-css-the-new-way-of-styling-3i80
đŸ”Ĩ #news

Colored shadows are coming in v3.0

Check out the PR by Adam Wathan:
🔗 https://github.com/tailwindlabs/tailwindcss/pull/5979

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