How to use Tailwind CSS in HTML
Tags: html, tailwindcss, programming, webdev
Published: 2021-10-09 23:54:44

---
title: How to use Tailwind CSS in HTML
published: true
date: 2021-01-10 01:16:04 UTC
tags: [html, tailwindcss, programming, webdev]
canonical_url: https://www.devwares.com/blog//how-to-use-tailwind-css-in-HTML
cover_image: https://www.devwares.com/blog/images/tailwind-HTML.png
---

[Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework. It provides you with CSS classes that you can use to create designs for your web pages quickly and with ease.

This blog will walk you through the different ways you can add the Tailwind CSS framework in your HTML project, what the limitations could be, what developers that have worked extensively with the Tailwind CSS framework recommend and why, and finally how to properly process Tailwind CSS.

## Table of content

⦁ Adding tailwind CSS CDN 
⦁ Steps in installing tailwind CSS using package manager 
⦁ Adding tailwind CSS using the package manager 
⦁ Installing Node 
⦁ Installing the latest Tailwind CSS 
⦁ Adding tailwind CSS directives to a CSS file 
⦁ Setting up Tailwind configuration file 
⦁ Tailwind CSS Processing 
⦁ Conclusion

There are usually two ways of adding the Tailwind CSS framework in your HTML project.

⦁ Using the Tailwind CSS CDN 
⦁ Adding Tailwind CSS via the package manager and using PostCSS to process the configuration file.

## Tailwind CSS using the CDN

Adding the Tailwind CSS in your project via the CDN is easier and very beginner friendly. This method allows you to use the Tailwind CSS framework without the need to worry about PostCSS configurations. It is great way to jumpstart your project. However with these perks comes some limitations, some of these limitations are:

⦁ You cannot install third-party plugins 
⦁ You cannot customize Tailwind's default theme. 
⦁ You get access to all the files even the files you do not need. 
⦁ You cannot use any directives like `@apply`, `@variants`. 
⦁ You cannot enable additional variants like `group-focus`.

For the Tailwind's styles to work properly and a great experience with the CSS framework you need to use the HTML5 doctype and include the `meta` tags for responsiveness on all devices

```html
<!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">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

```

To use the Tailwind via the CDN in your project, add this at the `head` section of your HTML project.

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.CSS" rel=" stylesheet">

```

With this we get access to the Tailwind CSS classes that allows us to use it's predefined styles in our project.

## Tailwind CSS using the Package Manager.

Now, I would suggest if you are building a world application it would be best to install your tailwind CSS using the package manager. This is because most frameworks make use of PostCSS already like the autopicker.

In this part of the tailwind CSS tutorial, we are going to look at how to install Tailwind CSS using the package manager.

**Prerequisites**

To get the most out of this section of the tutorial, you need the following:

⦁ `Node` and it’s package manager, `npm`. You can install it from [here](https://nodejs.org/en/). Run the command `node -v` && `npm -v` to verify you have them installed. 
⦁ Alternatively, we can use another package manager, [Yarn](https://yarnpkg.com/).

**Steps in installing tailwind CSS using package manager**

⦁ Creating our package.json file 
⦁ Install Tailwind CSS
⦁ Adding tailwind CSS directives to a CSS file 
⦁ Setting up Tailwind configuration file 
⦁ Tailwind CSS Processing

## Creating our package.json file

A `package.json` file is a file that lives in the root directory of our project. It holds important information about your project like the project's name, the project's description, dependencies required by the project and how `npm` should run your project etc.

To create a `package.json` file in your project, go to your terminal, change the file directory to the folder you want your `package.json` file to be created in.

To change file directory run this command in yor terminal.

```javascript
cd <path to your folder>
```

Next we run this `npm` or `yarn` ( if you decided to use the yarn package manager ) command.

```javascript
npm init

# or

yarn init
```

With this you would be asked a couple questions, you can skip these questions by pressing the `enter` key.

## Installing latest Tailwind CSS

Next, we install the tailwind CSS along with the latest PostCSS and autoprefixer using the command below

```javascript
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

## Adding tailwind CSS directives to a CSS file

The next step in this tailwind CSS tutorial is to create a file called `main.css` in the root folder of your application and write the following code to give your application the tailwind CSS utilities.

```javascript
/* ./your-css-folder/main.css */

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

## Setting up Tailwind configuration file

The chances are that you would want to use your configuration when building your application. The configuration file makes it easy to customize the classes in Tailwind CSS by changing any fonts, colour, spacing, etc.

To override the default classes when using Tailwind, run the following command in your terminal to create a `tailwind.config.js` file.

```javascript
npx tailwind css init
```

In the new config file you can go ahead to configure them by writing the following code on them.

```javascript
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

## Tailwind CSS Processing

The final step is to include the Tailwind CSS in the HTML file using the package manager is to add plugins inside the configuration file and run them, which will process the configuration file and the style.css file.

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

Now, you can go ahead to run the following command on your terminal.

```javascript
next tailwind CSS build style.css –o output.css
```

This will generate a new CSS file called `output.css`. We then include this `output.css` file in our HTML file, the same way we include a normal CSS file by adding this line of code

```html
<link href = “./output.CSS” rel = “stylesheet”>
```

With that, you can now use Tailwind CSS in HTML files. you can go ahead to build your applications.

###Conclusion

In this Tailwind CSS tutorial, we covered how to install Tailwind CSS on your HTML file using different methods like through the CDN and Package manager. I know you will be able to easily jump start using this framework in a matter of minutes.

## Design and code tailwind css websites 3x faster

We created a tool to visually build tailwind css components, prototypes, websites, and webapps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)