Tailwind Css Base Buttons

View on github

This plugin adds a bunch of base button classes in your Tailwindcss components which can be customized based on your theme colors.

Getting Started

Installation

1. Install the plugin:

npm install tailwindcss-base-buttons --save-dev

2. Add it inside your tailwind.config.js

module.exports = {
    // ...
    plugins: [
        require('tailwindcss-base-buttons')()
    ]
}

Documentation

Out of the box the plugin will generate these types of buttons that you can use inside your theme.

Theme Colors

These classes are theme based colors. Ex: .btn-primary. Other options are secondary, danger, default & disabled.

Tailwinds' default colors

Colors are the default Tailwind colors. Ex: .btn-indigo.

Outlined

These are outlined button based on default and theme colors. Ex: .btn-outlined-primary.

Outlined buttons can also have a solid color on hover. Ex: .btn-outlined-alt-primary.

Gradient

These are gradient buttons based on default and theme colors. Ex: .btn-gradient-primary or .btn-gradient-indigo.

Rounded

Add .btn-rounded class to your buttons to make it rounded.

Sizes

These are button size classes. Ex: .btn-xs. Other options are sm, md(default), lg, xl.

Customization

The appearance of the button can be customized by passing an option object as a first argument of the plugin.

module.exports = {
    // ...
    plugins: [
        require('tailwindcss-base-buttons')({
            baseClass: '.button',
            borderRadius: '.5rem',
            padding: '.5rem 1rem',
            colors: {
                theme: {
                    primary: {
                        background: red,
                        text: white
                    },
                    secondary: {
                        background: blue,
                        text: black
                    }
                }
            }
        })
    ]
}

The example above will generate classes like .button-* with a border-radius .5rem and padding .5rem 1rem. The theme colors generated would be .button-primary & .button-secondary.

You can also add your custom button styles by adding an object or a callback that generates your button style object as a second argument.

Using a object

This option is suited when you want to add a single button style.

module.exports = {
    // ...
    plugins: [
        require('tailwindcss-base-buttons')({
            baseClass: '.btn'
        },{
            '.btn-sample': {
                color: 'red',
                width: '200px'
            }
        })
    ]
}

This adds a .btn-sample class.

Using an callback

When you want to add multiple styles using a callback is more suited. You can access the colorConfig and options object inside your callback.

 module.exports = {
    // ...
    plugins: [
        require('tailwindcss-base-buttons')({
            baseClass: '.btn'
        },(colorConfig, options) => {

            let additionalStyles = {};

            Object.entries(colorConfig, config => {

                let [key, properties] = config;

                Object.assign(additionalStyles, {
                    [`${options.baseClass}-sample-${key}`]: {
                        backgroundColor: properties['background'],
                        width: '200px'
                    }
                })
            });

            return additionalStyles;
        })
    ]
}

This will add a couple of classes like .btn-sample-primary or .btn-sample-indigo.

Global options

These options are applied on all buttons.

Option	Default	Description
baseClass	.btn	This is the base class of your buttons. Ex: .btn-sample-primary or .btn-primary
borderRadius	.25rem	The default border radius of the buttons
borderWidth	1	Border width for outlined buttons
colors	{default\|theme}	Contains color configuration options for default and theme colors
cursor	pointer	Default cursor for the button
fontSize	1rem	Default font size
fontWeight	500	Default font weight
lineHeight	1.25	Default line height
padding	.75em 1.5em	Default padding
sizes	{xs\|sm\|md\|lg\|xs}	The default configuration for button sizes
transition	all .2s ease-out	The default transition of the buttons

Local options

These options are for specific button styles. Add these options if you want a certain button style to have specific properties.

Option	Description
activeBackground	Background color when active
activeBorderColor	Border color when active
activeBorderWidth	Border width when active
activeText	Text color when active
background	These applies to either background color or border color of the button.
cursor	Buttons cursor
hoverBackground	Background color when hovered
hoverBorderColor	Border color when hovered
hoverBorderWidth	Border width when hovered
hoverText	Text color when hovered
opacity	Buttons' opacity
pointerEvents	Button's pointer events
text	Button's text color

Size options

Option	Description
fontSize	Button's font size
padding	Button's padding

Example configuration

module.exports = {
    // ...
    plugins: [
        require('tailwindcss-base-buttons')({
            baseClass: '.button',
            borderRadius: '.5rem',
            padding: '.5rem 1rem',
            colors: {
                theme: {
                    primary: {
                        activeBackground: pink,
                        background: red,
                        hoverBackground: pink,
                        hoverBorderColor: black,
                        text: white
                    },
                    secondary: {
                        background: blue,
                        opacity: '.5',
                        pointerEvents: 'none'
                        text: black
                    }
                }
            },
            sizes: {
                '2xl': {
                    fontSize: '2rem',
                    padding: '1.2rem 2.3rem'
                }
            }
        })
    ]
}