🎨 Moving from vanillaCSS to TailwindCSS in an Express app using Pug templates 🎨

Introduction

“Joyeux”: A simple Express app using Pug templates. 🦦

Part 1 — Install TailwindCSS

1.a — Install Tailwind via npm (without PostCSS and autoprefixer):

npm install -D tailwindcss@latest

1.b — Manually build your CSS file:

npx tailwindcss-cli@latest build -o public/styles/tailwind.css

1.c — Replace stylish.css by tailwind.css in the index.pug file:

link(rel=”stylesheet” type=”text/css” href=”styles/stylish.css”)
link(rel=”stylesheet” type=”text/css” href=”styles/tailwind.css”)

1.d — Run the app locally

npm run dev

Part 2 — Adding styles to HTML attributes via Classes

Tailwind’s splendid website: https://tailwindcss.com
/* stylish.css */body {  font-family: monospace;  font-size: 15px;  color: rgb(205, 217, 229);  background-color: rgb(34, 39, 46);  width: 75%;  max-width: 640px;  margin: 10px auto;  display: flex;  flex-direction: column;  justify-content: center;}
//- index.pugbody(class=”font-mono text-base text-gray-50 bg-gray-800 w-3/4 max-w-screen-sm my-10 mx-auto flex flex-col justify-center”)
Search results for max-width property — https://tailwindcss.com/docs/max-width
UI after styling the body element only

Part 3 (Optional) — Customising Tailwind:

3.a — Add webfonts

link(href=”https://fonts.gstatic.com" rel=”preconnect”)link(href=”https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel=”stylesheet”)
module.exports = {  theme: {    fontFamily: {      thatCoolColophonFont: [‘“Space Mono”’, “monospace”],    },  },};=> ❤️ Ensure fonts with spaces are wrapped by   .
npx tailwindcss-cli@latest build -o public/styles/tailwind.css
.font-thatCoolColophonFont {  font-family: “Space Mono”, monospace;}
New utility class generated in our CSS file from tailwind.config.js
Taadaa 🐇 🎩 !! The UI is now using “Space Mono” which will default to monospace if the browser can’t load it.

3.b — Add custom colors

By default, Tailwind color classes point to a default color palette:

Full list here: https://tailwindcss.com/docs/customizing-colors
module.exports = { theme: {  fontFamily:{…},  colors: {    gray: {      50: “#cdd9e5”,      600: “#495057”,      800: “#22272e”,    },    blue: {      400: “#539bf5”,    },    pink: {      600: “#DB277”,    },    transparent: “transparent”,    white: “#fff”,  },},};
npx tailwindcss-cli@latest build -o public/styles/tailwind.css
blue-400 now points to our own custom color #539bf5 -> rgb(83, 155, 245) 💙🫐

3.c — Add custom utility class (optional)

<div class=”h-screen”></div>
div {  height: 100vh;}
// custom.css@tailwind base;@tailwind components;@tailwind utilities;@layer utilities { .h-screen-40 {   height: 40vh; }}
npx tailwindcss-cli@latest build build/custom.css -o public/styles/tailwind.css
Our custom utility class `h-screen-40` is applied

Part 4 (recommended) — Purge the generated CSS file

4.a — Add the purge key to our tailwind.config.js file, and make sure to target all the files in which we are using tailwind classes (here only index.pug):

// tailwind.config.jsmodule.exports = {  purge: [    ‘./views/*.pug’,  ],  theme: { … },}

4.b Manually build the tailwind.css file by running:

NODE_ENV=production npx tailwindcss-cli@latest build -o public/styles/tailwind.css
The generated CSS file contains only the necessary styles and is way smaller.
NODE_ENV=production npx tailwindcss-cli@latest build build/custom.css -o public/styles/tailwind.css
Generating the small CSS file containing our utility classes defined in build/custom.css

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store