Installing and using Tailwind CSS 3.0

Installing Tailwind CSS 3.0

Tailwind CSS 3.0 is still in a very early stage, but it’s convenient to use so that the project you’re preparing is not outdated in a short time.

Tailwind CSS 3.0 can be used in 3 different ways:

  • With the online tool called Playground, on the Tailwind CSS website. It’s basically an online editor with Tailwind CSS already included. Interesting to play with the framework and make quick tests.

Let’s take a look at each of them.

Using the Tailwind CSS Playground

The easiest way to try Tailwind CSS is through the Playground. This is an online editor where the framework is already loaded, with a preview that updates as you type.

You have two ways to access this tool:

  • By clicking on this direct link.

There are two main parts in the Playground:

  • The editor on the left-hand side.

You will see that there is already HTML code in the editor. It’s an example that loads when you log in, so you can start modifying and experimenting.

Above, you can see a numbering, which is the version of Tailwind CSS loaded. You will see the latest available for each major version if you click. Right now, version 3 is in alpha phase, and that’s the one I recommend you use. When you select it, everything still looks exactly the same.

The editor (left side) is where you work almost entirely with Tailwind CSS. It has syntax highlighting, auto-completion, color detection, indentation, etc.

Above the editor, there are 3 tabs:

  • The first is HTML.

If you want to see a demo of using the Playground, I recommend watching the Tailwind CSS video tutorial at the end of this article.

Using the Tailwind CSS CDN

If you liked the Playground and want something similar but using a code editor on your machine, I recommend using the Tailwind CSS CDN. It’s the fastest way to use the framework locally without installing anything.

The Tailwind CSS CDN

The script monitors the changes you make to the HTML by using the CDN, detecting the classes you use, and compiling the CSS in the browser in real-time.

All the features of the framework are available by default.

As you can see in the image, the script that loads the CDN accepts a plugins parameter, where you specify the official plugins you want to load, separated by commas.

From here, you can copy your HTML from the Playground and paste it into the body tags. Or, if you want to start from scratch, you can do it directly inside the body.

I see the CDN as an intermediate step between the Playground and the next point, which is compiling your CSS code.

Again, if you want a demo of the CDN, check out the video at the end of this article.

Using the Tailwind CSS compiler

If you will use Tailwind CSS seriously in your project, installing the libraries and compiling the final CSS code is the most correct way to do it. That will also open the door to many advanced features you may need later.

Before starting, remove the script tag that loads the CDN.

Open the terminal to perform the installations.

Installing Node.js

The first step is to install Node.js. If you already have it installed, you can move on to the next step. If not, read on.

Node.js for macOS and Linux

The installation is identical on macOS and Linux.

  • Access the nvm repository, click on Installing and Updating and install nvm with one of the suggested commands (curl or wget are equivalent in this case).

These are examples extracted from the documentation:

  • curl -o- | bash

Let’s continue with the process:

  • Now restart the terminal.

Node.js for Windows

  • Access the nvm-windows repository, and on the right side, where it says Releases, click on the one that appears, which should be the last.

Installing Tailwind CSS and its dependencies

Open the terminal and type:

npm install -D tailwindcss@next postcss@latest autoprefixer@latest
  • The -D option is to install the packages as dependencies of the development phase. They will not be present in the final version because they will not be necessary, as they are development tools.

When npm finishes installing, you will see that 3 new elements have been created:

  • The first one is the node_modules folder. This is where those npm packages are stored.

With this, you already have Tailwind CSS installed. But if you also want to install the official plugins, you can do it like this:

npm install -D @tailwindcss/typography@next @tailwindcss/forms@next @tailwindcss/aspect-ratio@latest @tailwindcss/line-clamp@latest

There are 4 plugins:

  • Typography, to give a predetermined style to the text.

Only the first two have a development version. That’s why we specify the @next suffix. That way, you can use them with Tailwind CSS 3.0. You can use the latest versions of the other two without any problem.

If at some point you want to update the packages you have installed so far, you can do it with this command:

npm update

With the packages already installed, you now have to initialize the project for use with Tailwind CSS:

npx tailwindcss init

It will tell you that the tailwind.config.js file has been generated. This is the Tailwind CSS configuration file.

The contents of this configuration file are very similar to the Config tab in Playground.

The basic configuration here tells the compiler which files to look for the Tailwind CSS classes you use to generate the final CSS file.

I will show you this process in the video below with more details.

How to install and use Tailwind CSS

This video shows you the 3 ways to use Tailwind CSS. I cover the Playground, the CDN version, and the packages installation.

You can also see how I convert HTML with standard CSS to the Tailwind CSS utility classes.



Web Developer. Technical Instructor.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store