https://github.com/casoon/casoon-tailwind-effects
Pure CSS effects library for Tailwind CSS v4. Glassmorphism, gradients, orbs, and scroll animations - no JavaScript required.
https://github.com/casoon/casoon-tailwind-effects
css css-effects css-utilities design-system glassmorphism gradients modern-css scroll-animations tailwindcss ui-components
Last synced: 7 months ago
JSON representation
Pure CSS effects library for Tailwind CSS v4. Glassmorphism, gradients, orbs, and scroll animations - no JavaScript required.
- Host: GitHub
- URL: https://github.com/casoon/casoon-tailwind-effects
- Owner: casoon
- License: other
- Created: 2025-08-24T07:27:00.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-09-20T12:01:57.000Z (7 months ago)
- Last Synced: 2025-09-20T13:25:52.810Z (7 months ago)
- Topics: css, css-effects, css-utilities, design-system, glassmorphism, gradients, modern-css, scroll-animations, tailwindcss, ui-components
- Language: CSS
- Homepage:
- Size: 1.18 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# @casoon/tailwindcss-effects
🎨 **Modern CSS Effects for Tailwind CSS v4** - Pure CSS approach with complete design system integration.
## 🚀 Quick Start
### Installation
```bash
npm install @casoon/tailwindcss-effects
```
### Usage with Tailwind CSS v4
**🎯 Tailwind v4 Integration (Recommended):**
```css
@import "tailwindcss";
@import "@casoon/tailwindcss-effects";
```
**💎 Legacy/Standalone Version (~69KB minified):**
```html
```
**📦 Individual Core Packages:**
```css
@import "tailwindcss";
@import "@casoon/tailwindcss-animations";
@import "@casoon/tailwindcss-glass";
@import "@casoon/tailwindcss-utilities";
@import "@casoon/tailwindcss-orbs";
```
**That's it!** All CSS classes are ready to use with `cs-` prefix.
## ✨ Version 0.9.0 - Consolidated Architecture
**🎯 Streamlined from 16 to 4 Core Packages:**
- `@casoon/tailwindcss-utilities` - Layout, forms, cards, typography, loading, navigation, micro-interactions, scroll
- `@casoon/tailwindcss-animations` - 50+ animation classes and keyframes
- `@casoon/tailwindcss-glass` - Complete glassmorphism system
- `@casoon/tailwindcss-orbs` - Floating orb backgrounds and effects
**📦 Meta Package:** `@casoon/tailwindcss-effects` combines all core packages.
**🏗️ Build System:**
- `index.css` - For Tailwind v4 integration (includes `@import "tailwindcss"`)
- `dist.css` - Standalone CSS for legacy projects (no Tailwind dependency)
- Full minification and tree-shaking support
## Common Variants & Usage Patterns
Utilities
- Focus rings and accessibility helpers:
```
Click me
```
- Layout and presets from `@casoon/tailwindcss-utilities` can be mixed with effect utilities:
```
…
```
Typography
- Prose presets are additive; combine with effects and variants:
```
…
```
- Inline emphasis and code blocks integrate with theme tokens; you can layer interactions:
```
npm run build
```
### ⚠️ Important Setup Note
For **gradient effects** to work properly, you need to add the `cs-root` class to your HTML:
```html
```
Or alternatively to your root element:
```html
```
This class provides the CSS variables needed for gradient backgrounds and text effects like `cs-gradient-sunset`, `cs-gradient-ocean`, `cs-gradient-fire`, etc.
## ✨ What You Get
- **🎯 Pure CSS Architecture** - No JavaScript plugins needed
- **📦 4 Core Packages** - Consolidated and optimized
- **🎨 200+ Ready-to-Use Classes** - Complete design system
- **⚡ CSS Variables & @theme** - Fully customizable with Tailwind v4
- **♿ Accessibility First** - Motion-safe variants, focus management
- **🏗️ Modern Build System** - Both Tailwind v4 and standalone support
- **🗜️ Optimized Sizes** - 69KB minified for full effects library
## 📦 Available Packages (v0.9.0)
| Package | Description | Source Size | Minified |
|---------|-------------|-------------|----------|
| **`@casoon/tailwindcss-effects`** | **Meta package - all utilities combined** | **98KB** | **69KB** |
| `@casoon/tailwindcss-utilities` | Layout, forms, cards, typography, navigation, scroll, micro-interactions | 30KB | 21KB |
| `@casoon/tailwindcss-animations` | 50+ animation classes and keyframes | 26KB | 18KB |
| `@casoon/tailwindcss-glass` | Complete glassmorphism system | 33KB | 25KB |
| `@casoon/tailwindcss-orbs` | Floating orb backgrounds and gradient effects | 7KB | 5KB |
> All CSS classes use the `cs-` prefix to avoid conflicts with Tailwind's built-in classes.
## 🎨 Examples
### Animations
```html
Smooth fade in over 500ms
3D rotation reveal from top
```
### Glass Effects
```html
Standard glass morphism
Glass Card
Beautiful glassmorphism with blue tint
Click me
```
### Gradients
```html
Beautiful sunset gradient
Ocean gradient background
Fire gradient effect
Gradient text effect
Ocean colored text
```
### Hover Effects
```html
Scales to 105% on hover
Lifts up on hover
Scale and lift together
```
### Preset Components
**Forms:**
```html
Email
Please enter a valid email
Send Message
Sign In
```
**Cards:**
```html
Premium Product
High-quality product with excellent features
$99.99
Add to Cart
"This product changed everything for our team."
Sarah Chen
CTO, TechCorp
```
**Typography:**
```html
Amazing Blog Post Title
This is the engaging introduction to the blog post...
Regular blog content with perfect spacing and readability...
Transform Your Business
Powerful tools for modern teams
Fast Setup
Get started in minutes
```
### Advanced Patterns
```html
Advanced Card
Enhanced glass morphism with structured layout
Action
Click to expand
Content with smooth animations
Header
Sidebar
Main content
Aside
Footer
```
### Theme System
```html
```
### Debug Utilities
```html
```
### Utilities
```html
Full width with consistent padding
Hidden from visual users, available to screen readers
```
## 🔧 JavaScript Helpers (Optional)
For enhanced functionality, some packages provide JavaScript modules:
### Navigation Helper
```js
// Enhanced navigation with accessibility features
import { initSidebarDrawer } from '@casoon/tailwindcss-navigation/nav.js';
const sidebar = initSidebarDrawer({
trigger: '[data-sidebar-toggle]',
drawer: '.sidebar',
overlay: '.sidebar-overlay'
});
```
### Scroll Animations
```js
// Advanced scroll-triggered animations
import '@casoon/tailwindcss-scroll/scroll.js';
// Auto-initializes on page load
// Provides AOS (Animate On Scroll) compatibility
// Custom events: 'scroll:enter', 'scroll:exit'
```
## 🎯 Customization
All effects use CSS custom properties for easy customization:
```css
:root {
/* Animation system */
--cs-anim-duration-md: 400ms;
--cs-anim-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
/* Glass effects */
--cs-glass-bg-light: color-mix(in srgb, #ffffff 10%, transparent);
--cs-glass-border-medium: color-mix(in srgb, #ffffff 20%, transparent);
/* Container padding */
--cs-container-padding: 2rem;
}
```
## 🔧 Development & Build
**For maintainers and contributors:**
```bash
# Build all dist.css files for individual packages
npm run build:dist
# Build meta package (effects) from all core packages
npm run build:effects
# Complete build pipeline (dist + effects + minification)
npm run build:all
# Validate all packages (checks for cs- prefixed classes)
npm run validate
# Pre-publish workflow (validate + build + minify)
npm run prepublish
```
**Architecture:**
- **`index.css`** - Source files with `@import "tailwindcss"` for v4 integration
- **`dist.css`** - Standalone CSS files without Tailwind dependency
- **`dist.min.css`** - Minified versions for production
## 📋 Requirements
- **Tailwind CSS v4.0+**
- **Modern CSS support**: CSS custom properties, `color-mix()`, `@container`
- **Build tool**: Any CSS processor that supports `@import`
## 🏗️ Architecture
This project has been completely rewritten for Tailwind CSS v4 with a sophisticated **7-layer CSS architecture**:
### 🔧 **New 7-Layer CSS System**
```css
@layer cs-reset, cs-tokens, cs-base, cs-components, cs-patterns, cs-utilities, cs-overrides;
```
**Layer Structure:**
1. **`cs-reset`** - CSS resets & normalization
2. **`cs-tokens`** - Design tokens & CSS custom properties
3. **`cs-base`** - Base elements, keyframes, system styles
4. **`cs-components`** - Simple UI components
5. **`cs-patterns`** - Complex composed patterns
6. **`cs-utilities`** - Atomic utility classes
7. **`cs-overrides`** - Theme overrides, debug utils
### 🎯 **Benefits of This Architecture**
- **Better Organization**: Clear separation of concerns across layers
- **Enhanced Theming**: Robust dark/light/high-contrast theme system
- **Improved Performance**: Strategic layer ordering for optimal CSS cascade
- **Developer Experience**: Debug utilities and maintainable structure
- **Accessibility First**: Built-in reduced motion and high contrast support
- **Future-Proof**: Scalable architecture for continued growth
### 🛠️ **Technical Features**
- **Pure CSS**: Each package exports a `dist.css` file with all CSS classes
- **No Plugins**: CSS files are directly imported, no JavaScript build step needed
- **CSS Variables**: Complete design system using CSS custom properties
- **Modern CSS**: Uses `color-mix()`, `@container`, `@layer`, and other modern features
- **Tree Shakeable**: Import individual packages to reduce bundle size
## 🧪 Testing
A test project is included to verify all effects work correctly:
```bash
# Development server
npm run dev
# Build test
npm run build:test
```
## 📄 License
MIT - see [LICENSE](LICENSE)
## 👨💻 Author
Created by [Jörn Seidel](https://github.com/jseidel19) - [@jseidel19](https://github.com/jseidel19)
---
**Ready for production** ✨ - All packages are stable and tested with Tailwind CSS v4.