How to setup Tailwind CSS with Visual Studio Code
Tags: tailwindcss, css, html, vscode
Published: 2020-03-08 15:32:31

This article was also posted on [razcodes.dev](https://razcodes.dev "razcodes.dev").

From their own website [Tailwind CSS](https://tailwindcss.com/ "Tailwind CSS") is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

I worked on my website yesterday to create a new [Pelican](https://blog.getpelican.com/ "Pelican") theme for it and I decided to use Tailwind CSS. I thought it's a good opportunity to learn something new and it seemed pretty approachable.

Unlike building with other frameworks that I used in the past, this required some setup, and I wanted to write those steps down both for myself, so I can go and reference back to it if I need to, as well as for others that might find this useful.

Even though in Visual Studio Code, you will create and edit the files using the UI, I also included the commands that you can run in the terminal to get this accomplished.

You start by creating a new folder for your project. I found out from my own mistake that the folder name cannot be the same as other npm packages that you are going to install in that folder. So for example, you cannot call your folder tailwindcss. So I will call the folder tailwind-project. After you created the folder you can open it in VS Code.

```bash
mkdir tailwind-project
cd tailwind-project
```

You will need to have npm installed on your computer and if you don't already have it, you can find instructions on how to do that [here](https://www.npmjs.com/get-npm "Get npm").

With npm installed on your computer, you will need to install some packages. First is tailwindcss, then you need a way to process your css and for that you can install postcss-cli and finally you will need something that will generate vendor prefixes since tailwind does not include those and for that you can use autoprefixer.

```bash
npm install tailwindcss postcss-cli autoprefixer
```

Now you will need to configure tailwind and postcss. To do that, you start by creating the tailwind config file.

```bash
npx tailwind init
```

For configuring postcss, you create a config file for it, called **postcss.config.js**.

```bash
touch postcss.config.js
```

The file will have in it the following:

```js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}
```

The next step is to create a css file that will use these plugins. You can chose the name and location of your file and customize it based on your own need. I went with what I found in the documentation and I created a css folder in the project root and added a file in it called **tailwind.css**

```bash
mkdir css
cd css
touch tailwind.css
```

Because tailwind will look through your code for markers you create and it will replace them with generated code, we add the following to the **tailwind.css** file that was just created. The order does matter and you will find that out by starting to work with it more, so make sure you have them in this order.

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

Now it's time to create a script that will process the css using the plugins installed. To do that edit the **package.json** file in the project root folder and look for the scripts block on top of the code. We will be replacing the test script that is already in there with the following line.

```json
"scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  },
```

It's time to run the first build command, that will call that script and the initial css file gets created. Notice that the script will create a new folder called **public** and in it, it will create a new folder called **build**. That is where you will find this new file. This command should be run in the root of the project folder.

```bash
npm run build
```

Next, create a new html file in the public folder called **index.html**. The only thing you need to add to this file to get started is the link to the newly created css file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Project</title>
    <link rel="stylesheet" href="build/tailwind.css">
</head>
<body>
    <h1>Hello from Tailwind CSS</h1>
</body>
</html>
```

To see your project in the browse, in Visual Studio Code, make sure you have installed the Live Server plugin. You can find it [here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer "Live Server"). Right click on the html page and select Open with Live Server. The new page will pop up and you will be able to start working. The beauty of using Live Server is that every time you make a change and save your html file, your page will refresh in the browser.

Now go out there and build something amazing.