Skip to content

Installing and using Tailwind CSS 3.0


David Morales

Installing Tailwind CSS

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:

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:

There are two main parts in the Playground:

The Tailwind CSS Playground

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:

If you want to see a demo of using the Playground, I recommend watching the Tailwind CSS video tutorial that accompanies 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.

Node.js for Windows

Installing Tailwind CSS and its dependencies

Open the terminal and type:

npm install -D tailwindcss@next postcss@latest autoprefixer@latestCode language: CSS (css)

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

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@latestCode language: CSS (css)

There are 4 plugins:

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.

Video: 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.

Written by

David Morales

Computer Engineer

Teaching my software engineering knowledge in a creative way.

Would you like to get the 10 Ninja Keys of the Developer?

An exclusive PDF for Newsletter subscribers.

You will also be notified of future articles and affordable courses (in the pipeline) that will turn you into a ninja developer.

View privacy information

Leave a reply

Please fill in all fields.

Your email address will not be published.

View privacy information