How to install TailwindCSS in ExpressJS app

In this article I will show you how to install TailwindCSS for use in a basic ExpressJS app. This nodejs project had no other dependencies as I just wanted to install tailwindcss.

After initializing the expressjs project, I added a folder that would host my stylesheet :

mkdir -p ./public/stylesheets

After that, I created two stylesheet files. One will hold the source code for my styles, and the other one is the output that will be generated by tailwindcss.

touch ./public/stylesheets/source.css
touch ./public/stylesheets/style.css

Now, install the tailwindcss :

# Using npm

npm install tailwindcss

# Using Yarn

yarn add tailwindcss

Open your recently created source.css located in ./public/stylesheets/source.css and add the tailwindcss injections :

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

Then you want to generate your style.css file so you can actually use in your project. Simply use npx and generate the file.

npx tailwindcss build ./public/stylesheets/source.css -o ./public/stylesheets/style.css

Voila! You have installed tailwindcss. Now simply go into the file that hosts your layout for the project and add the stylesheet in your header

<link rel="stylesheet" href="/stylesheets/style.css" />

I also added this command to my package.json and made it look like so :

"scripts": {
"start": "npm build:css && node ./bin/www",
"build:css": "npx tailwindcss build ./public/stylesheets/source.css -o ./public/stylesheets/style.css"
}

Optionally, if you would like to add extra configurations to your tailwindcss setup, you can initialize a settings file via npx:

npx tailwindcss init

This will create tailwind.config.js.

// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [],
};

There you go, tailwindcss in your basic expressjs project in 5 minutes.

· javascript, nodejs, tailwindcss, expressjs, easy
« Ruby on rails vs change What to do before building authentication with ExpressJS app »

Buy my book