How to add Tailwind CSS to your HTML project

In this short article, you will learn how to create a simple HTML project using TailwindCSS.

What makes Tailwind great?

Tailwinds makes life so much easier for people struggling with vanilla css. Tailwind provides low-level utility classes, that enables you to make unique designs without leaving your html file. For more information read the official documentation.

How to add tailwind to your project?

1. Install Node

Before installing tailwind, you need to have node installed on your computer. Node comes with a package manager (NPM) which is used to manage dependencies.

To check if node is available on your computer, open a terminal and type these command:

node -v

In the case where node is missing from your computer, go to the official website of node and Download it

2. Create a project

To create a project we simply need to create a folder. Open a terminal on your computer and type the following commands:

We will be creating our project on the desktop, the cd command is used to move between directories

cd Desktop

The mkdir command is used to create a new directory, and in this case we are creating a new folder named tailwindProject

mkdir tailwindProject

Inside the folder we just created, we need to add a few more folders (src and styles folder)

cd tailwindProject

This command creates two folder inside the tailwindProject directory

mkdir src styles

3. Installing Tailwind CSS using NPM

In the terminal type this command:

npm install -D tailwindcss

Tailwind comes with a configuration file used to customize tailwind theme; such as adding custom colors, fonts, and many other stuff. To create to tailwind config file, you simple need to run this command:

npx tailwindcss init

And then open your project with your favorite code editor. If you are using vscode, you can simply type this command in the terminal and it will automatically open your project

code .

4. Configure your template paths

The configuration file is used to tell tailwind where to find template files which are using tailwind classes; this is important because tailwind uses that path to scan your html file for classes which will then be added to your style sheet.

Inside your tailwind.config.js file, which was created in the step 3, add the path to your html files in the content.

In my case all my html file will be stored in the src folder which was created in the previous steps.

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

5. Add the Tailwind directives to your CSS

Inside the styles folder, create a CSS file named tailwind.css or any name of your choice. And add the following:

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

Apart from the directives of tailwind, you can also use that file to add any custom CSS.

6. Start the Tailwind CLI build process

You are almost done, the next step involves building the css file containing utility classes.

6.1 Open package.json file

And add the following script:

"scripts":{
    "dev":"npx tailwindcss -i ./styles/tailwind.css -o ./styles/output.css --watch"
},

The above script uses the file containing the tailwind directives as an input, and create a css containing all the utility classes being used in the project.

6.2 Run the script

Inside the terminal, type this command

npm run dev

In addition, that command will be used every time you start working on your project.

7. Start using Tailwind in your HTML

Open the project in your favorite code editor and start writing some html code. Most importantly, don't forget to link the stylesheet to the output.css file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link  href="/styles/output.css" rel="stylesheet"/>
    <title>Tailwind Starter</title>
</head>
<body class="bg-gray-800">
    <div class="text-center mt-12">
        <h1 class="text-4xl text-yellow-500 font-bold">Heap Heap Arrayy!</h1>
        <p class="text-xl text-white mt-4"> I have created my first html project using tailwind. </p>
    </div>
</body>
</html>

8. Test it with live server

Open your code in the browser, and check if everything works. If the css styles are not showing, then you probably missed a step. You can double check your file structure with the file i used in creation this tutorial TailwindProject

Conclusion

Thank you for reading. If you have any questions, feels free to reach me through twitter @khazifire. And don't forget to follow for more similar content.

khazifire