{"_id":"@01sadra/tailwind-neobrutalism","name":"@01sadra/tailwind-neobrutalism","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@01sadra/tailwind-neobrutalism","version":"0.1.0","description":"A comprehensive Tailwind CSS plugin for neobrutalism design with RTL/Farsi support","main":"index.js","types":"types/index.d.ts","keywords":["tailwindcss","plugin","neobrutalism","rtl","farsi","persian","components","css","design-system"],"author":{"name":"FeedFuse"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/01sadra/tailwind-neobrutalism.git"},"homepage":"https://01sadra.github.io/tailwind-neobrutalism","bugs":{"url":"https://github.com/01sadra/tailwind-neobrutalism/issues"},"peerDependencies":{"tailwindcss":">=3.3.0"},"devDependencies":{"autoprefixer":"^10.4.16","gh-pages":"^6.3.0","postcss":"^8.4.31","tailwindcss":"^3.3.5"},"scripts":{"demo":"cd demo && npm run build-once","demo:dev":"cd demo && npm run build","demo:serve":"cd demo && npm run serve","test":"npm run demo","prepublishOnly":"npm run test","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"engines":{"node":">=14.0.0"},"_id":"@01sadra/tailwind-neobrutalism@0.1.0","gitHead":"4c410f2c47a45d17e87b8e9b6ad6c009e4e9f22a","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-F921VmG7dBnVgzxz5ySa0g20Kr+cLb9pFoA8u1iR110XqZXJrL4Sl3yF3syTX6kyiwbnn7w2An9vkMhLNgQB4A==","shasum":"33a5857c95854945360f9a24c5569be8c1461d93","tarball":"https://registry.npmjs.org/@01sadra/tailwind-neobrutalism/-/tailwind-neobrutalism-0.1.0.tgz","fileCount":6,"unpackedSize":41789,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGbFzVTBorKdYvexQHAJMUh9+f11j/R7h+fJ/sJoj+dgAiEA0JYmq1PUuxVJptH1f1w5pAEaZGziPn4O7O4DfqJgXpk="}]},"_npmUser":{"name":"01sadra","email":"01sadra@gmail.com"},"directories":{},"maintainers":[{"name":"01sadra","email":"01sadra@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwind-neobrutalism_0.1.0_1754907919105_0.17783500199142765"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-11T10:25:18.980Z","0.1.0":"2025-08-11T10:25:19.322Z","modified":"2025-08-11T10:25:19.615Z"},"maintainers":[{"name":"01sadra","email":"01sadra@gmail.com"}],"description":"A comprehensive Tailwind CSS plugin for neobrutalism design with RTL/Farsi support","homepage":"https://01sadra.github.io/tailwind-neobrutalism","keywords":["tailwindcss","plugin","neobrutalism","rtl","farsi","persian","components","css","design-system"],"repository":{"type":"git","url":"git+https://github.com/01sadra/tailwind-neobrutalism.git"},"author":{"name":"FeedFuse"},"bugs":{"url":"https://github.com/01sadra/tailwind-neobrutalism/issues"},"license":"MIT","readme":"# @01sadra/tailwind-neobrutalism\n\n🔥 **A comprehensive Tailwind CSS plugin for neobrutalism design with full RTL/Farsi support**\n\n[![NPM Version](https://img.shields.io/npm/v/@01sadra/tailwind-neobrutalism.svg)](https://www.npmjs.com/package/@01sadra/tailwind-neobrutalism)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![RTL Support](https://img.shields.io/badge/RTL-Supported-green.svg)](#rtl--farsi-support)\n\n## ✨ Features\n\n- 🎨 **40+ Brutal Components** - Complete library of neobrutalism UI components\n- 🌍 **RTL/Farsi Support** - Full bidirectional text support with Persian fonts\n- 🎯 **Customizable Theming** - Easy color, font, and spacing customization\n- 📱 **Responsive Design** - Mobile-first responsive components\n- ♿ **Accessibility** - WCAG 2.1 AA compliant components\n- 🎭 **Dark Mode Ready** - Built-in dark theme support\n- 📦 **TypeScript** - Full TypeScript definitions included\n- 🚀 **Performance** - Tree-shakeable and optimized bundle size\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @01sadra/tailwind-neobrutalism\n```\n\n### Basic Setup\n\nAdd the plugin to your `tailwind.config.js`:\n\n```javascript\nmodule.exports = {\n content: [\"./src/**/*.{html,js,tsx,jsx}\"],\n plugins: [\n require('@01sadra/tailwind-neobrutalism')()\n ],\n}\n```\n\n### Your First Brutal Component\n\n```html\n\n
\n

Hello Brutalism!

\n

This is a brutal card with shadow effects.

\n
\n```\n\n## 🎨 Component Library\n\n### Buttons\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### Forms\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n### Cards\n```html\n
Basic Card
\n
Hoverable Card
\n
Dark Card
\n
Primary Card
\n```\n\n### Navigation\n```html\n\n\n\n\n```\n\n### Data Display\n```html\n\nDefault\nSuccess\nError\n\n\n
\n
\n
\n\n\n
Information alert
\n
Success message
\n
Warning message
\n
Error message
\n```\n\n### Tables\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ProductPriceStock
Laptop$99915
\n```\n\n### Interactive Elements\n```html\n\n
\n \n
\n Item 1\n Item 2\n
\n
\n\n\n
\n
\n \n \n
\n
\n Tab content goes here\n
\n
\n\n\n
\n \n \n \n \n
\n```\n\n## 🌍 RTL & Farsi Support\n\n### Enable RTL Mode\n\n```html\n\n\n \n\n\n \n\n\n```\n\n### RTL-Aware Components\n\nAll components automatically adapt to RTL layout:\n\n```html\n\n
\n

عنوان فارسی

\n

این متن در راست به چپ نمایش داده می‌شود

\n
\n\n\n```\n\n### Persian Typography\n\n```html\n\n
\n

عنوان فارسی

\n

متن فارسی با فونت مناسب

\n
\n```\n\n## ⚙️ Customization\n\n### Basic Configuration\n\n```javascript\nmodule.exports = {\n plugins: [\n require('@01sadra/tailwind-neobrutalism')({\n colors: {\n brutal: {\n primary: '255 235 59', // Yellow\n secondary: '76 175 80', // Green\n accent: '233 30 99', // Pink\n warning: '255 152 0', // Orange\n error: '244 67 54', // Red\n },\n youtube: {\n red: '255 0 0',\n dark: '40 40 40',\n white: '255 255 255',\n // ... more colors\n }\n },\n fonts: {\n sans: ['Space Grotesk', 'Inter', 'system-ui'],\n mono: ['JetBrains Mono', 'Consolas', 'monospace'],\n farsi: ['Vazirmatn', 'IRANSans', 'Tahoma']\n },\n shadows: {\n x: '4px',\n y: '4px',\n xHover: '2px',\n yHover: '2px'\n },\n borderRadius: {\n brutal: '5px'\n },\n borderWidth: {\n brutal: '2px'\n }\n })\n ]\n}\n```\n\n### Theme Presets\n\n#### YouTube Theme (Default)\n```javascript\nrequire('@01sadra/tailwind-neobrutalism')({\n // Default YouTube-inspired colors\n})\n```\n\n#### Custom Color Schemes\n\n```javascript\n// Spotify-inspired\nrequire('@01sadra/tailwind-neobrutalism')({\n colors: {\n brutal: {\n primary: '30 215 96', // Spotify Green\n secondary: '0 0 0', // Black\n accent: '255 255 255', // White\n }\n }\n})\n\n// Discord-inspired \nrequire('@01sadra/tailwind-neobrutalism')({\n colors: {\n brutal: {\n primary: '88 101 242', // Blurple\n secondary: '67 181 129', // Green\n accent: '250 166 26', // Yellow\n }\n }\n})\n```\n\n## 🎯 Advanced Usage\n\n### Dark Mode\n\nEnable dark mode by adding the `dark` class to your HTML element:\n\n```html\n\n \n \n \n \n\n```\n\n### Custom Utilities\n\nThe plugin also provides utility classes for custom components:\n\n```html\n
\n Custom component with brutal styling\n
\n```\n\nAvailable utilities:\n- `.brutal-base` - Adds border and border radius\n- `.brutal-shadow` - Adds box shadow with transition\n- `.brutal-hover` - Adds hover transform effects\n- `.font-brutal-base` - Base font weight (500)\n- `.font-brutal-heading` - Heading font weight (700)\n- `.translate-brutal` - Transform with shadow offset\n- `.shadow-brutal` - Brutal box shadow\n- `.shadow-brutal-sm` - Small brutal shadow\n\n## 🚀 Performance\n\n### Bundle Size\n- **Gzipped**: ~45KB (including all components)\n- **Tree-shakeable**: Use only what you need\n- **No runtime dependencies**: Pure CSS output\n\n### Optimization Tips\n\n1. **Purge unused styles** in production:\n```javascript\nmodule.exports = {\n content: [\"./src/**/*.{html,js,tsx,jsx}\"],\n // Tailwind will automatically purge unused styles\n}\n```\n\n2. **Load fonts efficiently**:\n```html\n\n```\n\n## 📱 Responsive Design\n\nAll components are mobile-first responsive:\n\n```html\n\n\n
\n Responsive Grid Layout\n
\n```\n\n## ♿ Accessibility\n\nComponents follow WCAG 2.1 AA guidelines:\n\n- ✅ Keyboard navigation support\n- ✅ Screen reader compatibility \n- ✅ High contrast ratios\n- ✅ Focus indicators\n- ✅ ARIA attributes where needed\n\n### Accessibility Examples\n\n```html\n\n\n\nWe'll never share your email\n\n\n
\n \n
\n Item 1\n
\n
\n```\n\n## 🧪 Testing\n\n### Manual Testing Checklist\n\n- [ ] Components render correctly in LTR layout\n- [ ] Components render correctly in RTL layout \n- [ ] Hover effects work properly\n- [ ] Focus states are visible\n- [ ] Dark mode works correctly\n- [ ] Mobile responsive breakpoints\n- [ ] Screen reader compatibility\n- [ ] Keyboard navigation\n\n### Automated Testing\n\n```bash\n# Run tests\nnpm test\n\n# Build demo\nnpm run demo\n\n# Serve demo locally\nnpm run serve\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n### Development Setup\n\n```bash\ngit clone https://github.com/01sadra/tailwind-neobrutalism.git\ncd tailwind-neobrutalism\nnpm install\n\n# Run demo in watch mode\ncd demo\nnpm install\nnpm run dev\n```\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## 🙏 Credits\n\n- **Neobrutalism Design**: Inspired by the brutalist architecture movement\n- **Fonts**: Space Grotesk, JetBrains Mono, Vazirmatn, and other open source fonts\n- **Tailwind CSS**: This plugin extends the amazing Tailwind CSS framework\n\n## 🔗 Links\n\n- 📦 [NPM Package](https://www.npmjs.com/package/@01sadra/tailwind-neobrutalism)\n- 🌐 [Live Demo](https://01sadra.github.io/tailwind-neobrutalism)\n- 📚 [Documentation](https://01sadra.github.io/tailwind-neobrutalism/docs)\n- 🐛 [Issues](https://github.com/01sadra/tailwind-neobrutalism/issues)\n- 💬 [Discussions](https://github.com/01sadra/tailwind-neobrutalism/discussions)\n\n---\n\n**Made with ❤️ for the web development community**","readmeFilename":"README.md","_rev":"1-aacf44e7a41584003bc7fe089c1ff63d"}