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!
Writing CSS is tough stuff!
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.
!importantclasses to override the framework's styles. Tailwind doesn't have the
!importantproblem 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 conceptsto 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.
A Tailwind Video I've Done
Hey there! My name is Chris Sev 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 byDigitalOcean 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.
I did a Build Your 1st Tailwind Site for Traversy Media on YouTube also.
What you'll learn in this course
How to use Tailwind classes
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.
Make good looking designs
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.
Why Tailwind is different/better
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.
How to build this site (site-ception!)
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.
A fun and methodical design process
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.
Creating common components
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.
Shrinking bundle sizes
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!
Using Tailwind w/ React
While we could use the @apply() or theme() functions, it forgoes some of the benefits of Tailwind. Namely we are once again creating a custom class and CSS.
How to customize Tailwind
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.
Using Tailwind in VS Code
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.
Learning Tailwind is just the beginning. There are some great tools like Tailwind Typography, Tailwind UI, Tailwind Builder, and more. We'll talk about some ways to extend Tailwind and ways we can go further.
What we'll build 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.
Building a Course Site
About Me Section
What You'll Build
Frequently Asked Questions
Do I need to know CSS?
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.
Can I use the code in my own projects?
Definitely! All of the code in this course is yours to use in your sites, apps, projects, whatever.
What if I don't like it?
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 email@example.com.
How do I login and view the course?
You can login at Gumroad. Use the login button in the top right.
Is there a student discount?
Yup! 50% off! Email me at firstname.lastname@example.org with your student id and I'll send you a discount code.
I have more questions!
Drop me an email at email@example.com. Let's chat.