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.
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.
== [ 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 47:17 Final Recap 48:23 Fin
Start learning about Tailwind CSS with this guide which covers installing via a package manager, generating the configuration file, building a website and reducing the final CSS file.
Master Tailwind CSS with this Cheatsheet. Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS. Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything. We will see the most basic CSS classes and their relative properties in CSS.
In this video you’ll learn how to install Tailwind CSS via NPM. Before you could install it, you do need to have Node.JS installed.
This video is created as an introduction to Tailwind. Tailwind is a utility CSS framework to make your life as a developer easier. You will see what the advantages and disadvantages are of using Tailwind and what the difference is between Tailwind and Bootstrap.
Tailwind v2.2 was just released. We take a tour of some of the most exciting new features in Tailwind CSS v2.2. Tailwind v2.2 with a brand-new Tailwind CLI tool, a ton of new features using the JIT engine, and more.