prefabui
v1.0.1
Published
Reusable Tailwind CSS plugin with modular UI components
Maintainers
hellouxpavelReadme
PrefabUI
PrefabUI is a reusable Tailwind CSS plugin that lets you bundle utility classes into named reusable classes like .btn-primary, .card, .badge, etc.
🚀 Installation
npm install prefabui🧩 Usage
In your tailwind.config.js:
const prefabui = require("prefabui");
module.exports = {
content: ["./src/**/*.{html,js}"],
plugins: [prefabui],
};🧪 Available Utilities
.btn-primary- Blue button with hover effect.card- Padded white card with shadow.badge- Pill-style badge
🎨 Themes
Switch the theme using a class on <html>:
<!-- Default Theme -->
<button class="btn-secondary">Secondary</button>
<!-- Cupcake Theme -->
<html class="theme-cupcake">
<button class="btn-secondary">Cupcake Secondary</button>
</html>
<!-- High Contrast Theme -->
<html class="theme-highcontrast">
<button class="btn-secondary">Contrast Secondary</button>
</html>✨ Available Themes
- Default
- Cupcake
- High Contrast
Overriding Styles
PrefabUI components can be overridden using @layer components.
@layer components {
.btn-primary {
@apply bg-red-600 hover:bg-red-800;
}
}
## 📄 License
MIT