Pug Tailwind Typescript Template

A quick start for modern PSD to HTML jobs. This template includes:

• Webpack
• Pug
• Typescript + Babel
• PostCSS + TailwindCSS

This is the minimal Multi-page Webpack setup with above tools. You might have to make changes to suit your needs.

Installation

First, clone the repo.

Secondly, install the project with Yarn (preferred)

  yarn install

To start developing, run

  yarn start

To build for production, run

  yarn build

How does this work?

First, it reads all the .pug files in src/views (Not recursive).

Every found view file will then becomes a new HTML entry file through HtmlWebpackPlugin.

And, it has a main Typescript entry file (index.ts) in src/scripts/index.ts, as well as many page-specific scripts in src/scripts/pages. For every page-specific script, it becomes a new webpack entry, ready to be built into a [name].bundle.js file.

In the page's foot (src/views/partials/foot.pug), we do some logical check to ensure the main script is loaded along with the page-specific script.

Note:

• There's a public folder for you which will be copied to dist on the building process. Maybe try adding some images, fonts, stuff...?
• Page-specific CSS is not implemented yet for the sake of simplicity.
• Be careful when you make changes to the bundle's output filename, it might breaks the template!

Authors

• @terrydo

Feedback

If you have any feedback, please reach out to me at hou.dobaotrung@gmail.com or make issues. Feel free to make pull requests to help me improve this ting.