Make good looking designs quickly. All without a single line of custom CSS.Get the Course
We'll create BeginnerTailwind.com (it's the site you're on now)
We'll do it all without a single line of custom CSS!
Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework. If you want a CSS framework that has pre-built components, then Tailwind may not be for you. If you want a CSS framework that lets you design quickly and customize your site, then Tailwind is gonna be a lot of fun.
After using Bulma to build Scotch.io, my CSS files became littered with my own
!important classes to override the framework's styles. Tailwind doesn't have the
!important problem since all our elements are designed on the fly.
Important Note: Tailwind lets us design quickly, but this doesn't mean that you don't need CSS knowledge however. To use Tailwind, you need to have a good understanding of CSS properties. In this course, we will learn Tailwind and we'll also learn CSS concepts to create good looking designs. Tailwind is the ultimate CSS shorthand, but we still need to learn the CSS, which we'll do in this course.
"This isn't just a Tailwind course. This is also a "learn how to design with CSS" course.
The hardest things about learning Tailwind is memorizing the classes and also knowing which classes go well together. We'll be writing a lot of Tailwind in this course so that the repetition will help us commit Tailwind classes to memory.
Hey there! My name is Chris on Code and I founded a web dev tutorial site Scotch.io. We were able to grow to 4M monthly pageviews and $300,000 yearly revenue. Scotch.io was acquired by DigitalOcean in November 2019. Nowadays I'm in search of the best ways to develop and design a business. Hope you enjoy this course and my other one MakeReactApps.com.
We'll dive into the most important Tailwind classes and use them a TON. There are a lot of useful classes like spacing, backgrounds, borders, shadows, and typography. We'll type the Tailwind classes many times over to ensure that repeitition is our greatest learning tool.
There's a certain process to designing with Tailwind that we'll take to make our designs look good. Some easy to remember rules are all it takes to get a good design. We'll also talk about ideas and action items to take a good design and make it great.
To be completely honest, I didn't like Tailwind at first. It felt like inline styles to me (and maybe still does). After using it more and more though, I've come to absolutely love it. I dread jumping into a project without Tailwind now.
The site you're on (BeginnerTailwind.com) is built with Tailwind and has 0 custom css.
You can take all of the code from this site and use it for your own landing pages or sites! All the code is available to you with course purchase.
I struggle with making things look good and don't consider myself a designer. What I try to do is have a formula for making things look good. I focus on design in this order: spacing, box properties, typography, fun element to pop. We'll talk about this all throughout the course.
One of the first things we want to do when using Tailwind is to create components like cards, buttons, and forms. We'll build these out and see how Tailwind compares to CSS frameworks like Bootstrap.
We'll also build out navigation, hero, pricing, newsletter, and footer components in this course.
Tailwind comes with so many classes. It doesn't make sense to send all of those to our users' browsers. With PostCSS and PurgeCSS, we can shrink the amount of CSS we send to our users.
We'll learn how to only send the classes that we actually use so that our bundle sizes can drop to even below 10kb!
Tailwind is easily configurable for our own projects using the tailwind.js config file. We'll explore changing out fonts, colors, sizes, and more so that our Tailwind setups are custom and tailored to our projects.
VS Code is my favorite editor and Tailwind works fantastically in it. There are some essential plugins and setup for using Tailwind in VS Code. We'll go over each and use VS Code heavily in this course.
These components are things you'll have to create in every project.
9.25 hours of Tailwind learning in 19 modules/75 videos.
This course is aimed at people that have some CSS knowledge and want to learn Tailwind. I do talk through CSS concepts and why we're using certain classes all throughout the course so you don't need to be a CSS expert.
You can email me directly at any time and we also have a Discord community where you gain exclusive channel access.
Definitely! All of the code in this course is yours to use in your sites, apps, projects, whatever.
I offer a lifetime refund policy. If you ever feel like you didn't gain value from this course, then you can request a refund from your course dashboard (totally automated process, no questions asked).
You can login at learn.better.dev. Use the login button in the top right.
Yup! 50% off! Email me at firstname.lastname@example.org with your student id and I'll send you a discount code.
Yup! Email me at email@example.com and I'll send you a purchase power parity code.
Drop me an email at firstname.lastname@example.org. Let's chat.