Tailwind CSS is a CSS framework to add styles to a web page without leaving the HTML. In the same document where you mock up the page, you apply the classes you need.
These classes provided by the framework are utility classes. Each one has a specific function. They are like Lego pieces where you use the ones you need.
Let’s see it with an example: Imagine you have an H1
header, and you want to apply 3 properties: a size of 48px, bold, and centered.
With standard CSS, you would write a class similar to this:
.title {
font-size: 48px;
line-height: 1;
font-weight: 700;
text-align: center;
}
And you would apply it to your header like this:
<h1 class="title">This is my header</h1>
However, with Tailwind CSS you don’t have that separation between HTML and CSS. You have at your disposal all the utility classes (as if they were pieces) for you to use directly in the HTML. So you would do it like this:
<h1 class="text-5xl font-fold text-center">This is my header</h1>
At first, it’s normal that this string of classes is a bit scary and gives a feeling of clutter. At first, the solution with standard CSS seems more organized, but when time goes by, after creating the page, if you have to go back and make any modifications, at a glance, you know what the classes do when you use Tailwind CSS. However, with standard CSS, you have to look up the definition of the title
class.
No matter how much you read, your mind won’t make that click until you try it. When you’ve been building a page with Tailwind CSS for a while and experience it, you’ll realize its advantages.
However, if you have components in your page that use precisely the same classes, you can create a CSS to avoid repeating code. The good thing is that even there, you use the Tailwind CSS classes.
For example, imagine that all the H2
headers of your page have the same styles (something highly recommended), and you don’t like to repeat them. You can define a CSS like this:
.btn {
@apply text-3xl font-bold text-center;
}
Then you will only have to use the btn class in each H2
you have. In fact, it would not be necessary to do it this way because there is a more comfortable way that does not require defining classes, but let’s stay with this example to not introduce too many concepts.
As you can see, at the beginning, I used @apply
. This is a Tailwind CSS directive so that it knows that what follows are not standard CSS styles but Tailwind CSS utility classes.
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.
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:
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 at the end of this article.
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 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.
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.
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.
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). Examples:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
command -v nvm
(it should return nvm
).nvm install node
npm -g update
node -v
npm -v
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.
nvm install latest
npm -g update
node -v
npm -v
Open the terminal and type:
npm install -D tailwindcss@next postcss@latest autoprefixer@latest
-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:
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:
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.
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.