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

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

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

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

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

🔥 #tip #showcase Infinite Marquee Scrolling with Tailwind CSS ✨ by @surjithctly 🔗 https://play.tailwindcss.com/alDCOx6PU2

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

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

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

🔥 Awesome Tailwind CSS Tips are coming!

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

🔥 #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 ✨ Tailwind CSS Tips