Tailwind CSS Input

Easily create inputs with different status and sizes using our components based on Tailwind CSS.

Input Outline

Use this example to create outline input components.

<div class="input-group input-group-outline">
  <label class="form-label">Outline</label>
  <input type="text" class="form-control" />

Input Dynamic

Use this example to create easy-to-use dynamic input components.

<div class="input-group input-group-dynamic">
  <label class="form-label">Dynamic</label>
  <input type="text" class="form-control" />

Input Static

Use this example to create simple and versatile input components for your Tailwind CSS projects.

<div class="input-group input-group-static">
  <input type="text" class="form-control" />

Required Scrips

The input component needs a required script file to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/input.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/input.js"></script>
Edit this page on Github