Log inSign up
Image
user avatar
Simon Vrachliotis
@simonswiss
Design Engineer, Video Producer & Dev Educator. Team @fireship_dev šŸ”„
Woolgoolga, New South Wales
simonswiss.com
Joined September 2009
2,136
Following
25.2K
Followers
  • Pinned
    user avatar
    Simon Vrachliotis
    @simonswiss
    Apr 12
    Personal update: I've quietly but officially accepted an offer to join the @fireship_dev team full time! šŸ”„ A big switch to "behind the scenes" from what I am used to do. I love being involved in all aspects of supporting & augmenting a large scale video production pipeline.
    17K
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Jul 31, 2019
    npm install
    Image
    00:00
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Nov 14, 2018
    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! šŸ¤“ developer.mozilla.org/en-US/docs/Webā€¦
    Image
    00:00
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Aug 6, 2022
    The best thing you're gonna see all weekend
    Image
    00:00
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Feb 22, 2024
    Replying to @thekitze
    haha was that all the hype of "a new, better sign-in design is coming"?
    49K
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Apr 7, 2022
    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 šŸ™
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Jul 4, 2018
    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 šŸŗ
    Image
    GIF
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Dec 21, 2022
    šŸ”„ 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 āœØ
    Image
    00:00
    128K
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Mar 8, 2024
    Multi-theme strategy in Tailwind CSS v4 šŸ¤Æ
    Image
    71K
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Oct 27, 2022
    šŸ”„ 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! šŸ’…
    Image
    00:00
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Aug 19, 2025
    "You're absolutely right!", even in Tailwind šŸ¤£
    Image
    34K
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Oct 7, 2020
    Hold on to your chair šŸ¤£ The new official @tailwindcss playground is insanely cool. play.tailwindcss.com
    Image
    00:00
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Apr 23, 2022
    Awesome effect! šŸ‘ Here's a rough reproduction of the same effect with @tailwindcss: play.tailwindcss.com/JnNryo1CmL
    Image
    00:00
    Image
    00:51
    user avatar
    jhey Ź•ā€¢į“„ā€¢Ź”
    @jh3yy
    Apr 22, 2022
    āš”ļø 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? šŸ§
  • user avatar
    Simon Vrachliotis
    @simonswiss
    Jul 23, 2024
    Show me version of heavily customised shadcn/ui-powered UIs. The "I couldn't tell this was built with shadcn/ui" type.
    246K