Sometimes I work on single web pages for my projects.
Maybe I want to redesign the blog. Maybe it’s a landing page for a new project.
This is the process I use.
I like to use Tailwind to build prototypes.
I set up all the pipeline for Tailwind and PostCSS first:
Create postcss.config.js:
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
cssnano({ preset: 'default' }),
purgecss({
content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}
Create tailwind.config.js:
module.exports = {
theme: {},
variants: {},
plugins: [],
}
Craete a tailwind.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Create a package.json file:
{
"main": "index.js",
"scripts": {
"build:css": "postcss tailwind.css -o output.css",
"watch": "watch 'npm run build:css' ./layouts"
},
"dependencies": {
"@fullhuman/postcss-purgecss": "^1.3.0",
"autoprefixer": "^9.7.1",
"cssnano": "^4.1.10",
"postcss": "^7.0.21",
"tailwindcss": "^1.1.3",
"watch": "^1.0.2"
}
}
Create a layouts/index.html page, and add your HTML.
Start a terminal shell, go to the project folder and run:
npm run watch
Then I make the browser automatically sync the changes every time I save the page or the CSS is regenerated, using browser-sync, a great utility you can install using npm install -g browser-sync:
browser-sync start --server --files "."
This starts a server and also automatically opens the browser and points at the newly created local web server.
Now I open VS Code and the browser side by side, and I start prototyping!