If you’re interested in front-end web development, this UI framework should be on your radar. The creators of Tailwind CSS call it a “utility first” framework and it’s a major departure from the dominant UI frameworks of the last decade. (Think Bootstrap.)

Join me to learn the basics of the framework. We’ll use it to build a simple UI component and explore how to extract components so they are easy to reuse. Using this technique, you can easily build your own custom UI framework on top of Tailwind. It’s a web developer superpower that you want. Trust me on this.

Things You'll Need

• Node
• A text editor. You can get Visual Studio code for free. I talked about why I recommend it for new developers.
• I use the terminal on my Mac a fair bit. If you’re on Mac or Linux, you’re all set. You can use the terminal emulator bundled with your OS. If you’re on Windows, you can get by with the Windows command line or Powershell, but I’d recommend Windows 10 users install the Linux Subsystem so you can use a real Unix terminal emulator.

Finally, if you want to try to include the app menu button (the grid-looking thing in the top right) using FontAwesome to get kinda close, the “th” icon is the closest one I found. Feel free to use anything else that you prefer, whether that’s a different FontAwesome icon or something else entirely.

Resources

• 🔧 Tailwind
• 🔧 iTerm
• 🔧 Emmet for VS Code (In the video, I said this was an extension, but it’s actually built into the editor now.)
• 🔧 rem length units

If you have any questions, please leave them on the YouTube video, or feel free to send them to me over on Twitter.

Looking for a project to try out Tailwind on? I’ve got a list of project ideas, one of which offers a project starter kit that will get you up and running in no time. You'll see the form to request a copy of the starter kit on the project ideas page linked above. Just toss out the included CSS, add Tailwind, and start building your own rad UI!