Add instructions for previewing generated CSS to CONTRIBUTING

adamwathan · web-flow · commit 9e7fe850a4e4 · 2019-09-19T11:07:07.000-04:00
diff --git 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 .
+```
