tailwindchina-buttons v1.0.4
tailwindchina-buttons
A TailwindCSS plugin that provides a set of button components based on the TailwindCSS palette.
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
3 years ago