TailPySCSS v0.5.3: The Frontend Engine

"Build Modern UI in Python. No Node.js. No npm. No Webpack."

TailPySCSS is a Python-Native CSS Engine. It gives you the power of utility classes (like Tailwind) and the structure of components (like Bootstrap) without the nightmare of a Node.js build pipeline.

It compiles SCSS to CSS directly in Python. It scans your Python code for usage. It treeshakes unused styles by default.

📖 Read the Full Documentation →

🔥 Creating UI in Python (New in v0.5.0+)

Forget writing HTML classes manually. Use the new Python Component Library:

from tailpyscss.ui import Card, Button, Input, Switch

def view():
    return Card(
        Input(placeholder="Enter email"),
        Switch(label="Enable Notifications"),
        Button("Save Changes", variant="primary")
    )

What happens?

1. The Scanner detects you used Card, Input, and Switch.
2. The Engine compiles only the CSS needed for those 3 components.
3. The Output is a tiny, optimized CSS file (~9 KB for small apps).

🚀 Features

1. Zero Node.js Dependency

Stop fighting package.json, node_modules, and webpack.config.js. TailPySCSS is 100% Python.

• Install: pip install tailpyscss
• Run: tailpyscss build

2. The Context Engine (Tree Shaking)

We don't include 500KB of unused CSS. If you don't use the Table component in your Python code, its CSS is not generated.

• Base Size: ~9 KB (Utilities only)
• Full Suite: ~19 KB (All 30+ components)

3. The Component Library (30+ Elements)

Batteries included. Neon-ready. Glassmorphism-ready.

• Essentials: Button, Card, Badge, Alert, Navbar, Hero.
• Forms: Input, Select, Checkbox, Radio, Switch, File.
• Overlay: Modal, Toast, Tooltip, Popover.
• Navigation: Tabs, Sidebar, Pagination, Breadcrumb.

4. The Vibe Engine (Dynamic Theming)

Change your entire app's feel with one config line.

# tailpy_config.py
config = {
    "vibe": "neon"  # Options: 'flat', 'glass', 'neon'
}

⚡ Quick Start

1. Install

pip install tailpyscss

2. Initialize

tailpyscss init

Creates tailpy_config.py and styles/ folder.

3. Build & Watch

# Watch for changes (0.1s response time)
tailpyscss watch

🛠️ Configuration

Configure colors, spacing, and vibes in pure Python:

# tailpy_config.py
config = {
    "colors": {
        "primary": "#3b82f6",  # Blue
        "secondary": "#ec4899" # Pink
    },
    "vibe": "glass"
}

📚 Comparisons

� Resources

• 📖 Full Documentation - Comprehensive guides and API reference
• 🚀 Quick Start Guide - Get up and running in 5 minutes
• 🎨 Component Showcase - See all 30+ components
• ❓ FAQ & Troubleshooting - Common issues and solutions
• 🐛 Report Issues - Bug reports and feature requests

�📄 License

MIT License. 100% Open Source. Created by Abdi Abdikarim.