SwiftUI TailwindCSS

A powerful SwiftUI package that brings TailwindCSS utility-first approach to iOS/macOS development with atomic view modifiers.

🎯 Overview

SwiftUI TailwindCSS brings the power and simplicity of TailwindCSS to SwiftUI development. Write beautiful, consistent UI components using atomic utility modifiers that are chainable, reusable, and maintainable.

✨ Key Features

• 🔗 Chainable Modifiers - Clean, readable syntax with method chaining
• 🎨 Complete Color System - Full TailwindCSS color palette (50-900 shades)
• 📏 Consistent Spacing - 4px-based spacing system (tw_1 = 4px, tw_2 = 8px, etc.)
• 📱 Responsive Design - Works seamlessly on iOS and macOS
• ⚡ Atomic Utilities - Small, focused modifiers for maximum reusability
• 📖 Comprehensive Demo - 13+ component examples with side-by-side comparisons

🚀 Quick Start

Installation

Add the package to your Xcode project:

https://github.com/Not996NotOT/swiftui_tailwindcss.git

Or add to your Package.swift:

dependencies: [
    .package(url: "https://github.com/Not996NotOT/swiftui_tailwindcss.git", from: "1.0.0")
]

Import

import swiftui_tailwindcss

Basic Usage

Transform verbose SwiftUI code into clean, atomic modifiers:

Before (Traditional SwiftUI)

Button("Get Started") { }
    .font(.system(size: 16, weight: .medium))
    .foregroundColor(.white)
    .padding(.horizontal, 24)
    .padding(.vertical, 12)
    .background(Color.blue)
    .cornerRadius(8)
    .shadow(color: .black.opacity(0.1), radius: 3, x: 0, y: 1)

After (TailwindCSS)

Button("Get Started") { }
    .px(.tw_6)
    .py(.tw_3)
    .bg(.blue600)
    .textColor(.white)
    .font(.textBase())
    .fontWeight(.medium)
    .rounded(.tw_2)
    .shadowSm()

📚 Core Concepts

Spacing System

Based on 4px increments for consistent spacing:

.p(.tw_1)    // padding: 4px
.p(.tw_2)    // padding: 8px
.p(.tw_4)    // padding: 16px
.p(.tw_6)    // padding: 24px
.p(.tw_8)    // padding: 32px

Color System

Complete TailwindCSS color palette:

.bg(.gray50)     // Light gray
.bg(.gray500)    // Medium gray
.bg(.gray900)    // Dark gray
.bg(.blue600)    // Primary blue
.bg(.red500)     // Error red
.bg(.green600)   // Success green

Typography

Consistent font sizing and weights:

.font(.textXs())    // 12px
.font(.textSm())    // 14px
.font(.textBase())  // 16px
.font(.textLg())    // 18px
.font(.textXl())    // 20px
.font(.text2Xl())   // 24px

🛠 Available Modifiers

Layout & Spacing

.p(.tw_4)           // padding
.px(.tw_6)          // horizontal padding
.py(.tw_3)          // vertical padding
.m(.tw_2)           // margin
.wFull()            // width: 100%
.hFull()            // height: 100%

Colors & Appearance

.bg(.blue600)       // background color
.textColor(.white)  // text color
.tw_opacity(0.5)    // opacity

Typography

.font(.textLg())         // font size
.fontWeight(.semibold)   // font weight
.textCenter()            // text alignment

Borders & Effects

.rounded(.tw_2)     // border radius
.shadowSm()         // small shadow
.shadowMd()         // medium shadow
.shadowLg()         // large shadow

Transforms

.scale(1.05)        // scale transform
.rotate(45)         // rotation

🎨 Component Examples

Button Styles

// Primary Button
Button("Primary") { }
    .px(.tw_6).py(.tw_3)
    .bg(.blue600).textColor(.white)
    .font(.textBase()).fontWeight(.medium)
    .rounded(.tw_2).shadowSm()

// Outline Button
Button("Outline") { }
    .px(.tw_6).py(.tw_3)
    .bg(.clear).textColor(.blue600)
    .font(.textBase()).fontWeight(.medium)
    .rounded(.tw_2)
    .overlay(
        RoundedRectangle(cornerRadius: .tw_2)
            .stroke(Color.blue600, lineWidth: 1)
    )

Card Components

VStack(alignment: .leading, spacing: .tw_4) {
    Text("Card Title")
        .font(.textXl())
        .fontWeight(.semibold)
        .textColor(.gray900)
    
    Text("Card content description...")
        .font(.textBase())
        .textColor(.gray600)
}
.p(.tw_6)
.bg(.white)
.rounded(.tw_3)
.shadowMd()

Input Fields

TextField("Email Address", text: $email)
    .px(.tw_4).py(.tw_3)
    .bg(.white)
    .overlay(
        RoundedRectangle(cornerRadius: .tw_2)
            .stroke(Color.gray300, lineWidth: 1)
    )
    .font(.textBase())
    .textColor(.gray900)

📱 Demo App

The package includes a comprehensive demo app with 13+ component examples:

• Button Components - Various styles and sizes
• Card Layouts - Different card designs
• Form Elements - Input fields and validation
• Navigation - Tabs, breadcrumbs
• Feedback - Alerts, toasts, badges
• Layout Systems - Flex, Grid, Spacing

Each example shows:

1. Live Preview - Interactive component
2. Traditional SwiftUI - Verbose original code
3. TailwindCSS - Clean atomic syntax

🏗 Architecture

Atomic Design Philosophy

• Utility-First - Small, single-purpose modifiers
• Composable - Combine modifiers for complex designs
• Consistent - Unified design system across components
• Maintainable - Easy to update and modify

Performance

• Lightweight - No runtime overhead
• Compile-Time - All modifiers resolved at build time
• Tree-Shakeable - Only used modifiers included in build

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by TailwindCSS
• Built for the SwiftUI community
• Thanks to all contributors

📞 Support

• 📧 Create an issue on GitHub
• 💬 Discussions welcome
• ⭐ Star the repo if you find it helpful!

---

Happy Coding with SwiftUI TailwindCSS! 🚀