Beginner Tailwind

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.

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.

What classes should I use?
How do I make things look good?
My design looks basic?
How do I do responsive?
Why does my typography look so bad?

Some Tailwind Videos I've Done

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.

I have a Getting started with Tailwind article on scotch.io and a 15 minute starter YouTube video.

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

Tailwind's benefits really shine when you pair it with a JavaScript library/framework. Extracting classes into components is the recommended way to keep Tailwind DRY (don't repeat yourself).

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.

Extending Tailwind

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.

😍
Buttons
😍
Cards
😍
Forms
😍
Header
😍
Navigation
😍
Hero
😍
Grids
😍
Newsletter
😍
Pricing Section
😍
FAQ Section
😍
Parcel.js Setup
😍
Responsive

Start Tailwind-ing!

$47
Buy the Course
75 videos at a smooth pace
9.25 hours of learning + building
Source code and CodePens
Use the code in your projects
Access to Discord for support
Lifetime refund guarantee

The Modules/Videos

9.25 hours of Tailwind learning in 19 modules/75 videos.

Getting Started

6 videos
33 minutes

Main Concepts

11 videos
67 minutes

Layout

4 videos
37 minutes

Card Components

3 videos
34 minutes

Button Components

3 videos
32 minutes

Form Components

3 videos
35 minutes

Building a Course Site

6 videos
42 minutes

Header/Navigation

3 videos
16 minutes

Hero Section

4 videos
36 minutes

Overview Section

4 videos
26 minutes

About Me Section

3 videos
17 minutes

What You'll Build

1 videos
11 minutes

Pricing Section

4 videos
33 minutes

FAQ Section

1 videos
6 minutes

Footer/Newsletter

4 videos
30 minutes

Fixes

2 videos
5 minutes

Going Beyond

5 videos
44 minutes

Conclusion

2 videos
5 minutes

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.

Is there course support?

You can email me directly at any time and we also have a Discord community where you gain exclusive channel access.

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 your course dashboard (totally automated process, no questions asked).

How do I login and view the course?

You can login at learn.better.dev. Use the login button in the top right.

Is there a student discount?

Yup! 50% off! Email me at hey@chrisoncode.io with your student id and I'll send you a discount code.

Is there purchase parity for my country?

Yup! Email me at hey@chrisoncode.io and I'll send you a purchase power parity code.

Is there an affiliate program?

Yup! You get 50% of every sale that you bring in. You can sign up for a course and turn on affiliate mode from your dashboard at learn.better.dev. Or you can email me at hey@chrisoncode.io.

I have more questions!

Drop me an email at hey@chrisoncode.io. Let's chat.

Get updates on this course

Copyright © 2020-4755 Chris on Code