From 99fbd47374b0fd359669b4ddfcd82cac82b8a741 Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Tue, 1 Mar 2022 17:00:15 -0500
Subject: [PATCH 27/80] Fix extra height on Safari date/time inputs (#109)
* Fix extra height on Safari datetime inputs
* Update changelog
---
CHANGELOG.md | 1 +
src/index.js | 31 +++++++++++++++++++++++++++++++
2 files changed, 32 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0328de5..4ec0890 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### 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
diff --git a/src/index.js b/src/index.js
index 02f5394..d081e4b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -81,6 +81,37 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
'min-height': '1.5em',
},
},
+ {
+ // In Safari on macOS date time inputs are 4px taller than normal inputs
+ // This is because there is extra padding on the datetime-edit and datetime-edit-{part}-field pseudo elements
+ // See https://github.com/tailwindlabs/tailwindcss-forms/issues/95
+ base: [
+ '::-webkit-datetime-edit',
+ '::-webkit-datetime-edit-year-field',
+ '::-webkit-datetime-edit-month-field',
+ '::-webkit-datetime-edit-day-field',
+ '::-webkit-datetime-edit-hour-field',
+ '::-webkit-datetime-edit-minute-field',
+ '::-webkit-datetime-edit-second-field',
+ '::-webkit-datetime-edit-millisecond-field',
+ '::-webkit-datetime-edit-meridiem-field',
+ ],
+ class: [
+ '.form-input::-webkit-datetime-edit',
+ '.form-input::-webkit-datetime-edit-year-field',
+ '.form-input::-webkit-datetime-edit-month-field',
+ '.form-input::-webkit-datetime-edit-day-field',
+ '.form-input::-webkit-datetime-edit-hour-field',
+ '.form-input::-webkit-datetime-edit-minute-field',
+ '.form-input::-webkit-datetime-edit-second-field',
+ '.form-input::-webkit-datetime-edit-millisecond-field',
+ '.form-input::-webkit-datetime-edit-meridiem-field',
+ ],
+ styles: {
+ 'padding-top': 0,
+ 'padding-bottom': 0,
+ },
+ },
{
base: ['select'],
class: ['.form-select'],
From 2eb6f962f295a6825486101b19151d122d76f174 Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Wed, 2 Mar 2022 12:43:53 -0500
Subject: [PATCH 28/80] Update changelog
---
CHANGELOG.md | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ec0890..21bdcad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
+Nothing yet!
+
+## [0.4.1] - 2022-03-02
+
### Added
- Remove `dist` folder and related dependencies ([#96](https://github.com/tailwindlabs/tailwindcss-forms/pull/96))
@@ -94,7 +98,8 @@ 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.4.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...HEAD
+[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
From 9a0c0e44adfe21087696e3681f07e4cae4988677 Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Wed, 2 Mar 2022 12:44:11 -0500
Subject: [PATCH 29/80] 0.4.1
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index e06570f..913fbe6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@tailwindcss/forms",
- "version": "0.4.0",
+ "version": "0.4.1",
"main": "src/index.js",
"license": "MIT",
"repository": "https://github.com/tailwindlabs/tailwindcss-forms",
From 1871f90913ba9b561a0987bdaebe52997892071c Mon Sep 17 00:00:00 2001
From: Ben Sheedy
Date: Wed, 2 Mar 2022 19:23:50 +0000
Subject: [PATCH 30/80] Generate both global styles and classes by default
(#71)
* feat(option): allow both strategies
* feat: base and class by default
* Refactor
* Update changelog
* Rework readme
Co-authored-by: Jordan Pittman
Co-authored-by: Jonathan Reinink
---
CHANGELOG.md | 4 +++-
README.md | 37 ++++++++++++++++++++++---------------
src/index.js | 21 +++++++++++----------
3 files changed, 36 insertions(+), 26 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21bdcad..2e02609 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
-Nothing yet!
+### Changed
+
+- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71))
## [0.4.1] - 2022-03-02
diff --git a/README.md b/README.md
index 3b88276..adf5f6a 100644
--- a/README.md
+++ b/README.md
@@ -67,22 +67,9 @@ Every element has been normalized/reset to a simple visually consistent style th
More customization examples and best practices coming soon.
-### Using classes instead of element selectors
+### Using classes to style
-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.
-
-For situations where the default strategy doesn't work well with your project, you can use the `class` strategy to make all form styling _opt-in_ instead of applied globally:
-
-```js
-// tailwind.config.js
-plugins: [
- require("@tailwindcss/forms")({
- strategy: 'class',
- }),
-],
-```
-
-When using the `class` strategy, form elements do not receive any reset styles by default, and reset styles are added per element using a new set of `form-*` classes generated by the plugin:
+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 `
`, look like a form element.
```html
@@ -115,3 +102,23 @@ Here is a complete table of the provided `form-*` classes for reference:
| `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.
diff --git a/src/index.js b/src/index.js
index d081e4b..ee60f72 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,9 +5,9 @@ const colors = require('tailwindcss/colors')
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
const { spacing, borderWidth, borderRadius } = defaultTheme
-const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
+const forms = plugin.withOptions(function (options = { strategy: undefined }) {
return function ({ addBase, addComponents, theme }) {
- const strategy = options.strategy
+ const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy]
const rules = [
{
@@ -283,20 +283,21 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
},
]
- const strategyRules = rules
+ const getStrategyRules = (strategy) => rules
.map((rule) => {
- if (rule[strategy] === null) {
- return null
- }
+ if (rule[strategy] === null) return null
return { [rule[strategy]]: rule.styles }
})
.filter(Boolean)
- ;({
- 'base': addBase,
- 'class': addComponents
- })[strategy](strategyRules)
+ if (strategy.includes('base')) {
+ addBase(getStrategyRules('base'))
+ }
+
+ if (strategy.includes('class')) {
+ addComponents(getStrategyRules('class'))
+ }
}
})
From c74eecc57c0534679c88100451040bbb1cb3ef25 Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Wed, 2 Mar 2022 14:26:45 -0500
Subject: [PATCH 31/80] Update changelog
---
CHANGELOG.md | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e02609..7782a37 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
+Nothing yet!
+
+## [0.5.0] - 2022-03-02
+
### Changed
- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71))
@@ -100,7 +104,8 @@ 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.4.1...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...HEAD
+[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
From 3103e3329b7995e6be7a69c36f4055dd405bb2d3 Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Wed, 2 Mar 2022 14:28:16 -0500
Subject: [PATCH 32/80] 0.5.0
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 913fbe6..75483dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@tailwindcss/forms",
- "version": "0.4.1",
+ "version": "0.5.0",
"main": "src/index.js",
"license": "MIT",
"repository": "https://github.com/tailwindlabs/tailwindcss-forms",
From 37912e9554d92b32f9e5aa4a7c4002a184682c1b Mon Sep 17 00:00:00 2001
From: Amit Agarwal <1344071+labnol@users.noreply.github.com>
Date: Sun, 17 Apr 2022 18:20:19 +0530
Subject: [PATCH 33/80] Fix for multiple Select (#113)
The value of multiple attribute in the select element should be a boolean.
---
kitchen-sink.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/kitchen-sink.html b/kitchen-sink.html
index f42a541..ec9a700 100644
--- a/kitchen-sink.html
+++ b/kitchen-sink.html
@@ -104,7 +104,7 @@