# How to Style a Bootstrap Autocomplete Input Field with Tailwind CSS
> Style Bootstrap autocomplete inputs with Tailwind CSS. Learn how to integrate Tailwind Forms plugin and apply utility classes for a custom look that matches your site.
- Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- Tags: how-to-guide
- Published: 2026-02-18
---
**You can completely customize a Bootstrap autocomplete input field by installing Tailwind CSS alongside the `@tailwindcss/forms` plugin to reset native browser styles, then applying utility classes like `border`, `rounded`, and `focus:ring` to match your site's design system.**
To style a Bootstrap autocomplete input field effectively, you need to leverage Tailwind CSS's layered architecture for form controls. The tailwindlabs/tailwindcss repository provides a **Preflight** base layer via [`packages/tailwindcss/preflight.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css) that normalizes form elements across browsers, while the optional **Forms plugin** supplies semantic classes like `form-input` specifically designed to strip native UI chrome from inputs with autocomplete functionality.
## Understanding Tailwind's Form Styling Architecture
Tailwind CSS handles form styling through three distinct layers that work together to replace Bootstrap's default appearance with utility-first designs.
### The Preflight Base Layer
The [`preflight.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/preflight.css) file located at [`packages/tailwindcss/preflight.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css) provides the foundation. This CSS reset normalizes form controls by removing default margins and specifically handling autocomplete-related pseudo-elements. For example, it resets `::-webkit-search-decoration` and removes Firefox's invalid state box-shadow via `:-moz-ui-invalid`, ensuring hidden elements stay hidden and that form controls start from a consistent baseline regardless of the browser's default autocomplete styling.
### The Forms Plugin Layer
The `@tailwindcss/forms` plugin—loaded through the standalone entry point at `packages/@tailwindcss-standalone/src/index.ts`—adds component classes including `form-input`, `form-select`, and `form-autocomplete`. These classes apply `appearance-none` to remove browser-specific UI such as dropdown arrows on search inputs or the clear button that appears in autocomplete fields. By requiring this plugin in your [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js), you gain access to reset classes that layer on top of Preflight's normalization.
### The Utility Layer
After normalization, Tailwind's utility classes take effect. Classes like `border-gray-300`, `rounded-md`, `bg-white`, and `focus:ring-2` apply directly to the now-unstyled input element. Because the Forms plugin has already stripped the native appearance, these utilities affect the Bootstrap autocomplete input field exactly as intended, allowing you to rebuild the design without fighting browser defaults.
## Installation and Configuration
Before styling the input, you must install Tailwind CSS and enable the Forms plugin.
### Install Dependencies
Run the following commands to add Tailwind CSS and the official Forms plugin to your project:
```bash
npm install -D tailwindcss@latest @tailwindcss/forms
npx tailwindcss init
```
### Configure the Plugin
Add the Forms plugin to your [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) file to enable the `form-input` and related classes:
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,tsx,jsx}'],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/forms')],
};
```
The plugin is essential because it removes default browser UI—such as the spinner arrows on number inputs and the "X" clear button on search inputs—and supplies Tailwind-compatible reset classes. This implementation loads through the package entry point as referenced in the repository's standalone source.
## Styling the Bootstrap Autocomplete Input Field
With the architecture in place, apply Tailwind utilities to transform the Bootstrap autocomplete input field into a custom-styled component.
### Basic Autocomplete Implementation
Use the `form-input` class combined with utility classes to style a native HTML5 autocomplete input. The `datalist` element provides the suggestions while Tailwind handles the visual design:
```html
```
The `form-input` class applies the critical `appearance-none` declaration that strips the native dropdown arrow and clear buttons, while `block w-full` ensures the input fills its container. The `rounded-md` and `border-gray-300` classes replicate familiar border radius and color, and the `focus:` variants create a custom focus ring using your brand's primary color.
### Replicating Bootstrap Input Groups
Bootstrap often wraps inputs in **input groups** with attached icons or buttons. Replicate this pattern using Tailwind's flexbox utilities and the `focus-within:` variant to maintain focus states on the wrapper:
```html
```
Here, `focus-within:` utilities applied to the parent `div` ensure the border and ring change color when the internal input receives focus. The `rounded-none` and `border-0` classes on the input prevent double borders and conflicting border radius, allowing the wrapper's styles to dominate.
### Adding Dark Mode Support
Tailwind's `dark:` variant works immediately with form inputs. Prefix utility classes with `dark:` to invert colors when users prefer dark themes:
```html
```
This approach maintains the autocomplete functionality while ensuring the input field matches both light and dark design systems without additional custom CSS.
## Framework Integration Example
For React applications, implement the styled autocomplete as a reusable component. The `form-input` class from the `@tailwindcss/forms` plugin provides the same reset regardless of framework:
```tsx
import React from 'react';
export default function SearchAutocomplete() {
return (
);
}
```
This component uses the `form-input` class to ensure consistent styling across browsers, leveraging the Preflight reset defined in [`packages/tailwindcss/preflight.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css) and the Forms plugin's normalization.
## Summary
- **Install the Forms plugin**: Add `@tailwindcss/forms` to your project via npm and enable it in [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) to access reset classes like `form-input`.
- **Leverage Preflight**: The base layer in [`packages/tailwindcss/preflight.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css) normalizes browser defaults for autocomplete pseudo-elements such as `::-webkit-search-decoration`.
- **Apply utility classes**: Use Tailwind utilities (`border`, `rounded`, `bg`, `focus:`, `dark:`) to rebuild the visual design, knowing that `appearance-none` from the Forms plugin prevents native UI interference.
- **Handle complex layouts**: Use `focus-within:` on wrapper elements to create Bootstrap-style input groups with icons or buttons while maintaining consistent focus states.
- **Maintain accessibility**: Keep semantic HTML structure with `label` elements and `datalist` for autocomplete functionality while applying purely presentational utilities.
## Frequently Asked Questions
### Does the `@tailwindcss/forms` plugin remove the browser's autocomplete dropdown arrow?
Yes. The plugin applies `appearance-none` and specific resets for WebKit and Mozilla browsers. According to the source in [`packages/tailwindcss/preflight.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css), it handles `::-webkit-search-decoration` and similar pseudo-elements to remove native chrome, allowing your custom styles to control the visual presentation completely.
### Can I use Tailwind CSS alongside Bootstrap without conflicts?
While possible, the most effective approach to style a Bootstrap autocomplete input field with Tailwind CSS involves letting Tailwind's Preflight layer replace Bootstrap's reboot styles. Import Tailwind after Bootstrap in your CSS cascade, or use the Forms plugin classes to explicitly override Bootstrap's form-control styles on specific inputs you want to customize.
### How do I style the autocomplete suggestion list itself (the datalist dropdown)?
Browser support for styling the `datalist` dropdown is limited because it uses the operating system's native dropdown menu. The `form-input` class and Tailwind utilities style the input field itself, but the suggestion list inherits system styling. For fully custom dropdown designs, implement a custom React, Vue, or vanilla JavaScript component instead of using the native `datalist` element.
### Is the `form-input` class required, or can I use standard Tailwind utilities alone?
You can use standard utilities, but the `form-input` class is strongly recommended. Without it, browsers apply default styling to autocomplete inputs—such as the clear button on search types or inner shadows on iOS—that utilities alone cannot override. The class applies the `appearance-none` reset and baseline focus styles defined in the plugin's source, ensuring consistent cross-browser behavior.