https://github.com/foobar404/tails.js
🎨 Tails.js - Zero-config utility-first CSS framework. Drop in one script tag and get instant utility classes, themes, and responsive design. No build tools required.
https://github.com/foobar404/tails.js
animation css-framework css-utilities css-variables javascript plugin-system responsive-design tailwind-css theming utility-first
Last synced: 6 months ago
JSON representation
🎨 Tails.js - Zero-config utility-first CSS framework. Drop in one script tag and get instant utility classes, themes, and responsive design. No build tools required.
- Host: GitHub
- URL: https://github.com/foobar404/tails.js
- Owner: foobar404
- Created: 2025-06-16T01:45:32.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-06-16T02:38:24.000Z (6 months ago)
- Last Synced: 2025-06-16T04:02:00.719Z (6 months ago)
- Topics: animation, css-framework, css-utilities, css-variables, javascript, plugin-system, responsive-design, tailwind-css, theming, utility-first
- Language: HTML
- Homepage: https://foobar404.github.io/tails.js/
- Size: 137 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 Tails.js
## **One line. Zero config. Utility-first CSS that just works.**
**Drop in a single script tag and instantly get utility-first CSS classes. No build tools, no configuration files, no hassle.**
[](https://opensource.org/licenses/MIT)
[](https://github.com/yourusername/tails.js)
[](https://github.com/yourusername/tails.js)
```html
You're already using Tails.js!
```
## ✨ What You Get Instantly
- 🎯 **Core Utility Classes** - Spacing, colors, typography, layout, flexbox, and grid
- 🎨 **Color System** - 11 base colors with 10 shades each (110 color variables)
- 📱 **Responsive Design** - Built-in breakpoints (sm, md, lg, xl)
- 🌗 **Theme Support** - CSS custom properties for consistent theming
- 🔌 **Plugin System** - Extend with custom utilities, variables, and components
- ⚡ **Dynamic Generation** - CSS is generated only for classes you use
- 🎪 **State Variants** - Hover, focus, and other pseudo-class support
## 🎨 Color System
Built-in color palette with shades from 50-900:
```html
Blue background
Light red background with dark red text
Green border
```
## 🌗 Theme System
Built-in CSS custom properties for consistent theming:
```html
Primary themed content
// Switch to dark theme
document.documentElement.setAttribute('data-theme', 'dark');
```
## 📱 Responsive Design
Mobile-first responsive utilities:
```html
Responsive text sizing
Responsive grid layout
```
## 🎪 Interactive States
Hover, focus, and other pseudo-class variants:
```html
Interactive button
```
## 🔌 Plugin System
Extend with simple JavaScript objects:
```javascript
// Add custom CSS variables
{
variables: {
'brand-primary': '#ff6b35',
'custom-shadow': '0 4px 20px rgba(0,0,0,0.15)'
}
}
// Add custom utility classes
{
utilities: {
'.text-shadow': 'text-shadow: 2px 2px 4px rgba(0,0,0,0.3)',
'.backdrop-blur': 'backdrop-filter: blur(10px)'
}
}
// Add reusable components
{
components: {
'card': 'bg-white rounded-lg shadow-md p-6',
'btn': 'px-4 py-2 rounded font-medium cursor-pointer'
}
}
```
## 📖 Core Utilities
### Spacing
- **Padding**: `p-4`, `px-6`, `py-3`, `pt-2`, `pr-8`, etc.
- **Margin**: `m-4`, `mx-auto`, `my-2`, `mt-8`, `mb-4`, etc.
- **Values**: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96
### Typography
- **Size**: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl` through `text-6xl`
- **Weight**: `font-thin`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`
- **Line Height**: `leading-none`, `leading-tight`, `leading-normal`, `leading-relaxed`, `leading-loose`
### Layout
- **Display**: `block`, `inline`, `inline-block`, `flex`, `grid`, `hidden`
- **Flexbox**: `flex-row`, `flex-col`, `items-center`, `justify-center`, `flex-wrap`
- **Grid**: `grid-cols-12`, `col-span-6`, `gap-4`
- **Position**: `relative`, `absolute`, `fixed`, `sticky`
### Sizing
- **Width/Height**: `w-full`, `h-64`, `w-1/2`, `h-screen`
- **Max Width**: `max-w-xs` through `max-w-7xl`, `max-w-prose`, `max-w-screen-lg`
### Borders & Effects
- **Borders**: `border`, `border-2`, `border-t`, `rounded`, `rounded-lg`, `rounded-full`
- **Shadows**: `shadow`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`
- **Opacity**: `opacity-0`, `opacity-25`, `opacity-50`, `opacity-75`, `opacity-100`
## 📊 Tails.js vs Tailwind CSS
| Feature | Tails.js | Tailwind CSS |
|---------|----------|--------------|
| **Setup** | ✅ One script tag | ❌ Build process required |
| **Bundle Size** | 🟢 ~15kb | 🟡 ~3MB dev / varies prod |
| **Learning Curve** | 🟢 Minimal | 🟡 Moderate |
| **Customization** | 🟡 Plugin-based | 🟢 Full config control |
| **Ecosystem** | 🟡 Growing | 🟢 Mature |
| **Performance** | 🟢 Runtime CSS generation | 🟢 Build-time optimization |
## 🎯 Perfect For
- 🚀 **Rapid Prototyping** - Get utility classes instantly
- 📄 **Static Sites** - No build tools needed
- 🔧 **Legacy Projects** - Drop into existing HTML
- 📚 **Learning** - Understand utility-first CSS
- 🎨 **Small to Medium Projects** - Full-featured without complexity
## 📝 Browser Support
Works in all modern browsers that support:
- ES6 modules
- CSS custom properties
- MutationObserver (for dynamic class generation)
## 🤝 Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
## 📝 License
MIT License - see [LICENSE](LICENSE) for details.
---
**Made with ❤️ for developers who want utility-first CSS without the complexity**
[⭐ Star this repo](https://github.com/yourusername/tails.js) • [🐛 Report Issues](https://github.com/yourusername/tails.js/issues) • [💡 Request Features](https://github.com/yourusername/tails.js/discussions)