🔥 #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
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
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
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
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
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #tip
You can create a floating input form with Tailwind CSS
using "
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
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
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #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
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
Just launched Tailwind CSS Notion Handbook on Twitter. Need your support 🙏
https://twitter.com/surjithctly/status/1633355869399183363
X (formerly Twitter)
Surjith S M ✪ (@surjithctly) on X
Product Launch 📢✨
Introducing "Tailwind CSS Notion Handbook"
↳ Tailwind CSS Basics
↳ 30 Tailwind CSS Tips
↳ 10 Bonus Tips
↳ Production Checklist
↳ UI Kits & Templates
↳ 20+ Tools & Resources
Launch Price: $9 for 24 hours ⏰
Code: LAUNCH75
👉 https://t.co/4bBTz76zYR
Introducing "Tailwind CSS Notion Handbook"
↳ Tailwind CSS Basics
↳ 30 Tailwind CSS Tips
↳ 10 Bonus Tips
↳ Production Checklist
↳ UI Kits & Templates
↳ 20+ Tools & Resources
Launch Price: $9 for 24 hours ⏰
Code: LAUNCH75
👉 https://t.co/4bBTz76zYR
30 Tailwind CSS Tips compiled into ONE MEGA THREAD 👇
https://twitter.com/surjithctly/status/1635542102778994688?s=20
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
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
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #tip #showcase
Infinite Marquee Scrolling with Tailwind CSS ✨
by @surjithctly
🔗 https://play.tailwindcss.com/alDCOx6PU2
✨ Tailwind CSS Tips
Infinite Marquee Scrolling with Tailwind CSS ✨
by @surjithctly
🔗 https://play.tailwindcss.com/alDCOx6PU2
✨ Tailwind CSS Tips
🔥 #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
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
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #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
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
🔥 #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
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
Which frontend framework do you use?
Final Results
58%
React/Next
22%
VueJS/Nuxt
3%
Svelte
10%
Alpine
6%
JQuery
🔥 #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
✨
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!
🔥 #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
🥳 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
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 #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
🃏 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