Add instructions for previewing generated CSS to CONTRIBUTING

This commit is contained in:
Adam Wathan 2019-09-19 11:07:07 -04:00 • committed by GitHub
parent 039d9a5cea
commit 9e7fe850a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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 .
```