xem ho

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -1,8 +1,6 @@
 name: Bug Report
 description: Create a bug report for @tailwindcss/forms.
-title: ''
 labels: []
-issue_body: true
 body:
   - type: input
     attributes:
@@ -31,9 +29,10 @@ body:
   - type: input
     attributes:
       label: Reproduction repository
-      description: A public GitHub repo that demonstrates the bug. If it's really unnecessary, link me to a YouTube video you think is awesome instead.
+      description: A public GitHub repo that includes a minimal reproduction of the bug. Unfortunately we can't provide support without a reproduction, and your issue will be closed and locked with no comment if this is not provided.
     validations:
       required: true
-  - type: markdown
+  - type: textarea
     attributes:
-      value: "## Describe your issue\nDescribe the problem you're seeing, any important steps to reproduce and what behavior you expect instead"
+      label: Describe your issue
+      description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead

.github/workflows/release-insiders.yml

@@ -0,0 +1,50 @@
+name: Release Insiders
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Use cached node_modules
+        id: cache
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm install
+        env:
+          CI: true
+
+      - name: Resolve version
+        id: vars
+        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: "Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}"
+        run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
+
+      - name: Publish
+        run: npm publish --tag insiders
+        env:
+          CI: true
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -9,6 +9,79 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [0.5.2] - 2022-05-18
+
+### Added
+
+- Add TypeScript type declarations ([#118](https://github.com/tailwindlabs/tailwindcss-forms/pull/118))
+
+## [0.5.1] - 2022-05-03
+
+### Fixed
+
+- Remove duplicate `outline` property ([#116](https://github.com/tailwindlabs/tailwindcss-forms/pull/116))
+- Fix autoprefixer warning about `color-adjust` ([#115](https://github.com/tailwindlabs/tailwindcss-forms/pull/115))
+
+## [0.5.0] - 2022-03-02
+
+### Changed
+
+- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71))
+
+## [0.4.1] - 2022-03-02
+
+### Added
+
+- Remove `dist` folder and related dependencies ([#96](https://github.com/tailwindlabs/tailwindcss-forms/pull/96))
+
+### Fixed
+
+- Use `addComponents` for class strategy ([#91](https://github.com/tailwindlabs/tailwindcss-forms/pull/91))
+- Fix extra height on Safari date/time inputs ([#109](https://github.com/tailwindlabs/tailwindcss-forms/pull/109))
+
+## [0.4.0] - 2021-12-09
+
+### Changed
+
+- Update color palette references for v3 ([#83](https://github.com/tailwindlabs/tailwindcss-forms/pull/83))
+- Don't read outline.none value from config ([#89](https://github.com/tailwindlabs/tailwindcss-forms/pull/89))
+
+## [0.3.4] - 2021-09-28
+
+### Fixed
+
+- Fix compatibility with `optimizeUniversalDefaults` experimental feature in Tailwind CSS v2.2 ([#81](https://github.com/tailwindlabs/tailwindcss-forms/pull/81))
+
+## [0.3.3] - 2021-06-03
+
+### Fixed
+
+- Fix typo in selector when using `class` strategy that breaks background colors on checkboxes and radio buttons ([#72](https://github.com/tailwindlabs/tailwindcss-forms/pull/72))
+
+## [0.3.2] - 2021-03-26
+
+### Fixed
+
+- Filter `null` rules for JIT compatibility ([b4c4e03](https://github.com/tailwindlabs/tailwindcss-forms/commit/b4c4e039337c3a5599f5b6d9eabbcc8ab9e8c8d9))
+
+## [0.3.1] - 2021-03-26
+
+### Fixed
+
+- Use `base` as default strategy, not `class` ([#61](https://github.com/tailwindlabs/tailwindcss-forms/pull/61))
+
+## [0.3.0] - 2021-03-25
+
+### Added
+
+- Add `class` strategy for you babies and your custom select and date picker libraries ;) ([#39](https://github.com/tailwindlabs/tailwindcss-forms/pull/39))
+
+## [0.2.1] - 2020-11-17
+
+### Fixed
+
+- Fix issue where default checkbox/radio border color took precedence over user border color on focus ([d0b9fd9](https://github.com/tailwindlabs/tailwindcss-forms/commit/d0b9fd9))
+
 ## [0.2.0] - 2020-11-16
 
 ### Changed
@@ -44,7 +117,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Initial release!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...HEAD
+[0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2
+[0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1
+[0.5.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...v0.5.0
+[0.4.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...v0.4.1
+[0.4.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.4.0
+[0.3.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.3.4
+[0.3.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.2...v0.3.3
+[0.3.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.1...v0.3.2
+[0.3.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.0...v0.3.1
+[0.3.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.1...v0.3.0
+[0.2.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.4...v0.2.0
 [0.1.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.3...v0.1.4
 [0.1.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.2...v0.1.3

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Tailwind Labs
+Copyright (c) Tailwind Labs, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -4,16 +4,10 @@ A plugin that provides a basic reset for form styles that makes form elements ea
 
 ## Installation
 
-> Note that @tailwindcss/forms is designed for Tailwind CSS v2.0.
-
 Install the plugin from npm:
 
 ```sh
-# Using npm
-npm install @tailwindcss/forms
-
-# Using Yarn
-yarn add @tailwindcss/forms
+npm install -D @tailwindcss/forms
 ```
 
 Then add the plugin to your `tailwind.config.js` file:
@@ -31,7 +25,7 @@ module.exports = {
 }
 ```
 
-## Usage
+## Basic usage
 
 [**View the live demo**](https://tailwindcss-forms.vercel.app/)
 
@@ -72,3 +66,59 @@ Every element has been normalized/reset to a simple visually consistent style th
 ```
 
 More customization examples and best practices coming soon.
+
+### Using classes to style
+
+In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.
+
+```html
+<input type="email" class="form-input px-4 py-3 rounded-full">
+
+<select class="form-select px-4 py-3 rounded-full">
+  <!-- ... -->
+</select>
+
+<input type="checkbox" class="form-checkbox rounded text-pink-500" />
+```
+
+Here is a complete table of the provided `form-*` classes for reference:
+
+| Base                      | Class              |
+| ------------------------- | ------------------ |
+| `[type='text']`           | `form-input`       |
+| `[type='email']`          | `form-input`       |
+| `[type='url']`            | `form-input`       |
+| `[type='password']`       | `form-input`       |
+| `[type='number']`         | `form-input`       |
+| `[type='date']`           | `form-input`       |
+| `[type='datetime-local']` | `form-input`       |
+| `[type='month']`          | `form-input`       |
+| `[type='search']`         | `form-input`       |
+| `[type='tel']`            | `form-input`       |
+| `[type='time']`           | `form-input`       |
+| `[type='week']`           | `form-input`       |
+| `textarea`                | `form-textarea`    |
+| `select`                  | `form-select`      |
+| `select[multiple]`        | `form-multiselect` |
+| `[type='checkbox']`       | `form-checkbox`    |
+| `[type='radio']`          | `form-radio`       |
+
+### Using only global styles or only classes
+
+Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects.
+
+If generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches.
+
+```js
+// tailwind.config.js
+plugins: [
+  require("@tailwindcss/forms")({
+    strategy: 'base', // only generate global styles
+    strategy: 'class', // only generate classes
+  }),
+],
+```
+
+When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.
+
+When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.