Installing and using Tailwind CSS 3.4

Aug 2, 2024

Tailwind CSS 3.4 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.
Using the Play CDN, so you include the JavaScript in your project from a remote server, and you can start working.
Using the Tailwind CLI, installing the framework on your machine, and compiling the result in an optimized CSS file.
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.
Manually. From the official Tailwind CSS website, click on Docs. Then on the left side, there are some sections with an icon in each one. Click the one that says Playground.

There are two main parts in the Playground:

The editor on the left-hand side.
A preview on the right.

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 the version of Tailwind CSS loaded. You will see the latest available for each major version if you click.

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.
The second is CSS, and contains the custom CSS. Although it is not necessary, there are times when you will need to use it. For now, it only contains 3 directives which are the ones that are loaded by default if you leave this file empty. So it does not matter if they are there or not. They will be loaded anyway.
The last tab is Config, and contains the configuration. To test and do simple things, you will not need to touch it, but if you want to customize the framework and use plugins, this is the place to do it.

Using the Play CDN

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

<!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?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
</body>
</html>

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 snippet above, the script that loads the CDN accepts a plugins parameter, where you specify the first-party 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.

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

Using the Tailwind CLI

If you want to use Tailwind CSS more seriously, 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.

If you do not want to use Node.js, you can try the standalone executable.

Before starting, make sure you have Node.js installed. You can check the instructions here.

Next, remove the script tag that loads the Play CDN (if you tried it).

Now, open the terminal and type:

npm install -D tailwindcss

The -D option is to install the packages as development dependencies. This means that they will not be present in the final version because they will not be necessary.

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.
The second is package-lock.json It is like an index of everything in the node_modules folder, with version numbers, so that npm knows when something needs to be updated.
And the third one is package.json, which contains a list of the libraries you have installed with the terminal, without their dependencies. In our case, there is only tailwindcss.

With this, you already have Tailwind CSS installed. But if you also want to install the first-party plugins (the ones developed by the Tailwind CSS team), you can do it like this:

npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/container-queries

There are 3 first-party plugins:

Typography, to give a good default style to your texts.
Forms, to provide a default style to forms.
Container queries, to apply styles based on the size of the container.

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:

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 the Playground:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

In the content array you have to add the paths the CLI has to scan to detect the framework classes, and therefore generate the final CSS. Let’s apply this regular expression:

content: ["src/**/*.{html,js}"],

This means that the CLI will have to scan the HTML and JavaScript files in all the subdirectories inside src.

Now let’s create that directory, and inside create the tailwind.css file with these contents:

@tailwind base;
@tailwind components;
@tailwind utilities;

These are directives that define the three layers of styles, from basic ones in base to smaller and more specific styles in utilities. It’s mandatory to define these three directives.

Now the framework is configured and initialized. It’s time to create your HTML file. Let’s create one:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>

Here we have an H1 tag with some Tailwind CSS classes:

text-3xl sets a font size of 30px and a line height of 36px.
font-bold sets the font weight to bold.
underline sets the underline decoration.

Notice that link tag to include the generated CSS styles.

Now, if you open the file, it does not have any styles applied. That’s because Tailwind CLI is not running. In the terminal, and from the project’s root, run this command:

npx tailwindcss -i src/tailwind.css -o src/styles.css --watch

This makes the following:

Loads the Tailwind CLI, and instructs it to read the tailwind.css file, and thus loading all the framework’s classes,
Scans the files specified in the configuration file.
Writes the standard CSS styles to the styles.css file.
Keeps running, monitoring file changes, and when it detects any change it updates the styles.css file.

Reload the page and you will see the styled header.

If you want to learn to use Tailwind CSS, here’s a link to my course on Udemy: Tailwind CSS Fundamentals

Conclusion

Tailwind CSS is very flexible to install and use. You can use the Playground in your browser for testing, create a quick prototype using the Play CDN, or use the CLI to install it locally in your project.

Now that you have installed it, do you want to learn how to use it? I designed this page with this framework, so if you like what you see I recommend you to check out my course on Udemy. I cover the fundamentals of the framework: responsive design, dark mode, plugins, CSS states, and more. All while creating a website from scratch.

Tailwind CSS Fundamentals Learn to build modern websites with TailwindCSS step by step and with examples.

Using the Tailwind CSS Playground

Using the Play CDN

Using the Tailwind CLI

Test your knowledge

Conclusion