Chapter 4.1 — Tailwind CSS.

Tailwind CSS is a recent and popular CSS framework that provides utility-based classes. That means that you shouldn't worry about establishing a design system or even creating classes anymore—all the necessary CSS classes you'll ever need are already created for you and follow a predetermined design system!

Note for students in China

The default Tailwind's website may not be available in China. However, there is a separate Chinese version of the exact same website that you can use to access documentation: https://docs.tailwindchina.com/.

Installing Tailwind CSS

Usually, websites are written using various web frameworks (which will be described in Lecture 11). Tailwind CSS is supposed to be integrated with those frameworks, and installing it takes a bit of effort—even for experienced web developers. The reason why it's hard to get Tailwind up and running is that it is a highly customizable framework with many features not covered in this class. That is why Tailwind itself depends on other plugins like PostCSS and autoprefixer. But we don't want you to worry about setting all of that infrastructure up. Luckily, Tailwind also ships in a simplified form via a CDN (Content Delivery Network). Setting it up in this way requires you to add only one attribute to the <head> of your HTML page:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

This way of installing Tailwind has its disadvantages:

  • You can't customize Tailwind's default theme
  • You can't use any directives
  • You can't enable additional variants like group-focus
  • You can't install third-party plugins
  • You can't tree-shake (remove) unused styles

However, we don't think you will need any of these features anyway. At least in this class, we haven't covered any of them as we don't believe they would be useful for you yet.

Homework

The best way to learn how to use Tailwind CSS is to put it to practice. For this homework, we would like you to work on the website that you've been setting up in Unit 1 and designing in Unit 2. Specifically, we want you to implement all components of your website that you want to have included in your final website. Don't worry about the layout yet—feel free to just stack everything in vertically. We will learn more about layout and positioning of the elements in the next and final lecture.

For example, if you are building a website about yourself, you may have designed a simple webpage that has your photo, your name, your background, perhaps a list of your projects organized as cards, and a list of your interests. In this homework, we want you to build these HTML elements. However, you shouldn't worry about positioning them on the screen yet—you will actually position the elements on the website in the next homework. After that, you will deploy it online!

For this homework, we also want you to consult Tailwind's documentation very often. It's not possible to memorize all Tailwind classes, so you should feel free to search up what you need in the documentation. In fact, you are encouraged to do so!

You might also find Tailwind CSS IntelliSense plugin—which you set up in the very first homework—very useful for this assignment. Make sure you have it!

Commit and push to Github

As you work on this homework, don't forget to commit often. Once you implement everything that's required, push it to Github!