Calmcode - tailwind: introduction

Introduction to tailwindcss.

1 2 3 4 5 6 7

In this course we're going to discuss a very likeable css framework called Tailwind CSS. This framework is a utility-first css framework. This means that you can style your website by adding classes to your html elements directly without the need to worry about CSS files.

This is what a simple html file looks like with Tailwind CSS in it.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-2xl text-green-500 bg-slate-300 font-bold underline">
    Hello world!
  </h1>
</body>
</html>

If you want to play around with tailwindcss directly you can use the playground if you don't want to worry about installing anything locally. The next videos will assume VSCode is installed on your machine but you really don't need it to follow along.