Hello Developers,

In this lesson, I will try to show you the basic setup of TailswindCSS for a project. There are different approaches to this installation. I think most of you know this technique. If you do not know the way to set up the TailwindCSS, this tutorial is for you. 

First of all, you need to install the Node.js in your workstation from the link below:

Node.js Download Link: Node.Js Download

Now, you need to create a folder where you start the work. Open a terminal in that folder and run the below command.

node -v

You will get the version if you install Node.js correctly on your machine. Now come to the main part. We will download tailwind CSS using the npm command. In your terminal write the below command:

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

By that command, one folder named node_module and two files named package-lock.json and package.json have been added. The node_module folder is the package manager for Node.js. In the package.json file, you will find the dependencies and the associated versions that we pulled in.

The next step is to create the configuration file, which can be done with CLI as well. Let's write down the below command in the terminal and hit enter. 

npx tailwindcss init

A new file is created named tailwind.config.js file has been created for us. Change the file as given below:

/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [ './pages/**/*.{html,js}',
    './components/**/*.{html,js}',],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now the next step is to create the CSS file. We need to pull in tailwind directives. So inside the root of our project we will create a style.css file and add the below lines:

/style.css

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

The next step is to reprocess the files inside a file. These can be done in multiple ways. But the way I prefer is to add a script inside of the package.json file.

/package.json

{
  "dependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  },
  "scripts": {
    "build-css": "tailwindcss build style.css -o css/style.css"
  }
}

Then we need to run the scripts that we just created. For this run the below command in the terminal:

npm run build-css

A new folder CSS with the file name style.css has been created. You can see the Tailwind CSS has been added to the project.

I hope this might help you in your journey of development.

Read More: Get started with Tailwind CSS (Using CDN)