create-pug-tailwindcss-app v1.0.2
Create Static Web Pages With Pug and Tailwindcss
This tool helps you build static websites quickly with pug and tailwindcss.
Prerequisites
I use VSCode and the Live Server extension.
If you choose to use another editor, you'd need a dev server to live-check your pages.
You can also install live-server
globally with this command:
npm install -g live-server
Then run:
live-server dist
to live-check your work.
Get Started
Run the following command to set up everything:
npx create-pug-tailwindcss-app your-project-name
Then run the following commands to compile your pug and css files.
cd your-project-name
npm start
Finally, start live server and click dist
from the opened web page to see your work.
From now on, you can just write your pug and tailwindcss code, save and all changes will be reflected in the browser in real-time.
Advanced Usage
Pass Data to Pug Compiler
If you want to pass data to pug compiler, just add the -O
or --obj
option to the npm run build:html
command like this:
# with javascript object
npm run build:html -- -O "{name: 'jesse'}"
# with JSON
npm run build:html -- -O '{"name": "jesse"}'
# with data file name
npm run build:html -- -O data.json
Please note that the start
script combines both npm run build:html
and npm run build:css
, which means if you need to pass options to these commands, you have to run them separately.
Prettify Output HTML
Pass the --pretty
option to the npm run build:html
command to prettify the output HTML file:
npm run build:html -- --pretty
Hot Reload
Pass the --watch
option to the npm run build:html
and/or the npm run build:css
command to make your changes reflected in the browser in real-time:
npm run build:html -- --watch
npm run build:css -- --watch