# How I prototype a Web Page

> The simple workflow I use to prototype a web page: set up Tailwind with PostCSS, run a watch task, and live-reload the browser with browser-sync as I edit.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-12-02 | Topics: [Tutorials](https://flaviocopes.com/tags/tutorial/) | Canonical: https://flaviocopes.com/how-prototype-webpage/

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](https://flaviocopes.com/tailwind-setup/) to build prototypes.

I set up all the pipeline for Tailwind and [PostCSS](https://flaviocopes.com/postcss/) first:

Create `postcss.config.js`:

```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`:

```js
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}
```

Create a `tailwind.css` file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Create a `package.json` file:

```json
{
  "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:

```bash
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`](https://www.browsersync.io/), a great utility you can install using `npm install -g browser-sync`:

```bash
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!