Posted on Dec 4, 2019 • Originally published at flaviocopes.com on Dec 4, 2019

How I prototype a Web Page using Tailwind

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: