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