Why do we need to add PostCSS and autoprefixer as well? First of all, PostCSS allows us to “convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.” But why do we need it for Tailwind? The reason is that TailwindCSS is a PostCSS plug-in. Let’s start by adding Tailwind CSS and PostCSS to our project: npm install tailwindcss postcss autoprefixer postcss-cli This step of the tutorial is adding Tailwind to our project and configure it. The last line, app.use(express.static(path.join(_dirname, 'public'))), tells Node that we store the static assets in a directory named public. The last step is to specify the directory from where to serve static assets such as JavaScript, CSS, images, and so on. Going further, the second line ( app.set('view engine', 'pug') ) tells Node what engine to use. Now, Node knows where to look for our Pug templates.

With the first line, app.set('views', path.join(_dirname, 'views')), we tell Node what the source of our templates is. Now, let’s see what the code below does: app.set('views', path.join(_dirname, 'views')) app.set('view engine', 'pug') app.use(express.static(path.join(_dirname, 'public'))) Thus, import the path module as in the line above. The path module allows us to work with directories and file paths, which we need when we serve static assets such as images, for instance. The first step is to import the path module, which comes with Node by default. Before we can start coding, we have to set up views and static files.

Pug template styling