How to setup Tailwind CSS with Visual Studio Code

Posted on Sun 08 March 2020

tailwind css html

From their own website 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 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.

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.

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.

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.

npx tailwind init

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

touch postcss.config.js

The file will have in it the following:

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

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.

@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.

"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.

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.

<!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. 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.