Tailwind css and pugjs

So I wanted to work on a full-stack project and Tailwindcss was what i decided to use for the styling, I've used it once or twice and it wasn't enough to make me feel like a pro in it, Setting it up with Pug.js was a bit tricky but I wasn't going to leave it until i completed it, Off course Tailwind is Cool.

Prerequisite

Node.js
Express.js
Pug.js (you can check Pug.js out if you don't know how to set Pug.js up).

I Assume you're done setting up Pug.js before getting here or with the link above.

Now let's get to Tailwindcss part.

To read Static files, you need to add the path to your file. Note: this is where the output file will be located.

app.use(express.static('./dist/**'));

Now Express can read from this path.

Install Tailwind CSS.

npm install -D tailwindcss

Create your tailwind.config.js file.

npx tailwindcss init

You need to add paths to all of your template files in your tailwind.config.js file, pug.js file is our template here. this will be in the content section.

module.exports = {
  content: ["./src/**/*.{pug}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now you create a main CSS file styles.css and add these. Note: this is the input file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now to start the build process you need to run an npm command specifying both input and output CSS file, the input CSS file is the main CSS file that we mentioned above while tailwind CSS will autogenerate an output file in the path specified Note: this is the static file we made sure express.js will be reading.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Boom, you can start using tailwind CSS with pug.js.

Thanks for reading, I'll like to know what you'll be expecting in my upcoming articles. Your feedback is warmly welcome.

How I Set TailwindCss up with Pug.js