loading...

How I prototype a Web Page using Tailwind

flaviocopes profile image flavio ⚡️🔥 Originally published at flaviocopes.com on ・2 min read

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!

Discussion

pic
Editor guide
Collapse
sammerro profile image
Michał Kowalski

Big fan of your work! Good to see you on my favorite site with dev articles.

Collapse
flaviocopes profile image
flavio ⚡️🔥 Author

Thank you Michał! :)