It appears you have a well-structured Git repository with various files, including SVG icons and HTML documents. Here's a brief overview:

This commit is contained in:
2025-06-11 09:05:15 +02:00
parent 36c2466e53
commit 6d6aa954dd
15556 changed files with 1076330 additions and 1 deletions

View File

@ -0,0 +1,38 @@
name: Bug Report
description: Create a bug report for @tailwindcss/forms.
labels: []
body:
- type: input
attributes:
label: What version of @tailwindcss/forms are you using?
description: 'For example: v0.1.4'
validations:
required: true
- type: input
attributes:
label: What version of Node.js are you using?
description: 'For example: v12.0.0'
validations:
required: true
- type: input
attributes:
label: What browser are you using?
description: 'For example: Chrome, Safari, or N/A'
validations:
required: true
- type: input
attributes:
label: What operating system are you using?
description: 'For example: macOS, Windows'
validations:
required: true
- type: input
attributes:
label: Reproduction repository
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: textarea
attributes:
label: Describe your issue
description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead

View File

@ -0,0 +1,11 @@
blank_issues_enabled: false
contact_links:
- name: Feature Request
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas
about: 'Suggest any ideas you have using our discussion forums.'
- name: Help
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=help
about: 'If you have a question or need help, ask a question on the discussion forums.'
- name: Kind Words
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=kind-words
about: "Have something nice to say about @tailwindcss/forms or Tailwind CSS in general? We'd love to hear it!"

View File

@ -0,0 +1,56 @@
name: Prepare Release
on:
workflow_dispatch:
push:
tags:
- 'v*'
permissions:
contents: read
jobs:
prepare:
permissions:
contents: write # for softprops/action-gh-release to create GitHub release
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [22]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Test
run: npm test
- name: Resolve version
id: vars
run: |
echo "TAG_NAME=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
- name: Get release notes
run: |
RELEASE_NOTES=$(npm run release-notes --silent)
echo "RELEASE_NOTES<<EOF" >> $GITHUB_ENV
echo "$RELEASE_NOTES" >> $GITHUB_ENV
echo "EOF" >> $GITHUB_ENV
- name: Release
uses: softprops/action-gh-release@v1
with:
draft: true
tag_name: ${{ env.TAG_NAME }}
body: ${{ env.RELEASE_NOTES }}

View File

@ -0,0 +1,42 @@
name: Release Insiders
on:
push:
branches: [main]
permissions:
contents: read
id-token: write
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [22]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
cache: 'npm'
- name: Install dependencies
run: npm install
- 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 --provenance --tag insiders
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

View File

@ -0,0 +1,42 @@
name: Release
on:
release:
types: [published]
permissions:
contents: read
id-token: write
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [22]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Test
run: npm test
- name: Calculate environment variables
run: |
echo "RELEASE_CHANNEL=$(npm run release-channel --silent)" >> $GITHUB_ENV
- name: Publish
run: npm publish --provenance --tag ${{ env.RELEASE_CHANNEL }}
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

194
backend/node_modules/@tailwindcss/forms/CHANGELOG.md generated vendored Normal file
View File

@ -0,0 +1,194 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
- Nothing yet!
## [0.5.10] - 2025-01-07
### Fixed
- Support installing with beta versions of Tailwind CSS v4 ([#163](https://github.com/tailwindlabs/tailwindcss-forms/pull/163))
## [0.5.9] - 2024-09-05
### Fixed
- Fallback to static chevron color if theme is using variables ([#167](https://github.com/tailwindlabs/tailwindcss-forms/pull/167))
## [0.5.8] - 2024-08-28
### Fixed
- Support installing with alpha versions of Tailwind CSS v4 ([#163](https://github.com/tailwindlabs/tailwindcss-forms/pull/163))
## [0.5.7] - 2023-11-10
### Fixed
- Use normal `checkbox` and `radio` appearance in `forced-colors` mode ([#152](https://github.com/tailwindlabs/tailwindcss-forms/pull/152))
## [0.5.6] - 2023-08-28
### Fixed
- Fix date time bottom spacing on MacOS Safari ([#146](https://github.com/tailwindlabs/tailwindcss-forms/pull/146))
## [0.5.5] - 2023-08-22
### Fixed
- Fix text alignment on date and time inputs on iOS ([#144](https://github.com/tailwindlabs/tailwindcss-forms/pull/144))
## [0.5.4] - 2023-07-13
### Fixed
- Remove chevron for selects with a non-default size ([#137](https://github.com/tailwindlabs/tailwindcss-forms/pull/137))
- Allow for <input> without `type` ([#141](https://github.com/tailwindlabs/tailwindcss-forms/pull/141))
## [0.5.3] - 2022-09-02
### Fixed
- Update TypeScript types ([#126](https://github.com/tailwindlabs/tailwindcss-forms/pull/126))
## [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
- Update form styles to be less opinionated and encourage custom styling ([3288709](https://github.com/tailwindlabs/tailwindcss-forms/commit/3288709b59f4101511ec19f30cb2dafe7738251e))
- Update custom property names to match namespaced variables in Tailwind CSS v2.0 ([adb9807](https://github.com/tailwindlabs/tailwindcss-forms/commit/adb98078fc830d0416cb5ea2c895e997d5f0a5ec), [bbd8510](https://github.com/tailwindlabs/tailwindcss-forms/commit/bbd85102ef4a402b3c39d997c025208a33694cc4))
## [0.1.4] - 2020-11-12
### Fixed
- Fix SVG background images not rendering properly in all browsers ([#5](https://github.com/tailwindlabs/tailwindcss-forms/pull/5))
## [0.1.3] - 2020-11-12
### Changed
- Update focus styles to account for changes to `ring` API in latest Tailwind CSS 2.0 alpha ([5c16689](https://github.com/tailwindlabs/tailwindcss-forms/commit/5c166896b06475832bd8364f9f3ef5c4baec585f))
## [0.1.2] - 2020-11-11
### Fixed
- Work around iOS Safari bug that causes date inputs to render with no height when empty ([b98365b](https://github.com/tailwindlabs/tailwindcss-forms/commit/b98365b903b586bfbe7a6ae745ba64b5d87e23e3))
## [0.1.1] - 2020-11-11
### Changed
- Move `tailwindcss` to dependencies, hoping to get it working with Tailwind Play ([d625ea1](https://github.com/tailwindlabs/tailwindcss-forms/commit/d625ea11bd111a4d8cde937e36f3d229ecdf7c6a))
## [0.1.0] - 2020-11-11
Initial release!
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.10...HEAD
[0.5.10]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.9...v0.5.10
[0.5.9]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.8...v0.5.9
[0.5.8]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.7...v0.5.8
[0.5.7]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.6...v0.5.7
[0.5.6]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.5...v0.5.6
[0.5.5]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.4...v0.5.5
[0.5.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...v0.5.4
[0.5.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...v0.5.3
[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
[0.1.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.1...v0.1.2
[0.1.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.0...v0.1.1
[0.1.0]: https://github.com/tailwindlabs/tailwindcss-forms/releases/tag/v0.1.0

21
backend/node_modules/@tailwindcss/forms/LICENSE generated vendored Normal file
View File

@ -0,0 +1,21 @@
MIT License
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
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

122
backend/node_modules/@tailwindcss/forms/README.md generated vendored Normal file
View File

@ -0,0 +1,122 @@
# @tailwindcss/forms
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
## Installation
Install the plugin from npm:
```sh
npm install -D @tailwindcss/forms
```
Then add the plugin to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}
```
## Basic usage
[**View the live demo**](https://tailwindcss-forms.vercel.app/)
All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
Currently we add basic utility-friendly form styles for the following form element types:
- `input[type='text']`
- `input[type='password']`
- `input[type='email']`
- `input[type='number']`
- `input[type='url']`
- `input[type='date']`
- `input[type='datetime-local']`
- `input[type='month']`
- `input[type='week']`
- `input[type='time']`
- `input[type='search']`
- `input[type='tel']`
- `input[type='checkbox']`
- `input[type='radio']`
- `select`
- `select[multiple]`
- `textarea`
Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
```html
<!-- You can actually customize padding on a select element now: -->
<select class="rounded-full px-4 py-3">
<!-- ... -->
</select>
<!-- Or change a checkbox color using text color utilities: -->
<input type="checkbox" class="rounded text-pink-500" />
```
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 rounded-full px-4 py-3" />
<select class="form-select rounded-full px-4 py-3">
<!-- ... -->
</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.

255
backend/node_modules/@tailwindcss/forms/index.html generated vendored Normal file
View File

@ -0,0 +1,255 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@tailwindcss/forms examples</title>
<link rel="stylesheet" href="/dist/tailwind.css" />
</head>
<body>
<div class="px-6 text-gray-900 antialiased">
<div class="mx-auto max-w-xl divide-y py-12 md:max-w-4xl">
<div class="py-8">
<h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>
<p class="mt-2 text-lg text-gray-600">
An opinionated form reset designed to make form elements easy to style with utility
classes.
</p>
<div class="mt-4 flex space-x-4">
<a class="text-lg underline" href="https://github.com/tailwindlabs/tailwindcss-forms"
>Documentation</a
>
<a class="text-lg underline" href="/kitchen-sink.html">Kitchen Sink</a>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Unstyled</h2>
<p class="mt-2 text-lg text-gray-600">This is how form elements look out of the box.</p>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input type="text" class="mt-1 block w-full" placeholder="" />
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input type="email" class="mt-1 block w-full" placeholder="john@example.com" />
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input type="date" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select class="mt-1 block w-full">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea class="mt-1 block w-full" rows="3"></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="checkbox" checked />
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Simple</h2>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
>
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
rows="3"
></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input
type="checkbox"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0"
checked
/>
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Underline</h2>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="mt-0 block w-full border-0 border-b-2 border-gray-200 pl-0.5 pr-10 focus:border-black focus:ring-0"
>
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
rows="2"
></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input
type="checkbox"
class="border-2 border-gray-300 text-black focus:border-gray-300 focus:ring-black"
/>
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-12">
<h2 class="text-2xl font-bold">Solid</h2>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
>
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
rows="3"
></textarea>
</label>
<div class="block">
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input
type="checkbox"
class="rounded border-transparent bg-gray-200 text-gray-700 focus:border-transparent focus:bg-gray-200 focus:ring-1 focus:ring-gray-500 focus:ring-offset-2"
/>
<span class="ml-2">Email me news and special offers</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,222 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@tailwindcss/forms Kitchen Sink</title>
<link rel="stylesheet" href="/dist/tailwind.css" />
</head>
<body>
<div class="px-6 text-gray-900 antialiased">
<div class="mx-auto max-w-xl py-12 md:max-w-4xl">
<h2 class="text-2xl font-bold">Reset styles</h2>
<p class="mt-2 text-lg text-gray-500">
These are form elements this plugin styles by default.
</p>
<div class="mt-8 grid grid-cols-1 items-start gap-6 md:grid-cols-2">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (text)</span>
<input
type="text"
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (email)</span>
<input
type="email"
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (email, multiple)</span>
<input
type="email"
multiple
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (password)</span>
<input
type="password"
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (date)</span>
<input type="date" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (datetime-local)</span>
<input type="datetime-local" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (month)</span>
<input type="month" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (number)</span>
<input type="number" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (search)</span>
<input type="search" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (time)</span>
<input type="time" class="form-input mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (week)</span>
<input type="week" class="form-input mt-1 block w-full" />
</label>
</div>
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (tel)</span>
<input
type="tel"
multiple
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Input (url)</span>
<input
type="url"
multiple
class="form-input mt-1 block w-full"
placeholder="john@example.com"
/>
</label>
<label class="block">
<span class="text-gray-700">Select</span>
<select class="form-select mt-1 block w-full">
<option>Option 1</option>
<option>Option 2</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Select (single, with size)</span>
<select class="form-select mt-1 block w-full" size="3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Select (multiple)</span>
<select class="form-multiselect mt-1 block w-full" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Select (multiple, with size)</span>
<select class="form-multiselect mt-1 block w-full" multiple size="3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Textarea</span>
<textarea
class="form-textarea mt-1 block h-24 w-full"
rows="3"
placeholder="Enter some long form content."
></textarea>
</label>
<fieldset class="block">
<legend class="text-gray-700">Checkboxes</legend>
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input class="form-checkbox" type="checkbox" checked />
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-checkbox" type="checkbox" />
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-checkbox" type="checkbox" />
<span class="ml-2">Option 3</span>
</label>
</div>
</div>
</fieldset>
<fieldset class="block">
<legend class="text-gray-700">Radio Buttons</legend>
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input class="form-radio" type="radio" checked name="radio-direct" value="1" />
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-radio" type="radio" name="radio-direct" value="2" />
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input class="form-radio" type="radio" name="radio-direct" value="3" />
<span class="ml-2">Option 3</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="mx-auto max-w-4xl py-12">
<h2 class="text-2xl font-bold">Untouched</h2>
<p class="mt-2 text-lg text-gray-500">
These are form elements we don't handle (yet?), but we use this to make sure we haven't
accidentally styled them by mistake.
</p>
<div class="mt-8 grid grid-cols-2 items-start gap-6">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (range)</span>
<input type="range" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (color)</span>
<input type="color" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (file)</span>
<input type="file" class="mt-1 block w-full" />
</label>
<label class="block">
<span class="text-gray-700">Input (file, multiple)</span>
<input type="file" multiple class="mt-1 block w-full" />
</label>
</div>
</div>
</div>
</div>
</body>
</html>

45
backend/node_modules/@tailwindcss/forms/package.json generated vendored Normal file
View File

@ -0,0 +1,45 @@
{
"name": "@tailwindcss/forms",
"version": "0.5.10",
"main": "src/index.js",
"types": "src/index.d.ts",
"license": "MIT",
"repository": "https://github.com/tailwindlabs/tailwindcss-forms",
"publishConfig": {
"access": "public"
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"plugins": [
"prettier-plugin-tailwindcss"
]
},
"scripts": {
"dev": "concurrently \"npm run serve\" \"npm run watch\"",
"serve": "live-server .",
"watch": "npm run build -- -w",
"build": "tailwindcss -o dist/tailwind.css",
"test": "exit 0",
"release-channel": "node ./scripts/release-channel.js",
"release-notes": "node ./scripts/release-notes.js",
"format": "prettier . --write"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
},
"devDependencies": {
"autoprefixer": "^10.4.6",
"concurrently": "^5.3.0",
"live-server": "^1.2.2",
"postcss": "^8.4.13",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.8",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"mini-svg-data-uri": "^1.2.3"
}
}

View File

@ -0,0 +1,18 @@
// Given a version, figure out what the release channel is so that we can publish to the correct
// channel on npm.
//
// E.g.:
//
// 1.2.3 -> latest (default)
// 0.0.0-insiders.ffaa88 -> insiders
// 4.1.0-alpha.4 -> alpha
let version =
process.argv[2] || process.env.npm_package_version || require('../package.json').version
let match = /\d+\.\d+\.\d+-(.*)\.\d+/g.exec(version)
if (match) {
console.log(match[1])
} else {
console.log('latest')
}

View File

@ -0,0 +1,21 @@
// Given a version, figure out what the release notes are so that we can use this to pre-fill the
// relase notes on a GitHub release for the current version.
let path = require('path')
let fs = require('fs')
let version =
process.argv[2] || process.env.npm_package_version || require('../package.json').version
let changelog = fs.readFileSync(path.resolve(__dirname, '..', 'CHANGELOG.md'), 'utf8')
let match = new RegExp(
`## \\[${version}\\] - (.*)\\n\\n([\\s\\S]*?)\\n(?:(?:##\\s)|(?:\\[))`,
'g'
).exec(changelog)
if (match) {
let [, date, notes] = match
console.log(notes.trim())
} else {
console.log(`Placeholder release notes for version: v${version}`)
}

View File

@ -0,0 +1,9 @@
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): {
handler: () => void
}
declare namespace plugin {
const __isOptionsFunction: true
}
export = plugin

368
backend/node_modules/@tailwindcss/forms/src/index.js generated vendored Normal file
View File

@ -0,0 +1,368 @@
const svgToDataUri = require('mini-svg-data-uri')
const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
const { spacing, borderWidth, borderRadius } = defaultTheme
function resolveColor(color, opacityVariableName) {
return color.replace('<alpha-value>', `var(${opacityVariableName}, 1)`)
}
const forms = plugin.withOptions(function (options = { strategy: undefined }) {
return function ({ addBase, addComponents, theme }) {
function resolveChevronColor(color, fallback) {
let resolved = theme(color)
if (!resolved || resolved.includes('var(')) {
return fallback
}
return resolved.replace('<alpha-value>', '1')
}
const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy]
const rules = [
{
base: [
"[type='text']",
'input:where(:not([type]))',
"[type='email']",
"[type='url']",
"[type='password']",
"[type='number']",
"[type='date']",
"[type='datetime-local']",
"[type='month']",
"[type='search']",
"[type='tel']",
"[type='time']",
"[type='week']",
'[multiple]',
'textarea',
'select',
],
class: ['.form-input', '.form-textarea', '.form-select', '.form-multiselect'],
styles: {
appearance: 'none',
'background-color': '#fff',
'border-color': resolveColor(
theme('colors.gray.500', colors.gray[500]),
'--tw-border-opacity'
),
'border-width': borderWidth['DEFAULT'],
'border-radius': borderRadius.none,
'padding-top': spacing[2],
'padding-right': spacing[3],
'padding-bottom': spacing[2],
'padding-left': spacing[3],
'font-size': baseFontSize,
'line-height': baseLineHeight,
'--tw-shadow': '0 0 #0000',
'&:focus': {
outline: '2px solid transparent',
'outline-offset': '2px',
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': '0px',
'--tw-ring-offset-color': '#fff',
'--tw-ring-color': resolveColor(
theme('colors.blue.600', colors.blue[600]),
'--tw-ring-opacity'
),
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)`,
'border-color': resolveColor(
theme('colors.blue.600', colors.blue[600]),
'--tw-border-opacity'
),
},
},
},
{
base: ['input::placeholder', 'textarea::placeholder'],
class: ['.form-input::placeholder', '.form-textarea::placeholder'],
styles: {
color: resolveColor(theme('colors.gray.500', colors.gray[500]), '--tw-text-opacity'),
opacity: '1',
},
},
{
base: ['::-webkit-datetime-edit-fields-wrapper'],
class: ['.form-input::-webkit-datetime-edit-fields-wrapper'],
styles: {
padding: '0',
},
},
{
// Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
// This sucks because users can't change line-height with a utility on date inputs now.
// Reference: https://github.com/twbs/bootstrap/pull/31993
base: ['::-webkit-date-and-time-value'],
class: ['.form-input::-webkit-date-and-time-value'],
styles: {
'min-height': '1.5em',
},
},
{
// In Safari on iOS date and time inputs are centered instead of left-aligned and can't be
// changed with `text-align` utilities on the input by default. Resetting this to `inherit`
// makes them left-aligned by default and makes it possible to override the alignment with
// utility classes without using an arbitrary variant to target the pseudo-elements.
base: ['::-webkit-date-and-time-value'],
class: ['.form-input::-webkit-date-and-time-value'],
styles: {
'text-align': 'inherit',
},
},
{
// In Safari on macOS date time inputs that are set to `display: block` have unexpected
// extra bottom spacing. This can be corrected by setting the `::-webkit-datetime-edit`
// pseudo-element to `display: inline-flex`, instead of the browser default of
// `display: inline-block`.
base: ['::-webkit-datetime-edit'],
class: ['.form-input::-webkit-datetime-edit'],
styles: {
display: 'inline-flex',
},
},
{
// 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'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveChevronColor(
'colors.gray.500',
colors.gray[500]
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
)}")`,
'background-position': `right ${spacing[2]} center`,
'background-repeat': `no-repeat`,
'background-size': `1.5em 1.5em`,
'padding-right': spacing[10],
'print-color-adjust': `exact`,
},
},
{
base: ['[multiple]', '[size]:where(select:not([size="1"]))'],
class: ['.form-select:where([size]:not([size="1"]))'],
styles: {
'background-image': 'initial',
'background-position': 'initial',
'background-repeat': 'unset',
'background-size': 'initial',
'padding-right': spacing[3],
'print-color-adjust': 'unset',
},
},
{
base: [`[type='checkbox']`, `[type='radio']`],
class: ['.form-checkbox', '.form-radio'],
styles: {
appearance: 'none',
padding: '0',
'print-color-adjust': 'exact',
display: 'inline-block',
'vertical-align': 'middle',
'background-origin': 'border-box',
'user-select': 'none',
'flex-shrink': '0',
height: spacing[4],
width: spacing[4],
color: resolveColor(theme('colors.blue.600', colors.blue[600]), '--tw-text-opacity'),
'background-color': '#fff',
'border-color': resolveColor(
theme('colors.gray.500', colors.gray[500]),
'--tw-border-opacity'
),
'border-width': borderWidth['DEFAULT'],
'--tw-shadow': '0 0 #0000',
},
},
{
base: [`[type='checkbox']`],
class: ['.form-checkbox'],
styles: {
'border-radius': borderRadius['none'],
},
},
{
base: [`[type='radio']`],
class: ['.form-radio'],
styles: {
'border-radius': '100%',
},
},
{
base: [`[type='checkbox']:focus`, `[type='radio']:focus`],
class: ['.form-checkbox:focus', '.form-radio:focus'],
styles: {
outline: '2px solid transparent',
'outline-offset': '2px',
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': '2px',
'--tw-ring-offset-color': '#fff',
'--tw-ring-color': resolveColor(
theme('colors.blue.600', colors.blue[600]),
'--tw-ring-opacity'
),
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)`,
},
},
{
base: [`[type='checkbox']:checked`, `[type='radio']:checked`],
class: ['.form-checkbox:checked', '.form-radio:checked'],
styles: {
'border-color': `transparent`,
'background-color': `currentColor`,
'background-size': `100% 100%`,
'background-position': `center`,
'background-repeat': `no-repeat`,
},
},
{
base: [`[type='checkbox']:checked`],
class: ['.form-checkbox:checked'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
)}")`,
'@media (forced-colors: active) ': {
appearance: 'auto',
},
},
},
{
base: [`[type='radio']:checked`],
class: ['.form-radio:checked'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
)}")`,
'@media (forced-colors: active) ': {
appearance: 'auto',
},
},
},
{
base: [
`[type='checkbox']:checked:hover`,
`[type='checkbox']:checked:focus`,
`[type='radio']:checked:hover`,
`[type='radio']:checked:focus`,
],
class: [
'.form-checkbox:checked:hover',
'.form-checkbox:checked:focus',
'.form-radio:checked:hover',
'.form-radio:checked:focus',
],
styles: {
'border-color': 'transparent',
'background-color': 'currentColor',
},
},
{
base: [`[type='checkbox']:indeterminate`],
class: ['.form-checkbox:indeterminate'],
styles: {
'background-image': `url("${svgToDataUri(
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`
)}")`,
'border-color': `transparent`,
'background-color': `currentColor`,
'background-size': `100% 100%`,
'background-position': `center`,
'background-repeat': `no-repeat`,
'@media (forced-colors: active) ': {
appearance: 'auto',
},
},
},
{
base: [`[type='checkbox']:indeterminate:hover`, `[type='checkbox']:indeterminate:focus`],
class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'],
styles: {
'border-color': 'transparent',
'background-color': 'currentColor',
},
},
{
base: [`[type='file']`],
class: null,
styles: {
background: 'unset',
'border-color': 'inherit',
'border-width': '0',
'border-radius': '0',
padding: '0',
'font-size': 'unset',
'line-height': 'inherit',
},
},
{
base: [`[type='file']:focus`],
class: null,
styles: {
outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`],
},
},
]
const getStrategyRules = (strategy) =>
rules
.map((rule) => {
if (rule[strategy] === null) return null
return { [rule[strategy]]: rule.styles }
})
.filter(Boolean)
if (strategy.includes('base')) {
addBase(getStrategyRules('base'))
}
if (strategy.includes('class')) {
addComponents(getStrategyRules('class'))
}
}
})
module.exports = forms

View File

@ -0,0 +1,9 @@
module.exports = {
content: ['./index.html', './kitchen-sink.html'],
theme: {
extend: {
//
},
},
plugins: [require('./src')],
}