Using TailwindCSS with Express and EJS

Joe Vellella — Tue, 04 Oct 2022 16:29:03 +0000

In this article we are going to learn how to quickly set up an Express application using express-generator using EJS as the template engineer and then adding TailwindCSS in order to quickly style/mock up your views!

First lets make the directory for our app and move into it
mkdir express-ejs-tailwindcss
cd express-ejs-tailwindcss/

Lets install and run express-generator
npx express-generator
express --view=ejs

Follow the directions of express-generator and run npm install

To make development easier, lets install nodemon so the server refreshes on each save.
npm install nodemon --save-dev

Open up your project and add the following script to your package.json file.
"devstart": "nodemon ./bin/www",

Run the npm devstart to see the default index.ejs view from express-generator.

Now that express and EJS are installed, lets move onto TailwindCSS! Run the following:
npm install tailwindcss postcss autoprefixer postcss-cli

Lets generator our tailwind.config.js and postcss.config.js files with:
npx tailwindcss init -p

Copy the following code to your tailwind.config.js file

/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./views/*.ejs'], theme: { extend: {}, }, plugins: [ { tailwindcss: {}, autoprefixer: {}, }, ], };

Create a tailwind.css file in the public/stylesheets folder and add the following to the file:
@tailwind base; @tailwind components; @tailwind utilities;

Add the following script to the package.json file.

"tailwind:css": "postcss public/stylesheets/tailwind.css -o public/stylesheets/style.css"

Add a tailwind class to your project! In the index.ejs file modify the following line as a test:
<p class="text-red-500">Welcome to <%= title %></p>

Run the tailwind:css script, then devstart, open your browser to see your tailwind styled page with Express and EJS!

DEV Community: Joe Vellella

Using TailwindCSS with Express and EJS