2.2 KiB
Contributing
Thanks for your interest in contributing to Tailwind CSS! Please take a moment to review this document before submitting a pull request.
Pull requests
Please ask first before starting work on any significant new features.
It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, etc.
Coding standards
Our code formatting rules are defined in .eslintrc. You can check your code against these standards by running:
npm run style
To automatically fix any style violations in your code, you can run:
npm run style --fix
Running tests
You can run the test suite using the following commands:
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:
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:
<!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 to preview it in the browser:
live-server .