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

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
đŸ”Ĩ #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
đŸ”Ĩ #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
đŸ”Ĩ #tutorial

Translating a Custom Design System to Tailwind CSS

By Tailwind Labs

In this video, we'll take a website design and corresponding style guide given to us by a designer, and translate it into a custom Tailwind CSS configuration to create our own utility framework tuned specifically for the project.

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

Install Tailwind CSS v3 - CDN vs CLI vs PostCSS

by Thirus (Shruti Balasa) (with her kind permission 😊)

In this video Shruti shows you three ways of installing TailwindCSS - via CDN, using Tailwind CLI and using PostCSS and talk about when to use what.

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

Automatic Tailwind CSS Class Sorting in 4 Minutes

By Laracasts

🔗 https://www.youtube.com/watch?v=4SYv-1AHRbg
đŸ”Ĩ #tutorial #component

Building a command palette with Tailwind CSS, React, and Headless UI

By Tailwind Labs

In this video Simon walks you through the steps to build a fully accessible command palette using Tailwind CSS, React, and the new combobox component in Headless UI.

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

Tailwind Crash Course | Project From Scratch

by Traversy Media

Learn how to set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git.

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

Country Dropdown Menu in Tailwind CSS | HTML

by @fsuacad

🔗 https://youtu.be/_8YxRudfIls

Find more Tailwind CSS tutorials at https://bit.ly/3MZPh4d
đŸ”Ĩ #tutorial

Building a design system in Next.js with Tailwind
by Tru Narla

đŸ’Ģ Learn how to set up a design system in a Next.js application, and how to build an accessible and easily customizable user interface with Tru Narla, Software Engineer at Discord.

🔗 https://www.youtube.com/watch?v=T-Zv73yZ_QI

✨ Join Tailwind CSS Tips
đŸ”Ĩ #tutorial

Using CSS Container Queries with Tailwind CSS
By Sam Selikoff

🌟 Container queries are (almost) here! Check out how to use them in Tailwind CSS 3.2

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

✨ Join 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