#Step 1

Create a new folder. Navigate to the folder using a command line

npm init -y

#Step 2

Install the tailwindcss, postcss-cli and autoprefixer using npm.

At the time of writing this article there was an issue with the latest version of autoprefixer so I have used v9.0.0

npm install tailwindcss postcss-cli au

#Step 3

Initialise the tailwind package using the following npm command

npm tailwind init

This will create a tailwind.config.js in the root directory. This is the file that you can use to customise tailwindcss.

#Step 4

Create a Postcss config file postcss.config.js in your root directory and specify the postcss plugins that you need to use.

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

#Step 5

Create a base tailwind css class in a css directory ex. css/tailwind.css. The directory path can be anything of your choice.

Add the base tailwind css classes in this tailwind.css file

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

#Step 6

Add a build script to the package.json file

Replace the following lines in your package.json file

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

With

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

The build/tailwind.css file will contain all the built css classes which you can include in your html using the link tag

Here is the complete package.json file

{
  "name": "shopping-cart",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "postcss public/assets/css/tailwind.css -o public/build/tailwind.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^9.0.0",
    "live-server": "^1.2.1",
    "postcss-cli": "^8.1.0",
    "tailwindcss": "^1.8.13"
  }
}

VS Code Tailwindcss intellisense

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss