Add instructions for previewing generated CSS to CONTRIBUTING
This commit is contained in:
parent
039d9a5cea
commit
9e7fe850a4
1 changed files with 31 additions and 0 deletions
31
.github/CONTRIBUTING.md
vendored
31
.github/CONTRIBUTING.md
vendored
|
|
@ -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 .
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue