#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