Recreating the Twitter UI with Tailwind CSS - Suboptimal Clone #3

== [ Description ] == In this video, I go over how to clone the Twitter UI using Tailwind CSS. I explain how to add responsive UI, and dark mode to Twitter. This is the third of many Tailwind clones that I plan to release in the coming few weeks. I'm making this series to practice my UI/web design skills and explain some of the learnings along the way. So sit back, relax, and follow along as I give a code walkthrough of this Twitter clone.

Note: I code this Twitter clone within Vue.js, but no prior knowledge of the framework is required to follow along. I'd also suggest watching it at 1.25 or 1.5x speed.

== [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1

== [ Links ] == Twitter Colors: https://usbrandcolors.com/twitter-colors/ Tailwind CSS: https://tailwindcss.com/ Vue + Tailwind CSS Setup Guide: http://youtu.be/lazG_4uUXMY Vue + Font Awesome Setup Guide: http://youtu.be/MoDIpTuRWfM Vue + Airbnb ESLint Setup Guide: http://www.youtu.be/gigc5XIb-BA

== [ Timestamps ] == 00:00 Twitter UI Clone Demo 01:48 Intro 03:08 Project Setup Guide (GitHub Template) 04:30 Tailwind: Config Explained 09:19 Tailwind: Add Dark Mode 14:50 Navbar: Actions 19:56 Navbar: Tweet Button & Profile 23:23 Navbar: Fixed to Left 24:10 Quick Recap 24:44 Content: Back Button 27:31 Content: Profile Picture 30:05 Content: Notifications 32:03 Content: Profile Info 39:20 Right: Search Bar 40:59 Right: Image Preview 42:09 Right: Hide on Resize 42:45 Right: Recommended Users 44:08 Content: Tweets 44:17 Final Recap 48:23 Fin

== [ Tags ] == #suboptimal #tailwindcss #twitterclone