Learn to Use Tailwind CSS Quickly in 30 Minutes

By / May 26, 2022

In a previous post we discussed about how awesome Tailwind CSS is and the benefits of using it.

In this post we are going to discuss about how can you use Tailwind CSS in your projects. Tailwind CSS generates a static CSS file after scanning your project files and according to the given configuration. It keeps on generating the new static file on changing the code or we can say that we need to generate the static file again after making a change. But this can be happened automatically with the Tailwind CLI. Let’s move ahead and install Tailwind CSS in your project.

Install NodeJS

Tailwind CSS is dependent on NodeJS. You can download and install nodejs from their official website nodejs.org. It is open source and free to download. Download and install the most recommended package from the website.

Install Tailwind CLI

After the NodeJS installed, the next important thing to do is install the Tailwind CLI in the project directory. In order to that open the command prompt or terminal of the system in the project directory or navigate to the directory in the terminal. After that use the following command to install the CLI.

> npm install -D tailwindcss

It will take few minutes to download and install the npm package. It will add Tailwind CSS as development dependency to the package.json file. This will help work as a team if you wish to use git or some other versioning system.

Initialize Tailwind in Project

Now it’s time to initialize the tailwind in project via command line which creates the tailwind.config.js file. This file is used by the tailwind engine as configuration to generate the CSS file accordingly. Use the following command in order to do it.

> npx tailwindcss init

The newly created tailwind.config.js file will initially look like this;

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configure Tailwind

The next step is to configure the tailwind CSS in the project using the newly created file. The essentials must be added to get started with using it. One of the most important things is to add paths of your source files which keep on changing during development and that are basis of the CSS used. With this upon making any changes in the project the Tailwind CSS will automatically detect the changes and generate the CSS with only parts that are utilized by the project.

In order to add the paths we need change the content with the data format as given below;

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

This format explains to Tailwind that the files location in ‘src’ directory of the project directory and it’s subdirectories has the files needed to be tracked. And the format for those files is explained as html and js.

Create Main CSS File

Now we are going to create a CSS file which will have the Tailwind directives to make it understand what to include in the output CSS file. Apart from that all the pre-added CSS other than the Tailwind will be copied exactly same to the output file. This is also used to define the custom classes to add with Tailwind properties. The basic CSS file for this will look like the following.

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

Start Building Output

Now the final steps are arrived. Here you need to run the following command on the terminal in the project.

> npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Here input.css is the main file created earlier with the directives and output.css is the destination file or the file to be generated. This command will start building the output.css file. The ‘–watch’ statement tells it to keep running and looking for any changes that happen during the development. When a change in the code will be made, this command will automatically generate a new output.css according with rebuilding.

Now start using this output.css file in you html project to utilize the Tailwind magic. You can add it as follows:

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

You can see the classes used in this file. These are the Tailwind CSS classes and utilities. Go ahead and create this file using notepad or some other text editors like atom, vs code, notepad++ etc. and test the magic of Tailwind.

See it working now and use utilities of Tailwind as per given on the website and test different things with it. Soon I am going to post further tutorials on Tailwind.