Get Started with Tailwind CSS #2
Tags: webdev, tailwindcss, beginners
Published: 2022-10-21 03:56:47

Now that we have seen how amazing Tailwind can be in the pervious [blog](https://dev.to/shubhicodes/the-easiest-way-to-get-started-with-tailwindcss-28d6), let's look at how we can use it in our project by installing it in our local machine. 

According to the documentation, there are two ways of installing TailwindCSS.

1. Installation via npm
2. Using it via CDN 

## Installation via NPM 

## Step 1 (or so) - Setting up environment

In this section, we shall be setting up our environment to be able to use Tailwind, sit back and follow along

First things first, Open up your preferred Code editor, I use Visual studio code. Make sure you are connected to the internet, as npm would need the internet to install Tailwind. 
Done? Good.

You need node.js installed on your computer because we would need npm to install Tailwind. You can check if node is installed on your machine by typing this in your terminal

If not installed, go to the official website and download [node.js](https://nodejs.org/en/download/)


## Step 2 - Creating folder structure

Create a new directory and cd into this folder. We would create a package.json file with default values. This would help keep track of all our dependencies we would install.

`mkdir tailwind-demo
cd tailwind-demo
npm init -y`

Your file structure should be similar to this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e8zeatiohjncan6mcmb.png)

## Step 3 - Tailwind CSS Installation

Open your terminal in your code editor with your folder opened.

Type: `npm init -y`


Open your terminal in your code editor with your folder opened.

`npm install tailwind css`


Inside our tailwind-demo folder, we would create two sub-folders src and public. We would create a file called styles.css inside our src folder. Your file structure should be similar to this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr4akbna2e01z5upsp30.png)

## Step 4 - Adding a Tailwind Configuration File

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

In our package.json file, we would replace the script

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykoe8j1gpc3l58lb4w6q.png)

## Step 5 - Processing and Building Tailwind


The build-css is a random name and you can decide to use another name instead. It is important to note that styles.css (public) is not being created manually but being built into using the code below.

'build-css': 'tailwindcss build src/styles.css -o public/styles.css'

Using the terminal, we would build our styles.css(src folder) into a styles.css(public folder).

`npm run build-css`

Now check your public/style.css to confirm. Cheers!!! We just installed TailwindCSS. Horray.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16x2wc0q7zt0fk37lkfb.png)

## Final step - index.html Creation and Viewing Our CSS!

Inside the <head> tag, we need to add a link to our stylesheet (the <link> in the following snippet):

```
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="build/index.css"> 
</head>`

Don't forget to link to public/stylesheet to your HTML file.

`<link rel="stylesheet" href="public/stylesheet">
```


This is the div where we'll see our TailwindCSS at work. Write out your first ever TailwindCSS class by adding a class with TailwindCSS classes inside it to your HTML:

```
<div class="bg-gray-400">Hello!</div>
```

Now, inside the <body> tag, insert this:

```
<div>Hello World!</div>
```

Now open that file in your favorite web browser, and you should see this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzxuzajsbp2b2tm8f9is.png)

## 2.Installation via CDN
Here, we would include the CDN link into the head of our HTML document.

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

```
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

</head>
<body>
  <!-- ... -->
</body>
</html>
```

This is quite straightforward and should be used only for small projects. This is due to the fact that most features that make tailwind CSS great are not available when installed through this method. 

Therefore to have access to all the awesome features of this framework, it is recommended to install it via npm.

Thanks for reading, and have fun with your new CSS framework!

## Resources
[Tailwind Docs](https://tailwindcss.com/docs/installation).
[Tailwind Labs](https://www.youtube.com/c/TailwindLabs/videos).

If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛