Installations
npm install tailwind-colorscheme-pluginDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
22.9.0
NPM Version
10.8.3
Score
42.5
Supply Chain
95.3
Quality
74.6
Maintenance
100
Vulnerability
98.9
License
Releases
Unable to fetch releases
Contributors
Download Statistics
Total Downloads
148
Last Day
1
Last Week
3
Last Month
6
Last Year
148
Maintainers
Package Meta Information
Latest Version
1.0.1
Package Id
tailwind-colorscheme-plugin@1.0.1
Unpacked Size
8.17 kB
Size
3.12 kB
File Count
7
NPM Version
10.8.3
Node Version
22.9.0
Publised On
24 Sept 2024
Total Downloads
Cumulative downloads
Total Downloads
148
Last day
0%
1
Compared to previous day
Last week
200%
3
Compared to previous week
Last month
20%
6
Compared to previous month
Last year
0%
148
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Tailwind ColorScheme Plugin
A Tailwind CSS plugin that generates accessible, stylish button components using chroma-js. This plugin ensures all buttons meet WCAG 2.1 contrast requirements, supports all basic Tailwind CSS colors, allows for custom colors, and includes styling for all button states using classes and pseudo-classes.
Features
- WCAG 2.1 Compliance: Ensures text and background color combinations meet accessibility standards.
- All Tailwind Colors: Automatically generates button styles for all default Tailwind CSS colors.
- Custom Colors: Easily add and use your own color schemes.
- State Styles: Includes hover, active, and focus states with appropriate styling.
- Simple Integration: Packaged as a single npm package for effortless installation and use.
Installation
Install the plugin via npm:
1npm install tailwind-colorscheme-plugin
1pnpm install tailwind-colorscheme-plugin
Prerequisites
- Tailwind CSS: Make sure you have Tailwind CSS installed and configured in your project.
- Node.js and npm: Ensure you have Node.js and npm installed to manage packages.
Getting Started
-
Configure Tailwind CSS
Add the plugin to your tailwind.config.js file. You can also pass custom colors if needed.
1// tailwind.config.js 2 3module.exports = { 4 theme: { 5 // Your existing theme configuration 6 }, 7 plugins: [ 8 require('tailwind-colorscheme-plugin')({ 9 customColors: { 10 customBlue: '#1e40af', 11 customGreen: '#10b981', 12 // Add more custom colors as needed 13 }, 14 }), 15 ], 16};
-
Use the Button Classes in Your HTML
Apply the generated button classes to your elements:
1<button class="btn-blue">Blue Button</button> 2<button class="btn-red">Red Button</button> 3<button class="btn-green">Green Button</button> 4<button class="btn-customBlue">Custom Blue Button</button>
-
Customize as Needed
The plugin generates buttons with default padding, border-radius, and other styles. You can customize these by editing the plugin's code or overriding the styles in your CSS.
Button States and Pseudo-Classes
The plugin includes styling for various button states using pseudo-classes:
- Hover:
&:hoveradjusts the background color for hover effects. - Active:
&:activemodifies the background color when the button is active. - Focus:
&:focusadds an outline to improve accessibility and user experience.
Accessibility Compliance
The plugin uses chroma-js to calculate color contrast ratios, ensuring that all buttons meet or exceed WCAG 2.1 guidelines. This is crucial for creating accessible web applications that are usable by everyone.
Custom Colors
You can extend the default color palette by providing custom colors in the plugin options:
1require('tailwind-colorscheme-plugin')({ 2 customColors: { 3 // Define your custom colors here 4 customPurple: '#6b21a8', 5 customOrange: '#ea580c', 6 }, 7});
These colors can then be used just like the default colors:
1<button class="btn-customPurple">Custom Purple Button</button> 2<button class="btn-customOrange">Custom Orange Button</button>
Full Example
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Tailwind Button Plugin Example</title> 6 <link href="path/to/your/output.css" rel="stylesheet"> 7</head> 8<body> 9 <button class="btn-blue">Blue Button</button> 10 <button class="btn-red">Red Button</button> 11 <button class="btn-green">Green Button</button> 12 <button class="btn-customBlue">Custom Blue Button</button> 13 <button class="btn-customPurple">Custom Purple Button</button> 14</body> 15</html>
Contribution
Contributions are welcome! If you have suggestions or find any issues, please open an issue or submit a pull request on the GitHub repository.
License
This project is licensed under the MIT License. See the LICENSE file for details.
Acknowledgments
No vulnerabilities found.
No security vulnerabilities found.