Setup tailwindcss 2.0.1 for your projects

In this tutorial, I will explain the setup for tailwindcss 2.0.1. I found the official documentation is hard to follow and Adam’s YouTube video kind of outdated.

First, create a directory with your project name, here I created a project named tailwind-helloworld.

mkdir tailwind-helloworld 

Run the npm command - npm init -y to create a package.json with defaults.

Install tailwindcss and deps with the command npm install tailwindcss postcss autoprefixer postcss-cli

For your reference these are the installed versions,

+ autoprefixer@10.0.4
+ postcss@8.1.10
+ postcss-cli@8.3.0
+ tailwindcss@2.0.1

touch postcss.config.js

Include the following content in postcss.config.js file,

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}

npx tailwindcss init will initialize tailwindcss configuration.

Create a css file called prototype.css in the src/css folder structure with the following content,

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

And Include the build command in package.json, and execute npm run build.

"scripts": {
	"build": "postcss src/css/*.css -o dist/css/compiled.css"
}

I didn’t dig into postcss details but it looks like newer versions expect a list of input folders, hence *.css, and it spits output into a single file.

That’s it!!!! You are good to reference build css file in your html code.

You can find the example repository here