Actually on the Tailwind CSS website there is already documentation on several ways to install tailwind css. However I find the documentation too long and a bit confusing. So I decided to make my own tutorial. I hope my notes can be useful for you too.

1. Create the css file

First create a css file, whatever the name is. In this case I named it global.css. The location of this file is also up to you. In this case I usually put it in the /assets/css/ folder.

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@apply directives can also be put in this file.

2. Convert the css file into tailwind.css

In the root of our project folder, run this command to convert the global.css file into a tailwind.css file. Later the tailwind.css file is called in our html file, not the global.css.

npx tailwindcss -i ./html/assets/css/global.css -o ./html/assets/css/tailwind.css

Whenever global.css changes, this command must be run again.

Actually there is a watch command by adding -w at the end of this command. But I don't know why, my laptop freeze when I use the -w command. Even though it is a Core i5 laptop and with 16 GB memory. My friend's laptop also experienced the same thing. That's why I never use the -w command again.

Actually this watch command is useful to build tailwind.css file automatically whenever global.css file changes. But because there was a problem, so I never used it.

3. Using the tailwind.config.js

The tailwind.config.js file can also be used in a regular html project like this one. Just make the file by typing the command below in the root of our project folder.

npx tailwindcss init

This file will be automatically detected when running the convert command earlier (previous npx command). Usually I run the convert command in the project root.

4. Call the tailwind.css file in our html file

You can call the tailwind.css file in the html file, like this:

<link rel="stylesheet" href="./assets/css/tailwind.css" />

Done

Note: npx is included with npm version 5.2 and above.