DEV Community

Joe Vellella
Joe Vellella

Posted on

20

Using TailwindCSS with Express and EJS

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (3)

Collapse
 
mizzcode profile image
Misbahudin •

but the pages is not showing the css of tailwind :(

Collapse
 
jandrews66 profile image
Joe Andrews •

To get this working I had to edit the postcss.config.js file to the following -

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
pawanpoudelgithub profile image
Pawan Poudel •

Should I have to include tailwind related files while hosting the app ?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more