Nullifying Precipitation Machine

    tailwind-forms

    1.0.6 • Public • Published

    Tailwind Forms

    Build Status Latest Release

    HEAVILY inspired by Adam Wathan's Tailwind Form Styles

    Installation

    npm install tailwind-forms

    Configuration

    // tailwind.config.js
    {
      theme: {
        ...
      },
      plugins: [
        require('tailwind-forms')(),
      ],
    }

    There are currently no options available. You can customize everything by stacking core utility classes.

    Usage

    Text Input

    <label class="block">
      <span class="text-gray-700">Name</span>
      <input type="email" class="form-input mt-1 block w-full" placeholder="John Appleseed"/>
    </label>

    Textarea

    <label class="block">
      <span class="text-gray-700">Textarea</span>
      <textarea class="form-textarea mt-1 block w-full" rows="3" placeholder="Enter some long form content."></textarea>
    </label>

    Select

    <label class="block">
      <span class="text-gray-700">Select</span>
      <select class="form-select block w-full mt-1">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </label>

    Select Multiple

    <label class="block">
      <span class="text-gray-700">Multiselect</span>
      <select class="form-multiselect block w-full mt-1" multiple>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
      </select>
    </label>

    Checkbox

    <div class="block">
      <span class="text-gray-700">Checkboxes</span>
      <div class="mt-2">
        <div>
          <label class="inline-flex items-center">
            <input type="checkbox" class="sr-only" checked/>
            <span class="form-checkbox text-blue-400" aria-hidden="true"></span>
            <span class="ml-2">Option 1</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="checkbox" class="sr-only"/>
            <span class="form-checkbox text-blue-400" aria-hidden="true"></span>
            <span class="ml-2">Option 2</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="checkbox" class="sr-only"/>
            <span class="form-checkbox text-blue-400" aria-hidden="true"></span>
            <span class="ml-2">Option 3</span>
          </label>
        </div>
      </div>
    </div>

    Changing the clicked background color

    <div class="block">
      <span class="text-gray-700">Checkboxes</span>
      <div class="mt-2">
        <div>
          <label class="inline-flex items-center">
            <input type="checkbox" class="sr-only" checked/>
            <span class="form-checkbox text-indigo-600" aria-hidden="true"></span>
            <span class="ml-2">Option 1</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="checkbox" class="sr-only" checked/>
            <span class="form-checkbox text-blue-500" aria-hidden="true"></span>
            <span class="ml-2">Option 2</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="checkbox" class="sr-only" checked/>
            <span class="form-checkbox text-pink-600" aria-hidden="true"></span>
            <span class="ml-2">Option 3</span>
          </label>
        </div>
      </div>
    </div>

    Radio Button

    <div class="block">
      <span class="text-gray-700">Radio Buttons</span>
      <div class="mt-2">
        <div>
          <label class="inline-flex items-center">
            <input type="radio" class="sr-only" name="radio" value="1" checked/>
            <span class="form-radio text-blue-400" aria-hidden="true"></span>
            <span class="ml-2">Option 1</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="radio" class="sr-only" name="radio" value="2"/>
            <span class="form-radio text-blue-400" aria-hidden="true"></span>
            <span class="ml-2">Option 2</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="radio" class="sr-only" name="radio" value="3"/>
            <span class="form-radio text-blue-400" aria-hidden="true"></span>
            <span class="ml-2">Option 3</span>
          </label>
        </div>
      </div>
    </div>

    Changing the checked background color

    <div class="block">
      <span class="text-gray-700">Radio Buttons</span>
      <div class="mt-2">
        <div>
          <label class="inline-flex items-center">
            <input type="radio" class="sr-only" name="radio-colors" value="1" checked/>
            <span class="form-radio text-indigo-600" aria-hidden="true"></span>
            <span class="ml-2">Option 1</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="radio" class="sr-only" name="radio-colors" value="2"/>
            <span class="form-radio text-blue-500" aria-hidden="true"></span>
            <span class="ml-2">Option 2</span>
          </label>
        </div>
        <div>
          <label class="inline-flex items-center">
            <input type="radio" class="sr-only" name="radio-colors" value="3"/>
            <span class="form-radio text-pink-600" aria-hidden="true"></span>
            <span class="ml-2">Option 3</span>
          </label>
        </div>
      </div>
    </div>

    Input Groups

    <!-- Button Right -->
    <div class="form-input-group w-1/2 mx-auto mb-4 relative">
      <input type="text" class="form-input form-input-group-left relative" placeholder="Username">
      <div class="form-input-group-right">
        <button class="bg-blue-600 text-white px-6 hover:bg-blue-500">Submit</button>
      </div>
    </div>
      
    <!--  Text Right  -->
    <div class="form-input-group w-1/2 mx-auto mb-4 relative">
      <input type="text" class="form-input form-input-group-left relative" placeholder="john_doe">
      <div class="form-input-group-right">
        <span class="bg-gray-300 text-gray-600">@example.com</span>
      </div>
    </div>
      
    <!--  Button Left  -->
    <div class="form-input-group w-1/2 mx-auto mb-4 relative">
      <div class="form-input-group-left">
        <button class="bg-blue-600 text-white px-6 hover:bg-blue-500">Submit</button>
      </div>
      <input type="text" class="form-input form-input-group-right" placeholder="Username">
    </div>
      
    <!--  Text Left  -->
    <div class="form-input-group w-1/2 mx-auto mb-4 relative">
      <div class="form-input-group-left">
        <span class="bg-gray-300 text-gray-600">@</span>
      </div>
      <input type="text" class="form-input form-input-group-right" placeholder="Username">
    </div>

    Install

    npm i tailwind-forms

    DownloadsWeekly Downloads

    154

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    190 kB

    Total Files

    10

    Last publish

    Collaborators

    • geoff_selby