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

Introduction

I recently had an impulse through work to start working with a CSS framework: TailwindCSS.
I have been writing vanilla CSS for a while and to be honest I quite like it. It is a very pleasant activity which in my opinion uses both the programming and graphic design areas of one’s brain. So I would often take a few days to fully focus on the styling of an app, this would give me the time to dig into the implementation details of a design, experiment with fonts / colors / responsive layouts. Sometimes getting stuck and spending 3 hours or more just switching between different colors or padding values. (We have all been there..)

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

Part 1 — Install TailwindCSS

Our goal for part one is to install Tailwind in our app and go through the steps to make it usable directly in our Pug templates.

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

Our goal is to match our previous 🍦 vanillaCSS styling using Tailwind’s default utility classes only.

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:

Now we have moved from styles implemented through vanilla CSS (using our own utility classes) to styles implemented using Tailwind’s default utility classes.

3.a — Add webfonts

At the moment we are using Tailwind’s class font-mono instead of our CSS property: body{font-family:monospace} . I personally can’t tell the difference between 🧐 the two but let’s pretend we want to use another font: Space Mono by colophon-foundry.org ✒️👌.

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

We had 6 different colors in our stylish.css file which we moved away from to use exclusively colors from Tailwind’s default color palette. The default palette is very rich, great for rapid prototyping but what if you would like to use a custome color palette / scheme you took ages to come up with ? 🤔

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

gray-50 points to #F9FAFB

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)

If you followed carefully 🦉 you might have noticed that we had the property {height: 40vh;} for our form element defined in stylish.css but I have used h-96 Tailwind’s class on that element as Tailwind doesn’t offer the equivalent in its pre-defined utility classes.

<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

Removing unused CSS styles from our tailwind.css file — https://tailwindcss.com/docs/optimizing-for-production#basic-usage

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

We moved from vanilla CSS with pre-defiend custom CSS utility classes such as (.btn .form-control-field .form-control-label) in our stylish.css filed to using Tailwind’s utility classes directly in our Pug template, we didn’t need to write any CSS code in order to style our app (apart from adding custom configurations), though knowing CSS makes the process way easier as we can browse Tailwind’s website through CSS properties.

--

--

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