DEV Community

Joe Vellella
Joe Vellella

Posted on

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!

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 ?