Negligent Parachute Maintainers

    tailwindchina-buttons

    1.0.4 • Public • Published

    tailwindchina-buttons

    A TailwindCSS plugin that provides a set of button components based on the TailwindCSS palette.

    tailwindchina-buttons

    Installation

    Install the plugin from npm:

    # Using npm
    npm install tailwindchina-buttons
    
    # Using yarn
    yarn add tailwindchina-buttons
    

    The add the plugin to your tailwind.config.js file:

    // tailwind.config.js
    module.exports = {
        theme: {
            // ...
        },
        plugins: [
            require('tailwindchina-buttons')
        ],
    }
    

    Usage

    Apply the btn btn-{color} utilities to button or a element.

    Colors

    By default, this plugin provides 8 colors of button components corresponding to the TailwindCSS's default color palette.

    They are gray, red, yellow, green, blue, indigo, purple, pink.

    <button class="btn btn-gray">btn-gray</button>
    <button class="btn btn-red">btn-red</button>
    <button class="btn btn-yellow">btn-yellow</button>
    <button class="btn btn-green">btn-green</button>
    <button class="btn btn-blue">btn-blue</button>
    <button class="btn btn-indigo">btn-indigo</button>
    <button class="btn btn-purple">btn-purple</button>
    <button class="btn btn-pink">btn-pink</button>
    
    <a href="#" class="btn btn-gray">btn-gray</a>
    <a href="#" class="btn btn-red">btn-red</a>
    <a href="#" class="btn btn-yellow">btn-yellow</a>
    <a href="#" class="btn btn-green">btn-green</a>
    <a href="#" class="btn btn-blue">btn-blue</a>
    <a href="#" class="btn btn-indigo">btn-indigo</a>
    <a href="#" class="btn btn-purple">btn-purple</a>
    <a href="#" class="btn btn-pink">btn-pink</a>
    

    Sizes

    This plugin provides 5 sizes by default. Besides the default size, you can use the btn-{xs/sm/lg/xl} utility class to specify different sizes.

    <button class="btn btn-gray btn-xs">btn-xs</button>
    <button class="btn btn-red btn-sm">btn-sm</button>
    <button class="btn btn-yellow">default size</button>
    <button class="btn btn-green btn-lg">btn-lg</button>
    <button class="btn btn-blue btn-xl">btn-xl</button>
    

    Configuration

    You can configure which button components will be generated in the buttonColors section of the tailwind.config.js file.

    module.exports = {
        theme: {
            buttonColors: [
                'red',
                'green',
                'yellow',
            ],
        },
    }
    

    You can also configure which size utilities are generated in the buttonSizes section of the tailwind.config.js file.

    module.exports = {
        theme: {
            buttonSizes: {
                xs: ['1.5rem', '0.5rem', '12px'],
                sm: ['2rem', '1rem', '14px'],
                DEFAULT: ['2.5rem', '1.5rem', '16px'],
                lg: ['3rem', '2rem', '18px'],
                xl: ['3.5rem', '2.5rem', '20px'],
            },
        },
    }
    

    License

    MIT

    Keywords

    none

    Install

    npm i tailwindchina-buttons

    DownloadsWeekly Downloads

    2

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    6.12 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar