Simon Vrachliotis Profile Banner
Simon Vrachliotis Profile
Simon Vrachliotis

@simonswiss

23,352
Followers
2,037
Following
5,573
Media
30,377
Statuses

🤗 DevRel & design_gineer @thethinkmill 🎓 Teacher: @protailwind & 🎙 Podcast: @the_navbar 🎬 YouTube:

Woolgoolga, New South Wales
Joined September 2009
Don't wanna be here? Send us removal request.
Pinned Tweet
@simonswiss
Simon Vrachliotis
1 year
Name a DevRel who dropped a better highlight reel for a company 😎
8
5
102
@simonswiss
Simon Vrachliotis
5 years
npm install
43
1K
5K
@simonswiss
Simon Vrachliotis
6 years
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! 🤓
36
426
1K
@simonswiss
Simon Vrachliotis
2 years
The best thing you're gonna see all weekend
11
141
1K
@simonswiss
Simon Vrachliotis
8 months
@thekitze haha was that all the hype of "a new, better sign-in design is coming"?
4
4
1K
@simonswiss
Simon Vrachliotis
2 years
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 🙏
135
15
913
@simonswiss
Simon Vrachliotis
6 years
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 🍺
18
153
903
@simonswiss
Simon Vrachliotis
2 years
🔥 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 ✨
32
77
871
@simonswiss
Simon Vrachliotis
7 months
Multi-theme strategy in Tailwind CSS v4 🤯
Tweet media one
15
50
822
@simonswiss
Simon Vrachliotis
2 years
🔥 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! 💅
15
111
759
@simonswiss
Simon Vrachliotis
4 years
Hold on to your chair 🤣 The new official @tailwindcss playground is insanely cool.
14
135
753
@simonswiss
Simon Vrachliotis
2 years
Awesome effect! 👏 Here's a rough reproduction of the same effect with @tailwindcss :
@jh3yy
jhey ▲🐻🎈
2 years
⚡️ 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? 🧐
28
224
2K
7
69
746
@simonswiss
Simon Vrachliotis
2 months
Show me version of heavily customised shadcn/ui-powered UIs. The "I couldn't tell this was built with shadcn/ui" type.
47
23
734
@simonswiss
Simon Vrachliotis
2 years
⚡️ 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! ❤️
29
88
724
@simonswiss
Simon Vrachliotis
4 years
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.. ❤️
Tweet media one
Tweet media two
Tweet media three
Tweet media four
42
23
708
@simonswiss
Simon Vrachliotis
3 years
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!
32
83
678
@simonswiss
Simon Vrachliotis
5 years
When you forget about that zoom call.. 😅
16
107
659
@simonswiss
Simon Vrachliotis
4 years
@BeanElite Kentavious Cattle-Poop
5
47
609
@simonswiss
Simon Vrachliotis
2 years
🔥 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 ✨
15
63
642
@simonswiss
Simon Vrachliotis
2 years
🔥 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 🤙
19
79
620
@simonswiss
Simon Vrachliotis
5 years
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! 😎
20
96
611
@simonswiss
Simon Vrachliotis
7 months
✨ 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 🪄
16
56
594
@simonswiss
Simon Vrachliotis
2 years
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 👀
Tweet media one
14
125
587
@simonswiss
Simon Vrachliotis
4 years
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 👴😎
Tweet media one
Tweet media two
25
5
528
@simonswiss
Simon Vrachliotis
2 years
🔥 Tailwind Tip 🔥 Styling the `::selection` pseudo-element to match your brand color is a great way to bring extra delight to your designs!
6
64
504
@simonswiss
Simon Vrachliotis
4 years
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! 😅
18
21
503
@simonswiss
Simon Vrachliotis
2 years
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!
19
102
494
@simonswiss
Simon Vrachliotis
4 years
I cannot stop wiggling with excitement! 🙌🎉🤯😍 Starting day #1 right now.. ❤️❤️❤️🙏
@adamwathan
Adam Wathan
4 years
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 😍
81
22
746
48
9
466
@simonswiss
Simon Vrachliotis
4 years
Pro @tailwindcss tip: initiating your config file with the `-p` flag will also generate a default PostCSS config file for you ✨
Tweet media one
7
55
449
@simonswiss
Simon Vrachliotis
1 year
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 🙃
55
16
427
@simonswiss
Simon Vrachliotis
2 years
🔥 Tailwind Tip 🔥 Did you know that @tailwindcss supports **every** CSS property in the CSS spec? Yep, even those that don't exist yet 😅
17
51
418
@simonswiss
Simon Vrachliotis
4 years
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! 🐦🙏 🤓
14
155
414
@simonswiss
Simon Vrachliotis
3 years
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
9
47
410
@simonswiss
Simon Vrachliotis
4 years
Didn't take long for tools like this one to show up! Awesome gradient generator for @tailwindcss made by @jens_tornell 🙌
Tweet media one
5
67
408
@simonswiss
Simon Vrachliotis
2 years
🔥 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 🤗
14
51
395
@simonswiss
Simon Vrachliotis
4 years
_Soon_ ™ 👀🙈 @tailwindlabs
Tweet media one
14
26
391
@simonswiss
Simon Vrachliotis
2 years
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.
148
2
390
@simonswiss
Simon Vrachliotis
10 months
I am now an Australian citizen 🤙
Tweet media one
Tweet media two
Tweet media three
Tweet media four
60
0
379
@simonswiss
Simon Vrachliotis
2 years
You can WAT? I had no idea about this 😅
Tweet media one
@chriscoyier
Chris Coyier
2 years
Things CSS Could Still Use Heading Into 2023
22
27
183
4
18
376
@simonswiss
Simon Vrachliotis
4 years
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!"
29
13
377
@simonswiss
Simon Vrachliotis
7 years
🔥 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.
14
87
360
@simonswiss
Simon Vrachliotis
11 months
Want to do a deep dive into Tailwind CSS plugins, CSS variables, and animated gradients? I have a free course for you!
8
53
342
@simonswiss
Simon Vrachliotis
2 years
🔥 Tailwind Tip 🔥 The "accent-color" Tailwind utilities and the "file" modifier are great to make your form element blend with your brand colors!
8
37
337
@simonswiss
Simon Vrachliotis
2 years
In case you were wondering how BIG Australia is...
Tweet media one
27
7
335
@simonswiss
Simon Vrachliotis
2 years
☝️ 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. 🤗
27
4
331
@simonswiss
Simon Vrachliotis
4 years
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
21
40
337
@simonswiss
Simon Vrachliotis
2 years
🚀 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! ❤️
26
88
322
@simonswiss
Simon Vrachliotis
2 years
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.
Tweet media one
16
41
305
@simonswiss
Simon Vrachliotis
3 years
New Screencast Day 🚀 I'll show you how to rebuild the iOS 15 Notification Summary UI from scratch (even the iPhone mockup!) with @tailwindcss
Tweet media one
8
33
303
@simonswiss
Simon Vrachliotis
4 years
Trying to read JavaScript code through the TypeScript noise 🙃
5
33
292
@simonswiss
Simon Vrachliotis
2 years
🔥 Tailwind Tip 🔥 Use CSS columns for newspaper-like multi-column text, with the `columns` utilities.
14
37
292
@simonswiss
Simon Vrachliotis
3 years
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 🤯
Tweet media one
Tweet media two
Tweet media three
Tweet media four
7
19
289
@simonswiss
Simon Vrachliotis
4 years
It just hit me right now: @tailwindcss 2.0 has exactly **50 shades of Gray**. 😅
11
12
281
@simonswiss
Simon Vrachliotis
3 years
Oh hey, hello *YOU*! Have a great day ❤️
13
8
282
@simonswiss
Simon Vrachliotis
7 months
Tailwind Labs has 90K+ subs on YouTube 👀 I've produced 74 of the 77 videos on the channel, and I'm incredibly proud of the work I've done 😎
Tweet media one
16
1
285
@simonswiss
Simon Vrachliotis
5 months
@jacobmparis I want a "clipboard" to copy, a stamp to "paste".
1
1
272
@simonswiss
Simon Vrachliotis
6 years
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! 🤗👋
23
34
270
@simonswiss
Simon Vrachliotis
10 months
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 😎
10
6
268
@simonswiss
Simon Vrachliotis
6 years
Fixing a "small bug" in production
@LisaCT68
Disgusted in Devon
6 years
That went well
1K
12K
33K
6
66
262
@simonswiss
Simon Vrachliotis
4 years
Starting another week of "What's new in @tailwindcss ?" screencast production! 🎉❤️🎬
Tweet media one
7
9
260
@simonswiss
Simon Vrachliotis
1 year
TypeScript getting the Tailwind treatment for a day, eh?
10
9
252
@simonswiss
Simon Vrachliotis
7 years
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 🎉
Tweet media one
6
52
252
@simonswiss
Simon Vrachliotis
2 months
Tailwind Toot 🍑 Line-up your anchor page jumps perfectly with the scroll-margin-* utilities ✨
6
28
248
@simonswiss
Simon Vrachliotis
4 years
Just discovered @kunchevsky and his @Procreate creations and I am losing my mind on how good this is. One more week until I get my iPad + Pencil! ❤️❤️
@kunchevsky
Alex Kunchevsky
4 years
I’ve just released FREE live wallpapers for iPhones and Android devices! 🎉 Please support my project on ProductHunt: #speedpaint #procreate #producthunt
4
131
755
3
21
243
@simonswiss
Simon Vrachliotis
1 year
@gavinthomas2015 I see a chocolate labrador puppy, exhausted after a big day of playing in the snow ❤️
18
0
245
@simonswiss
Simon Vrachliotis
3 years
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! 🍻
Tweet media one
13
5
238
@simonswiss
Simon Vrachliotis
4 years
Instagram vs reality 😅
Tweet media one
Tweet media two
8
9
241
@simonswiss
Simon Vrachliotis
2 years
🔥 Tailwind Tip 🔥 Prepare your designs for printing with the `print` modifier 🖨
5
18
234
@simonswiss
Simon Vrachliotis
1 year
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 🤙
Tweet media one
7
19
238
@simonswiss
Simon Vrachliotis
4 years
Shop window vs back office 😅
Tweet media one
Tweet media two
6
6
231
@simonswiss
Simon Vrachliotis
1 year
New YouTube video 🚀 In this one, I wrap the theming strategy from the awesome @shadcn ​/ui project inside a reusable Tailwind Plugin & Preset 🎁 ​
Tweet media one
7
25
222
@simonswiss
Simon Vrachliotis
2 years
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! 🤗
Tweet media one
Tweet media two
7
11
219
@simonswiss
Simon Vrachliotis
1 year
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".
Tweet media one
8
5
219
@simonswiss
Simon Vrachliotis
7 months
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 🔥
Tweet media one
5
19
217
@simonswiss
Simon Vrachliotis
3 years
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!
7
17
213
@simonswiss
Simon Vrachliotis
3 years
@thebseymore @chris_herd "Heyyyyy, quick question!"
3
5
206
@simonswiss
Simon Vrachliotis
4 years
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!
31
13
207
@simonswiss
Simon Vrachliotis
4 months
How good does the Tailwind config look in @tailwindcss v4 😍
Tweet media one
11
15
206
@simonswiss
Simon Vrachliotis
2 years
Nawwwwwww it's been a ride ❤️❤️❤️
Tweet media one
13
3
200
@simonswiss
Simon Vrachliotis
7 years
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! 😍
Tweet media one
9
67
193
@simonswiss
Simon Vrachliotis
2 years
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. 🙃
20
12
199
@simonswiss
Simon Vrachliotis
10 months
Pretty pumped about this! 💫💫
@kentcdodds
Kent C. Dodds 🌌
10 months
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! 🙌
21
16
408
23
0
197
@simonswiss
Simon Vrachliotis
2 years
🔥 Tailwind Tip 🔥 Add a small touch of delight to your links with text-decoration utilities!
1
18
195
@simonswiss
Simon Vrachliotis
2 years
The data-[] variants in @tailwindcss make is super easy to style Radix UI components ✨
3
9
191
@simonswiss
Simon Vrachliotis
4 years
I just told my wife: "we broke the internet with the launch of Tailwind 2". She looked at me and said: "What's Tailwind Two?" 🤣
13
0
188
@simonswiss
Simon Vrachliotis
2 years
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 !!! 😳
47
2
187
@simonswiss
Simon Vrachliotis
3 months
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!
9
10
183
@simonswiss
Simon Vrachliotis
3 months
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 🎉
11
37
181
@simonswiss
Simon Vrachliotis
3 years
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 😅
13
5
182
@simonswiss
Simon Vrachliotis
7 months
✨ 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)
Tweet media one
Tweet media two
Tweet media three
Tweet media four
11
16
181
@simonswiss
Simon Vrachliotis
3 months
what about a micro tailwind tuts series?
9
8
181
@simonswiss
Simon Vrachliotis
4 years
🔥 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! 👍
2
4
178
@simonswiss
Simon Vrachliotis
5 years
We just moved into this lovely, minimalist little house.. ❤ And then all our crap arrived! 😅 Time to Marie Kondo that shit.
Tweet media one
Tweet media two
Tweet media three
Tweet media four
10
2
170
@simonswiss
Simon Vrachliotis
2 years
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 👍
Tweet media one
10
15
171
@simonswiss
Simon Vrachliotis
2 years
⏳️ 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 ❤️
11
15
170
@simonswiss
Simon Vrachliotis
2 years
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! 🎉
15
2
169
@simonswiss
Simon Vrachliotis
9 months
Facebook hits different — I announced my workshop there and it got... 93 views. It also got 3 shares, from... - my mum - my dad - my mother-in-law 🤣
Tweet media one
6
3
167
@simonswiss
Simon Vrachliotis
3 years
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 ?
Tweet media one
13
5
164
@simonswiss
Simon Vrachliotis
1 year
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) 🤯
Tweet media one
Tweet media two
5
12
161