From 9e7fe850a4e4b259ee88d1280764d0ce3d961e97 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 19 Sep 2019 11:07:07 -0400
Subject: [PATCH] Add instructions for previewing generated CSS to CONTRIBUTING

---
 .github/CONTRIBUTING.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index c8025e2f1..b2dfb20a5 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -31,3 +31,34 @@ npm test
 ```
 
 Please ensure that the tests are passing when submitting a pull request. If you're adding new features to Tailwind, please include tests.
+
+## Building the CSS and trying your changes manually
+
+In addition to the automated tests, if you'd like to test the generated CSS manually with your own test HTML file, you can generate the default build by running:
+
+```sh
+npm run prepare
+```
+
+This will create new CSS files in the `/dist` folder which you can reference in your own test HTML file. We often test our own changes by creating an `index.html` file in the root of the Tailwind project itself that pulls in the `/dist/tailwind.css` stylesheet:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="/dist/tailwind.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <h1 class="text-2xl font-bold text-center">Hello world!</h1>
+  </body>
+</html>
+````
+
+You can then use a tool like [live-server](https://www.npmjs.com/package/live-server) to preview it in the browser:
+
+```sh
+live-server .
+```