How to set up Tailwind CSS 2.0?

A Step By Step Guide For Setting Up TailwindCSS Into Your Web Development Project

Published in

TheLeanProgrammer

5 min readMay 3, 2021

You must have come across this article while searching about the method by which you can set tailwind CSS 2.0 in your node project. This is the right place for you, so let’s get started with a small disclaimer before actually demonstrating the actual steps.

Disclaimer : This story is not contradicting the steps of installation described in the official documentation of Tailwind CSS . This is a Step by Step guide for the approach of setup the tailwind CSS in your web development project.
Prerequisite: node & npm should be installed globally on your system → (Here is the link) which is the only prerequisite for the setup.

Let’s start with the STEP by STEP guide for the project setup.

Step 1 :
Open an empty folder named as tailwindcss in your favorite editor (mine is VS code) and create a node package.json file by running the below command in the terminal of the editor.

npm init -y

This command creates and sets up a file named package.json which contains the project information, all the dependencies required to run the project will also be stored here, and the script needed by npm to run the project.

Step 2:
The next step is to install all the required dependencies for the project. Here is the npm install command for the same.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

This command installs 3 packages as development dependency ( -D the option is used to install development dependency for the project).
tailwindcss → npm link
postcss → npm link
autoprefixer → npm link
Open package.json the file you will find all these packages inside devDependencies object.

Step 3:
In the root directory of the project, you need to create a file named postcss.config.js file and add the below code into the same and save the file.

const cssnano = require('cssnano');module.exports = {
  plugins: [
   require('tailwindcss'),
   cssnano({
     preset: 'default',
   }),
   require('autoprefixer'),
  ]
}

Step 4:
Run the following command to create the tailwind config file.

npx tailwindcss init

This command creates a file in the root directory named as tailwind.config.js and some config into the same file and replaces the below config into the same file.

module.exports = {
 purge: {
  node: 'layers',
  content: ['./public/**/*.html'],
 },
 darkMode: false, // or 'media' or 'class'
 theme: {
  extend: {
  color: {}
 },
},
variants: {
 extend: {},
},
plugins: [],
}

Step 5:
Now we are done with the config part need to create some folders in the root folder and a file named tailwind.css file inside src/css/ folder.

mkdir src
mkdir src/css
touch src/css/tailwind.css

Inside that tailwind.css file needs to inject 3 base package of tailwind add the following lines of code into the file.

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

Step 6:
Now we need to make some changes in the script of package.json file, so replace the config below in your scripts tag :

"scripts": {
 "tw:build": "tailwindcss build ./src/css/tailwind.css -o ./public/css/tailwind.css"
}

Your package JSON file should look like the following one :

Step 7:
As the script to build the tailwindcss library is done we need to run the same in the editor terminal.

npm run tw:build

This command will generate CSS file into ./public/css/tailwind.css with all the available CSS for your project use. Here is the project directory below would look something like this :

The directory structure of the project after tailwind.css file generated

Step 8:
Now we are done with generating tailwind.css file with the help of build of tw: build script from package.json file. Now Inside the public/ folder create a root HTML file as index.html and add your HTML basic structure into the same something like this :

Here is how I added and used tailwindcss in my project

<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, maximum-scale=1.0"><title>TailwindCSS 2.0</title><link rel="stylesheet" href="css/tailwind.css" /></head><body><div class="flex-column justify-center items-center h-screen"><div class="p-20 text-center"><h1 class="text-9xl">tailwindcss 2.0</h1><div class="bg-green-200 hover:bg-green-500 p-10 text-4xl">Is now live on server !!</div><div class="p-5 text-2xl"><a href="#" class="text-blue-500 hover:text-purple-700">How to set up this tailwind CSS 2.0 ?</a></div></div></div></body></html>

Below you can see the result for the same-

Here is the style of the HTML page with the help of tailwindcss library

Hurrah !!😁 We are done with the installation with the tailwindcss 2.0 library …

Feel free to let me know your comments and any improvement you might feel to be added in the same or any error you are facing while doing the above setup.

Keep learning and sharing the same 😃

Will be back with a new story soon !! 🧑‍💻

Subham Singh
Feel free to connect with me on
Email ID: singhsubham510@gmail.com
twitter : @____subham____
LinkedIn: @subham-singh
Instagram: @_____subham_____

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer

How to set up Tailwind CSS 2.0?

A Step By Step Guide For Setting Up TailwindCSS Into Your Web Development Project

Let’s start with the STEP by STEP guide for the project setup.

Written by Subham Singh