Installing Tailwind CSS

go.raybo.org/2OXU

Tailwind isn't for beginners, it requires some tools in order to work with your projects.

Getting Ready

You're going to need NPM, the node package manager. That's bundled when you install Node.js. Node helps you create a project and install modules, which are like plugins. One more tool that you get when using node is npx, which is a package runner that lets you run node.js without having to install the software.

Since this project requires build tools, I suggest you also get a copy of Git and that you're familiar with it before taking this course. If you're on a PC, you may want to install the Git Bash terminal so that you can run the Linux commands I'll be using. Otherwise, you can use PowerShell, hyper or some other terminal app.

Now, we need some tooling. Tailwind has it's own CLI, which is a command line interface that lets offers you some tools to work with Tailwind. The main thing it does is something called Just In Time compiling, which means that it will process your files and only create the CSS you need for your project.

Using a CDN 

<link href="https://unpkg.com/tailwindcss@^2.2.7/dist/tailwind.min.css" rel="stylesheet">
  • No customization
  • No plugins
  • No tree shaking
  • No JIT

There's another way you can use Tailwind, and that's through the CDN, or content delivery network link. We'll be using that in this course, when I want to give you quick examples to try.

Unfortunately, this version of Tailwind isn't as customizable as the regular version. It's fine for learning and playing, but not really working.

You can't use third party plugins with this version, so it makes tailwind harder to extend.

Finally, some tools can work to remove the CSS parts of Tailwind you don't need. That's called tree-shaking and a CDN link can't do that.

The Just In Time compiler that comes with Tailwind is pretty awesome, but you don't get those benefits when you use a CDN.

Extensions for VSCode

Here's a few Visual Studio Code extensions you might consider installing.

First is one that should be pretty obvious and that's IntelliSense for VS Code. That's so that you get recommendations as you type code.

The second is a quick way to get to the documentation. You can find these in the Visual Studio Marketplace, or directly under extensions in Visual Studio Code.

Practice

  1. Create a Folder
  2. Add an HTML file
  3. Watch with npx
  4. npm w/package.json
  5. Repo

It's time for a little practice...Here's what we'll do, we'll start by creating a folder for our project.

Then we'll add an HTML file with some basic code linked to a CSS file.

Then, we'll run the npx command to create our CSS file.

Finally, we'll add the files necessary to run this as a project.

Starter HTML Template 

&lt;!DOCTYPE html> &lt;html lang="en"> &lt;head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" />
<title>Tailwind CSS</title>
&lt;/head> &lt;body>
<!-- Content Starts Here -->

<div class="text-center">
  <h1 class="mt-24 text-5xl px-6 font-extrabold text-green-500 tracking-tight">About Binaryville</h1>
  <img class="w-32 mx-auto" src="http://pixelprowess.com/i/powship.svg" alt="POW Ship" />
  <p class="mt-4 max-w-2xl px-6 text-xl text-gray-500 mx-auto">
    On the edge of the world stands the progressive town of Binaryville, where technology is a way of life. The robots who live, work, and play in
    Binaryville learn from an early age that magic is made simply by combining 0's and 1's. For the Binaryville robots, every waking thought and every
    sleeping dream is consumed with unique permutations…and endless possibilities.
  </p>
</div>

<!-- Content Ends Here -->

&lt;/body> &lt;/html>

Here's an html file. You can see some simple HTML in there as well as a link to the CSS file.

CLI with npx 

npx tailwindcss -o ./css/styles.css --jit --purge "./**/*.html" --watch

You can use NPX to parse this HTML file. The basic command will just create a CSS file with all of Tailwinds styles.

That can get rather large, so you can add the JIT flag, which will try to output only the things you need.

In order for that to work you'll need to have it scan your HTML files, so the purge flag will let you specify the files you want it to go through. Finally, the --watch flag will process the files