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

🔥 #news #new_release

Tailwind CSS v3.1: You wanna get nuts? Come on, let's get nuts!

✅ First-party TypeScript types
✅ Built-in support for CSS imports in the CLI
✅ Change color opacity when using the theme function
✅ Easier CSS variable color configuration
✅ Border spacing utilities
✅ Enabled and optional variants
✅ Prefers-contrast variants
✅ Style native dialog backdrops
✅ Arbitrary values but for variants

📺 https://youtu.be/nOQyWbPO2Ds
📝 https://tailwindcss.com/blog/tailwindcss-v3-1

🔥 #tutorial

Country Dropdown Menu in Tailwind CSS | HTML

by @fsuacad

🔗 https://youtu.be/_8YxRudfIls

Find more Tailwind CSS tutorials at https://bit.ly/3MZPh4d

🔥 #news #templates

Modern website templates, crafted with Tailwind CSS.

by Tailwind Labs

Tailwind Labs has released awesome ready-to-use templates.

Templates: 🔗 https://tailwindui.com/templates

Blog post: 🔗 https://tailwindcss.com/blog/2022-06-23-tailwind-templates-and-all-access

🔥 #news #jobs

Tailwind Labs launching a new official job board for Tailwind CSS developers soon 🥳

🔗 https://bit.ly/3IVgxjN

How do you guys find Tailwind CSS jobs? Please share your experience in the comments section.

🔥 #news

Tailwind Jobs is now live! 🥳

Tailwind Labs team has announced a new job board that focuses on front-end tech.

🔗 https://jobs.tailwindcss.com/

@tailwindcss_tips

🔥 #news #template

Meet Pocket - an App marketing template

by Tailwind Labs

Pocket is a beautiful mobile app marketing template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team. It’s production-ready and easy to customize, making it the perfect starting point for your new mobile app website.

Details: 🔗 https://tailwindui.com/templates/pocket
Live preview: 🔗 https://pocket.tailwindui.com/

🔥 #news #template

Meet Spotlight - A personal website template

by Tailwind Labs

✅ Built by experts
✅ Easy to customize
✅ Built with Next.js
✅ Keyboard accessible
✅ Production-ready
✅ Simple to deploy

🔗 Details: https://tailwindui.com/templates/spotlight
🔗 Live preview: https://spotlight.tailwindui.com/

🔥 #news #showcase

Tailwind CSS Showcase

by Tailwind Labs

Now you can see how companies worldwide use Tailwind CSS to build awesome websites!

🔗 https://tailwindcss.com/showcase


✨ @tailwindcss_tips

🔥 #news #new_release

🚀 Tailwind CSS v3.2 has been released!

🧁 Multi-config support with @​config
🍭 Max-width and dynamic breakpoints
🍫 ARIA variants
🍪 Data attribute variants
🍬 @​supports variants
🍦 Nested groups
🍰 Container queries

🔗 https://tailwindcss.com/blog/tailwindcss-v3-2

Thanks @lh536 for sharing

✨ Join Tailwind CSS Tips

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

🔥 #resource #news

Introducing ProTailwind - High quality tutorials covering advanced Tailwind CSS concepts and pattens

by Simon Vrachliotis

☀️ Deconstruct some the most visually interesting parts of the UI, triggering those “think outside the box” muscles in the process.

🎨 Add support for multiple color themes, combining the superpowers of CSS variables and the Tailwind Plugin API.

🎛 Isolate and compose styling concerns to support multiple style variant combinations for a given UI component

🏵 Share and consume the same UI components across multiple, unrelated projects

🔗 https://www.protailwind.com/

✨ Tailwind CSS Tips

🔥 #template

Protocol - A new template from the creators of Tailwind CSS

Protocol is a Tailwind CSS template for building API reference sites.

💫 Features include:

⚛️ Built with React + Next.js
📝 MDX
⌨️ Keyboard accessible (Headless UI)
🌗 Dark mode

🔗 Details: https://tailwindui.com/templates/protocol

🔗 Live demo: https://protocol.tailwindui.com/

✨ Tailwind CSS Tips

🔥 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