TailwindCSS: Quick Setup
Tags: tailwindcss, html, css, web
Published: 2021-12-16 21:51:43

##Introduction
TailwindCSS is a utility-first CSS framework that allows you to style your HTML without needing to leave your HTML file. Most of the styling is done though pre-defined CSS classes. This results in a very easy system to use when adding style to your website.

This quick setup guide will get you to a point where you can start writing HTML and adding in CSS as you go.

If you're in a bit hurry and willing to sacrifice some features you can use the [TailwindCSS CDN](https://tailwindcss.com/docs/installation/play-cdn).

##Installing Node.js
This guide is written with Linux in mind but you can also install Nodejs on Windows and Mac.

For RHEL based distros (Fedora, CentOS, Rocky Linux, etc..):
```
$ sudo dnf install nodejs
```
For Ubuntu based distros you can install Node from [NodeSource](https://github.com/nodesource/distributions/blob/master/README.md):
```
$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
$ sudo apt-get install -y nodejs
```

##Setup the Project environment
Now that we have Node installed, lets create our project environment.

First, cd into your workspace. I like to use `~/Code` as my main local workspace.
```
$ cd ~/Code
```
Create a folder of us to work in and cd into that.
```
$ mkdir tailwind
$ cd tailwind
```
Initialize the directory for NPM. This will create a `package.json` file within the folder.
```
$ npm init -y
```
Now install TailwindCSS.
```
$ npm install tailwindcss
```
To finish off this environment, lets create a `src` and `public` folder. You can name these folders whatever you want.
```
$ mkdir src public
```

##Generating the TailwindCSS CSS file
Next lets create a style.css file.
```
$ touch src/style.css
```
Then, using your preferred text editor, add the @tailwind directives so your style.css file looks like this:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Now, open the `package.json` file and add a new command to the scripts. The file should look like this.
```
{
  "name": "tailwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tailwind build -i src/style.css -o public/tailwind.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^3.0.1"
  }
}
```
Finally, create a `tailwind.config.js` file in your project root folder containing the following.
```
module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Remember the "dev" script that we added into the `package.json` file? Now we're going to run it in a separate terminal. 
```
$ npm run dev
```
This command will continue to run while you write your HTML. It will "watch" and "rebuild" your tailwind.css file as new utility classes are added into your HTML file. If you'd like to learn more about the Just-in-Time engine, check out this [blog post](https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css).

You should now have a new tailwind.css file in the public folder. link this file into your HTML file and start coding away. Remember to keep the `npm run dev` command running in a separate terminal.

##Using the style.css file
Now you can use the style.css file by adding a link tag into the `<head>` of your html source file.
```
<link href="./style.css" rel="stylesheet">
```

Enjoy the new setup and happy coding!