• This repository has been archived on 11/Sep/2021
  • Stars
    star
    1,557
  • Rank 28,986 (Top 0.6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A better base for styling form elements with Tailwind CSS.

This project is not compatible with Tailwind CSS v2.0+ and has been deprecated in favor of @tailwindcss/forms.

You can still use this if you are on Tailwind CSS v1.x, but we recommend updating to v2.0 and migrating to @tailwindcss/forms if possible.


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.

More Repositories

1

tailwindcss

A utility-first CSS framework for rapid UI development.
HTML
77,154
star
2

headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
TypeScript
23,838
star
3

heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
JavaScript
20,391
star
4

prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
JavaScript
4,549
star
5

tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
HTML
3,862
star
6

tailwindcss-typography

Beautiful typographic defaults for HTML you don't control.
JavaScript
3,513
star
7

tailwindcss.com

The Tailwind CSS documentation website.
MDX
3,066
star
8

tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
TypeScript
2,635
star
9

tailwindcss-jit

JavaScript
2,197
star
10

tailwindcss-line-clamp

A plugin that provides utilities for visually truncating text after a fixed number of lines.
JavaScript
1,152
star
11

tailwindcss-aspect-ratio

JavaScript
905
star
12

tailwindcss-container-queries

A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
TypeScript
877
star
13

designing-with-tailwindcss

Source code for the "Designing with Tailwind CSS" course.
CSS
705
star
14

heroicons.com

JavaScript
697
star
15

tailwindcss-setup-examples

679
star
16

tailwindui-vue

Deprecated, please use the Headless UI repo instead.
JavaScript
650
star
17

play.tailwindcss.com

JavaScript
638
star
18

tailwindcss-playground

HTML
516
star
19

tailwindui-react

Deprecated, please use the Headless UI repo instead.
TypeScript
432
star
20

tailwindcss-from-zero-to-production

Source code for the "Tailwind CSS Up and Running" screencast series.
JavaScript
369
star
21

blog.tailwindcss.com

JavaScript
340
star
22

tailwindui-issues

Bug fixes and feature request tracking for Tailwind UI.
231
star
23

webpack-starter

A quick and simple example of using Tailwind CSS with Webpack.
JavaScript
216
star
24

tailwindcss-plugin-examples

Examples to help you get started building your own Tailwind CSS plugins.
JavaScript
208
star
25

discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
171
star
26

tailwind-play-api

PHP
44
star
27

minimal-tailwind-postcss-plugin

A simple PostCSS plugin designed to cover all of the tricky integration points a build-tool needs to support for Tailwind CSS.
JavaScript
10
star
28

reproduction-headlessui-vue

JavaScript
8
star