Skip to content
A better base for styling form elements with Tailwind CSS.
JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Add build script for CDN version Sep 4, 2019
dist Add build script for CDN version Sep 4, 2019
docs Merge pull request #26 from CharlesOkwuagwu/patch-1 Oct 8, 2019
scripts Add build script for CDN version Sep 4, 2019
src Use flatMap from lodash instead of node 11 Jun 21, 2019
.gitignore
.npmignore npmignore docs and other unnecessary files May 21, 2019
LICENSE Create LICENSE May 21, 2019
README.md Add --save-dev Jun 30, 2019
package-lock.json 0.2.1 Sep 4, 2019
package.json 0.2.1 Sep 4, 2019
screenshot.png Add screenshot to README May 22, 2019

README.md

Tailwind CSS Custom Forms

Out of the box, selects, checkboxes, and radios look awful in Tailwind and the only way to make them look better is with custom CSS.

The goal of this project is to provide a better starting point for form elements that is still fairly unopinionated, and easy to customize by adding utilities instead of having to write complicated CSS rules.

Demo

Screenshot

Install

  1. Install the plugin:
# Using npm
npm install @tailwindcss/custom-forms --save-dev

# Using Yarn
yarn add @tailwindcss/custom-forms -D
  1. Add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/custom-forms')
  ]
}

Documentation

The project is still early but basic documentation can be found here:

Read the documentation

Local development

  1. Clone the repository:

    git clone https://github.com/tailwindcss/custom-forms.git tailwindcss-custom-forms
    
    cd tailwindcss-custom-forms
  2. Install the dependencies:

    # Using npm
    npm install
    
    # Using Yarn
    yarn
  3. Start the development server:

    # Using npm
    npm run dev
    
    # Using Yarn
    yarn run dev

    Now you should be able to see the demo/docs running at localhost:3000.

You can’t perform that action at this time.