DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
flavio ⚑️πŸ”₯
flavio ⚑️πŸ”₯

Posted on • Originally published at flaviocopes.com on

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:

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!

Top comments (2)

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Ε‚! :)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.