preset that provides a basic reset for form styles that makes form el…

…ements easy to override with utilities
tw-in-js · Jan 18, 2022 · 9fa543c · 9fa543c
1 parent b8fbf6d
commit 9fa543c
Show file tree

Hide file tree

Showing 8 changed files with 637 additions and 7 deletions.
diff --git a/.changeset/sharp-eels-serve.md b/.changeset/sharp-eels-serve.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind-forms': patch
+---
+
+preset that provides a basic reset for form styles that makes form elements easy to override with utilities
diff --git a/documentation/20-guide/80-comparisons.md b/documentation/20-guide/80-comparisons.md
@@ -4,6 +4,15 @@ CDN: 96.4kB (brotli) vs 16.9kB (brotli) -> almost 6 times smaller (5.7)
 
 ## twind v0.x
 
+### New Features
+
+- simplified API
+  - helpers return strings that can be used as-is — no need to pass through `tw`
+- working apply
+- shortcuts
+- theme:
+  - dotted deep access: `colors.gray.500` or `spacing[2.5]`
+
 ## UnoCSS
 
 ## Windy CSS

diff --git a/packages/preset-tailwind-forms/README.md b/packages/preset-tailwind-forms/README.md
@@ -0,0 +1,97 @@
+# @twind/preset-tailwind-forms
+
+A [Twind](https://twind.dev) preset that provides a basic reset for form styles that makes form elements easy to override with utilities.
+
+> Based on [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms).
+
+---
+
+## READ THIS FIRST!
+
+**Twind v1 is still in beta. Expect bugs!**
+
+Twind v1 is a complete rewrite aiming to be compatible with Tailwind v3 classes.
+
+---
+
+## Installation
+
+Install from npm:
+
+```sh
+# Using npm
+npm install @twind/preset-tailwind-forms@next
+
+# Using Yarn
+yarn add @twind/preset-tailwind-forms@next
+```
+
+Then add the preset to your twind config:
+
+**with [twind](https://www.npmjs.com/package/twind)** — ready to use tailwindcss
+
+```js
+import { setup } from 'twind'
+import presetTailwindForm from '@twind/preset-tailwind-forms'
+
+setup({
+  presets: [presetTailwindForms()],
+  // ... additional config
+})
+```
+
+or using the Twind CDN:
+
+```html
+<head>
+  <!-- ... -->
+  <script src="https://cdn.jsdelivr.net/npm/twind@next/cdn.global.js" crossorigin></script>
+  <script src="https://cdn.jsdelivr.net/npm/@twind/preset-tailwind-forms@next" crossorigin></script>
+  <script>
+    twind.setup({
+      presets: [twind_presetTailwindForms()],
+      // ...
+    })
+  </script>
+  <!-- ... -->
+</head>
+```
+
+**with [@twind/core](https://www.npmjs.com/package/@twind/core)**
+
+```js
+import { twind, cssom, observe } from '@twind/core'
+import presetTailwind from '@twind/preset-tailwind'
+import presetTailwindForms from '@twind/preset-tailwind-forms'
+
+const tw = observe(
+  twind(
+    {
+      presets: [presetTailwind(), presetTailwindForms()],
+      // ... additional config
+    },
+    cssom(),
+  ),
+)
+```
+
+## Usage
+
+> Same as with [tailwindcss-forms › Basic Usage](https://github.com/tailwindlabs/tailwindcss-forms#basic-usage)
+
+All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
+
+### Using classes instead of element selectors
+
+> Same as with [tailwindcss-forms › Using classes instead of element selectors](https://github.com/tailwindlabs/tailwindcss-forms#using-classes-instead-of-element-selectors)
+
+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
+setup({
+  presets: [presetTailwind(), presetTailwindForms({ strategy: 'class' })],
+  // ... additional config
+})
+```
diff --git a/packages/preset-tailwind-forms/package.json b/packages/preset-tailwind-forms/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@twind/preset-tailwind-forms",
+  "version": "1.0.0-next.13",
+  "description": "twind preset that provides a basic reset for form styles that makes form elements easy to override with utilities",
+  "keywords": [
+    "twind",
+    "tailwind",
+    "tailwindcss",
+    "tw-in-js",
+    "tailwind-in-js",
+    "twind-preset",
+    "preset"
+  ],
+  "type": "module",
+  "// The 'module', 'unpkg' and 'types' fields are added by distilt": "",
+  "main": "src/preset-tailwind-forms.ts",
+  "// Each entry is expanded into several bundles (module, script, types, require, node, and default)": "",
+  "exports": {
+    ".": "./src/preset-tailwind-forms.ts",
+    "./package.json": "./package.json"
+  },
+  "// These are relative from within the dist/ folder": "",
+  "sideEffects": false,
+  "size-limit": [
+    {
+      "name": "@twind/preset-tailwind-forms",
+      "path": "dist/preset-tailwind-forms.esnext.js",
+      "brotli": true,
+      "limit": "1.8kb",
+      "ignore": [
+        "@twind/core",
+        "@twind/preset-tailwind"
+      ]
+    }
+  ],
+  "peerDependencies": {
+    "@twind/core": "1.0.0-next.12",
+    "@twind/preset-tailwind": "1.0.0-next.13",
+    "typescript": "^4.4.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@twind/core": "1.0.0-next.12",
+    "@twind/preset-tailwind": "1.0.0-next.13"
+  },
+  "scripts": {
+    "prepublishOnly": "distilt"
+  },
+  "publishConfig": {
+    "tag": "next",
+    "access": "public",
+    "directory": "dist"
+  }
+}