Pramit Marattha for Aviyel Inc

Posted on Oct 25, 2021 • Originally published at aviyel.com

Setting up TailwindCSS inside Vanilla HTML project

#beginners #tailwindcss #webdev #css

In this blog tutorial, we are going to set up TailwindCSS inside our vanilla HTML project absolutely from scratch. So, before we start. Let's take a brief tour about "What exactly is a Tailwind ?"

What is Tailwind CSS?

Tailwind is a PostCSS plugin. "PostCSS!!." This may appear intimidating or like a new piece of technology to learn at first, but if you're using autoprefixer, You're probably using PostCSS without even realizing it. Some of the tools as well as tech stacks you're currently using, such as Nextjs, Vue CLI, and Laravel, include and support PostCSS right out of the box.

A brief explanation of PostCSS.

PostCSS is a software development tool that automates routine CSS operations with JavaScript-based plugins. PostCSS is a CSS tool development framework. It can be used to create a template language like Sass or LESS.

The PostCSS core consists of:

CSS parser that generates an abstract syntax tree
Set of classes that comprise the tree
CSS generator that generates a CSS line for the object tree
Code map generator for the CSS changes made

Without further ado, let's begin installing TailwindCSS inside our plain and empty vanilla HTML project. Let's get started; let's start from absolute scratch.

Before we install tailwind in our project. Let's initialize npm first

First step,

Select a path to your project directory and open your vscode there.

Now, initialize package.json by simply typing

npm init -y

It should probably look like this

{
   "name": "tailwindscss",
   "version": "1.0.0",
   "description":" Setting up tailwind css with HTML",
   "scripts": {
      "test": "echo \"Error:no test specified\" && exit 1 "
   },
   "Keywords":[],
   "author": "",
   "license":"ISC"
}

Next, let's use npm install Tailwind CSS to actually install Tailwind
Also, we are going to need a tool to actually compile our CSS through our chain of PostCSS plugins. So, for that, we are going to need postcss-cli which is an insanely lightweight way to feed PostCSS inside our vanilla project.
Again, we need another tool for automatically adding vendor prefixes to our CSS because tailwind doesn't provide it right out of the box. So, for that, we are going to install autoprefixer which is also a PostCSS plugin.

Type the command to your command line inside your project folder.

npm install tailwindcss postcss-cli autoprefixer

Now, your package.json file should look like this:

{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "tailwindcss project",
  "main": "index.js",
  "scripts": {
     "test": "echo \"Error:no test specified\" && exit 1 "
  },
  "keywords": [],
  "author": "pramit",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.2.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.1.2"
  }
}

VOILA!! You have finally installed all of the necessary dependencies required for this project. Next, we are going to initialize our tailwind inside our project

npx tailwind init

The above command will create an empty tailwind.config.js file inside the project directory.

Your folder structure should resemble something like this:

Tailwind.config.js is the file to use when you need to customize your project.

After that, let's make a postcss configuration file. So, in your project directory, right-click and create an empty file and rename it to postcss.config.js
We must specify "What postcss plugin we will be using in this project" .Within this folder. Open the postcss.config.js file now.

To begin, we must export an object with a key (plugins) that contains an array which will be used to process our CSS. So, we're going to import two things:

tailwind itself and autoprefixer, which will automatically add vendor prefixes to our project.

module.exports = {
  plugins: [
      require("tailwindcss"), 
      require("autoprefixer")
    ],
};

Next, let's make a CSS file that will allow us to use these plugins.

Create a folder name CSS and inside that folder create a filename of your choice

The folder structure should resemble something like this:

Open your CSS file and add the @tailwind directive and a base parameter at the top.

TailwindCSS works by scanning your CSS file for these custom markers and completely replacing them with Tailwind's generated code.

@tailwind base;

we need to do this because when we compile our CSS with postcss , Tailwind will actually going to scan this @tailwind base marker and replaces it with its own custom generated base styles.

Now, also add @tailwind components and @tailwind utilities.

@tailwind components;
@tailwind utilities;

Similarly to previous marker these two markers are going to be replaced by all of the tailwind components and utility classes.

Finally, your Tailwind.css file should look something like this:

// Tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

We have completed the creation of our CSS file. It is now time to write a simple script to process this CSS through our PostCSS plugin lists.

The first step, open your package.json file
The second step, replace test scripts with build scripts and add the following command

{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "tailwindcss project",
  "main": "index.js",
  "scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  },
  "keywords": [],
  "author": "pramit",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.2.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.1.2"
  }
}

A brief illustration of the script.

Now, type the following command in the terminal to actually start the build script.

npm run build

This script should generate a new processed CSS file inside that specified directory.

You have successfully configured Tailwind. 🎉

Finally, it's time to apply this CSS to our project.

Go to that public directory and make a new index.html file there.
Inside that index.html file, include a link to the newly produced CSS file.
Copy and paste the code below inside your HTML file.

<!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" />
      <link rel="stylesheet" href="./build/tailwind.css" />
      <title>Tailwind CSS Project</title>
   </head>
   <body>
      <h1 class="text-4xl font-bold text-center">
         This is actually working.
      </h1>
      <p class="text-green-500 text-center text-3xl">
         Tailwind is a utility-first CSS framework packed with classes 
         like flex, pt-4, text-center and rotate-90 that can be composed 
         to build any design, directly in your markup.
      </p>
   </body>
</html>