Brunobkr/llama.cpp_AlgMor24_github

1# @tailwindcss/forms2 3A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.4 5## Installation6 7Install the plugin from npm:8 9```sh10npm install -D @tailwindcss/forms11```12 13Then add the plugin to your `tailwind.config.js` file:14 15```js16// tailwind.config.js17module.exports = {18  theme: {19    // ...20  },21  plugins: [22    require('@tailwindcss/forms'),23    // ...24  ],25}26```27 28## Basic usage29 30[**View the live demo**](https://tailwindcss-forms.vercel.app/)31 32All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.33 34Currently we add basic utility-friendly form styles for the following form element types:35 36- `input[type='text']`37- `input[type='password']`38- `input[type='email']`39- `input[type='number']`40- `input[type='url']`41- `input[type='date']`42- `input[type='datetime-local']`43- `input[type='month']`44- `input[type='week']`45- `input[type='time']`46- `input[type='search']`47- `input[type='tel']`48- `input[type='checkbox']`49- `input[type='radio']`50- `select`51- `select[multiple]`52- `textarea`53 54Every 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:55 56```html57<!-- You can actually customize padding on a select element now: -->58<select class="rounded-full px-4 py-3">59  <!-- ... -->60</select>61 62<!-- Or change a checkbox color using text color utilities: -->63<input type="checkbox" class="rounded text-pink-500" />64```65 66More customization examples and best practices coming soon.67 68### Using classes to style69 70In 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.71 72```html73<input type="email" class="form-input rounded-full px-4 py-3" />74 75<select class="form-select rounded-full px-4 py-3">76  <!-- ... -->77</select>78 79<input type="checkbox" class="form-checkbox rounded text-pink-500" />80```81 82Here is a complete table of the provided `form-*` classes for reference:83 84| Base                      | Class              |85| ------------------------- | ------------------ |86| `[type='text']`           | `form-input`       |87| `[type='email']`          | `form-input`       |88| `[type='url']`            | `form-input`       |89| `[type='password']`       | `form-input`       |90| `[type='number']`         | `form-input`       |91| `[type='date']`           | `form-input`       |92| `[type='datetime-local']` | `form-input`       |93| `[type='month']`          | `form-input`       |94| `[type='search']`         | `form-input`       |95| `[type='tel']`            | `form-input`       |96| `[type='time']`           | `form-input`       |97| `[type='week']`           | `form-input`       |98| `textarea`                | `form-textarea`    |99| `select`                  | `form-select`      |100| `select[multiple]`        | `form-multiselect` |101| `[type='checkbox']`       | `form-checkbox`    |102| `[type='radio']`          | `form-radio`       |103 104### Using only global styles or only classes105 106Although 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.107 108If 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.109 110```js111// tailwind.config.js112plugins: [113  require("@tailwindcss/forms")({114    strategy: 'base', // only generate global styles115    strategy: 'class', // only generate classes116  }),117],118```119 120When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.121 122When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.123