My favourite trick to do in devTools is probably `document.designMode = "on"`. Turn it on and start editing text on any element on a website. Super cool! 🤓
PSA: I don't work at Tailwind Labs anymore - my last day was a couple weeks ago already.
Not my decision - I enjoyed the ride while it lasted ❤
I'll definitely continue making videos, and definitely continue using Tailwind.
And also take a well deserved break over Easter 🙏
First I was like "oh cool,
@figmadesign
made an on-brand 404 page with an allusion to bezier handles..".
Then I thought "hey, how could would it be if it was actual bezier handles!"
Figma: hold my 🍺
🔥 Tailwind Tip 🔥
Create a "color background split" effect with CSS Grid.
It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨
🔥 Tailwind Tip 🔥
Container queries are here in
@tailwindcss
🙌
Let's take a look 👀
Container queries are changing the game. They make your UI components more robust and resilient.
Browser support is getting really good, so it's time to embrace a new CSS/Tailwind skill! 💅
⚡️ Speedy CSS Tip! ⚡️
Create "That" animated boujee gradient text effect 💅
Learn which ✨ magic ✨ property makes it possible and how you can use scoped custom properties in your animations 🔥
Hope it's useful! 🤞 Thank you for the feedback 🙏
What shall we do next? 🧐
⚡️ I'm working on an advanced
@tailwindcss
course geared for dev teams!
It will cover topics such as:
📚 Component libraries with Tailwind CSS
🤹♂️ Using Tailwind CSS in monorepos
🎨 Multi-theme support beyond just dark mode
Sign-up to be in the loop! ❤️
Shoutout to
@tailwindlabs
for empowering me to build an EPIC location-independent, packs-away-in-a-backpack workstation!
In true
@tailwindcss
spirit, this kit lets me *compose pieces together* to achieve a variety of desks, based on the available space and type of work I do.. ❤️
Introducing... 🎬 Better Dev Screencasts 🎬
A personal project of mine, where I can share what I know about making high-quality programming screencasts.
There is only one post as of now - but you gotta start somewhere!
🔥 Tailwind Tip 🔥
Fun fact,
@tailwindcss
actually supports *every single* CSS property, even those that do not exist yet 👀
You can use the *arbitrary properties* syntax to write any CSS you want, and for which Tailwind doesn't provide utility classes ✨
🔥 Tailwind Tip 🔥
The new "data attribute variants" in
@tailwindcss
v3.2 let you style elements based on a specific data attribute value ✨
Useful for 3rd-party libraries, or for places where JS framework props cannot go 🤙
Tony (7) wanted to choose "how to code" for this week's presentation - so I showed him the basics of how a website is built.
Used
@CodePen
for it - we built 3 websites to show the different roles of HTML, CSS and JavaScript.
Lil' dude got a hang of it all. Here's the result! 😎
✨ Tailwind CSS v4 demo ✨
Define **one** CSS variable in CSS and generate a comprehensive set of utilities to use the "design token" in your project.
Colors for text, background, border, caret, shadow, gradient-from, via, to, etc 💥
Tailwind is a CSS framework... generator 🪄
I'm not doing a good enough job promoting my FREE
@ProTailwind
tutorials.
Spent *many months* working on these and they're available to anyone who signs up for the mailing list.
Premium
@tailwindcss
courses with my signature teaching style, for FREE 👀
Yo I am 39 years old and I just woke up at 5.15am to go to the skatepark and do a few runs before all the pro level kids take over 😅
It's now 6.45am and I am going for a surf before work.
I feel alive 👴😎
Building
@steveschoger
's
@tailwindui
"finance app homepage" example to some smooth lofi hip hop tunes on this cold rainy day.. 😍👀🌧
I could do this all day. Oh wait - I am! 😅
Published the first FREE
@ProTailwind
tutorial on 🔥
It's a full 10-step course including a 30-min bonus screencast at the end.
I think you're going to absolutely love it!
It’s not Monday here yet but it is where he lives, so sharing it now...
@simonswiss
has joined our team at
@tailwindlabs
! 🥳
Simon has been carrying the utility-first flag since before Tailwind even existed and I am so excited to have him on the team 😍
I've been creating quality Tailwind CSS content for 5+ years.
Provided value and community help consistently.
I am trying to sell a Tailwind course and build an audience.
Every day I see Twitter engagement shit takes have 100x more views than my content.
It's annoying af 🙃
Soooo... I shipped it! 🚀
17
@eggheadio
videos. 34 minutes of React goodness with my Swiss-French accent! 🇨🇭
The series is available freely to everyone ❤️🌎
I put a lot of effort into it. It would mean the World if you can give this a retweet! 🐦🙏 🤓
Loved these cool blurry, animated background shapes I noticed on the
@qoals
landing page the other day!
In this thread, I'll show you how to recreate them with
@tailwindcss
🔥 Tailwind Tip 🔥
The <details> element takes an `open` attribute to determine if it's currently open or not.
You can use Tailwind's `open:` modifier prefix to apply styles only when the <details> element is... open 🤗
Devastated.
Our beloved corgi Flex just died, in front of the whole family, in the most horrific way.
Either seizure or 1080 fox poison, we don't know yet.
Perfectly fine one minute, he started howling, running against walls, contorting grasping for air.
I am in shock.
Giving my daughter 5 minutes of "air time" on my setup right after she came back from basketball camp and had a spoon of Nutella...
The results are spectacular 🤣
"
@tailwindcss
is the best - you should all use it. I love chocolate Nutella!"
🔥 Workflow alert! 🔥
24 seconds to show you why people rave about the "workflow", "speed" and "productivity" that come with utility-first CSS frameworks like
@tailwindcss
.
Or, more broadly, working without context switching, without stopping to "name" things.
☝️ A clarification I wish I didn't need to do:
I didn't "quit Tailwind Labs to *grift* my own course'.
I got cut from the team, so I decided to make my own course.
🤗
The upskilling curve was steep on this one!
Producing this series taught me *a lot* about:
📷 mirrorless cameras & lenses
💡 lighting
🎤 audio for "on-camera" content
😱 talking into said camera
✂️ DaVinci Resolve cut & edit workflow
🔈 audio processing
🚀 STOKED: the first self-paced workshop in the
@ProTailwind
series is now available!
Get hands-on practice with adding *multi-theme support* to
@tailwindcss
projects.
Special 25% off launch price: $59 🤗
Love you all! ❤️
My goal is to *earn money* with
@ProTailwind
, and to make it sustainable.
But there are no words that can describe how happy I get when I see this page, which is made of *100% FREE* resources.
Those are premium quality courses, not just "swag giveaways".
I put my ❤️ into them.
Fun fact that kinda blows my mind:
Every single example in this video comes from the same one website, using the same default Tailwind config (just added a few custom fonts).
All these bespoke designs, composed with the same building block utilities 🤯
I successfully career changed into web development, starting from scratch at age 25.
You too can do it, without quitting your current day job.
If you're contemplating how to get started or need some tips along the way, hit me up! 🤗👋
One of my peak career moments so far was when I decided to learn motion graphics and make a last-minute hype reel for the
@tailwindcss
v3.0 launch.
The edit came together in ~2 days, from just an idea to something that feels produced by a professional studio 🔥
Very proud 😎
Building a fun
@gatsbyjs
API docs site.
Pretty incredible how, when disabling JavaScript, the SPA site falls back to traditional multi-page, with page reload. Everything still works perfectly!
Progressive enhancement baked in Gatsby - this is truly awesome!
@kylemathews
🎉
Cleaning up the
@tailwindlabs
YouTube channel today, adding Tailwind Play examples to most videos, and updating thumbnails where needed.
Made me realise I created a decent amount of content over time.. 66 videos to be precise 🙌
Here's to many more in the future! 🍻
New YouTube video 🚀
tailwind-merge is a small but incredibly useful library by
@dcasn
that lets you merge
@tailwindcss
classes without style conflicts.
In this screencast, I teach you *why* tailwind-merge is so useful in the first place.
Video URL in the reply 🤙
Super stoked to reveal the brand new Pro Tailwind design 💅
The new brand represents a lot of who I am: a positive, enthusiastic person who loves sunshine, surfing, basketball, and... corgis! 🤗
Recorded a video on
@shadcn
's shadcn/ui 👀
Not on the UI component themselves — but about wrapping the project's theming strategy within a Tailwind CSS plugin.
And bundle the starter setup in a Tailwind "Preset".
In Tailwind CSS v4, you no longer need the whole RGB channels and rgb() with <alpha-value> composition for CSS variables...
HEX color will do fine and use color-mix() for transparency 🔥
I was checking out what's coming in iOS 15 the other day, and I noticed this cool new Notification Summary UI
I thought: "Hey, wonder how easy it would be to build this with
@tailwindcss
?"
I'll show you, step by step, how easy it is!
Who would be interested in doing some "Learn
@tailwindcss
with Simon" short streams (or pre-recorded videos) with me?
Would love to talk to both "skepticals" and "converts" too!
I say, give the freedom to your team to work remotely, when possible. It usually makes people super motivated.
Take me as an example. It's 6.40am and instead of sitting in a jam packed bus, I am starting my work day at this incredibly cool office! 😍
6 years in with utility-first CSS, I *still* don't get the "JUST LEARN CSS" argument.
Assembling complex UIs with utility classes *is* learning CSS - it's just a different way to "write" it.
🙃
I'm stoked to announce that
@simonswiss
is joining me to teach you full stack web development on Epic Web!!
Here's his first bit of much more to come! 🙌
There are PLENTY of reasons why you should NEVER move to Australia...
...but *this* shit from this morning is likely the
#1
reason 🙀
In the BEDROOM !!! 😳
Tailwind Toot ✨
The "space-x/y-*" utilities in Tailwind CSS were mostly useful before the "gap" CSS property for Flexbox and Grid was widely supported.
In most cases I prefer to control "in-between" spacing with gap these days!
Today’s the day 🚀
After two sold-out live workshops — “Pixel Perfect Figma to Tailwind” is launching as a video course 🎬
Covers both Tailwind CSS v3 and v4 ✨
Super STOKED about this 🎉
Holy crap y'all, my son asked me if he could use my recording studio for his school assignment.
He prepared an expose on Elon Musk, all by himself, and his on-camera skills are insaaaaane!
Looks like I'm getting deprecated very soon 😅
✨ Mini Tailwind CSS v4 demo ✨
Replacing the font size scale with
@openprops
' one.
This is the entire setup (using Tailwind in
@astrodotbuild
as a Vite plugin)
🔥 The key to teaching is finding "easy to process" examples to convey your message.
For example, the "ghost" shape here shows the original position and illustrates the "transform-origin" property quite well! 👍
Let's build a pricing section with Tailwind CSS 🎉
This one has some pretty cool Flexbox tricks in it. I particularly like the split background effect at the end 👍
⏳️ In ~ 7 hours, I'll make an announcement that I have been looking forward for a looooong time.
If you can help me amplify it by sharing it around, it would mean the World to me ❤️
Happy to announce that I've (re) joined
@thethinkmill
team at a part-time/fluid capacity 🎉
I'll help them with content creation and devrel things, while they support me with my
@ProTailwind
(and other) course creation 🤜🤛
Win-win! 🎉
Browsing through
@landbookgallery
today, I found this pretty interesting grid layout.
Super rough prototype here, but who would be interested in a short tutorial on how to achieve such a (responsive) layout with CSS Grid in
@tailwindcss
?
In the evenings of the last 2 weeks, I have completed the following
@laracasts
series in the Laravel path:
- PHP for beginners
- Object-Oriented Principles in PHP
- Laravel 8 From Scratch
That's like 21 hours of content (watched at 2x speed -> ~10+ hours)
🤯