Tailwind CSS Principles in PowerApps

Overview

This repository aims to bring the principles of Tailwind CSS, a utility-first CSS framework, into the PowerApps environment. By adopting Tailwind-like utility classes, you can streamline the styling process in PowerApps, making it more modular and efficient.

Color Pallet

Padding

---

Color Palette

Define a set of Tailwind-inspired color utility classes using ColorValue() for easy integration with PowerApps. Customize the palette to match the design needs of your application.

Set(
    tailwindColors,
    {
        gray50: ColorValue("#f9fafb"),
        gray100: ColorValue("#f3f4f6"),
        gray200: ColorValue("#e5e7eb"),
        gray300: ColorValue("#d1d5db"),
        gray400: ColorValue("#9ca3af"),
        gray500: ColorValue("#6b7280"),
        gray600: ColorValue("#4b5563"),
        gray700: ColorValue("#374151"),
        gray800: ColorValue("#1f2937"),
        gray900: ColorValue("#111827"),
        red50: ColorValue("#fef2f2"),
        red100: ColorValue("#fee2e2"),
        red200: ColorValue("#fecaca"),
        red300: ColorValue("#fca5a5"),
        red400: ColorValue("#f87171"),
        red500: ColorValue("#ef4444"),
        red600: ColorValue("#dc2626"),
        red700: ColorValue("#b91c1c"),
        red800: ColorValue("#991b1b"),
        red900: ColorValue("#7f1d1d"),
        orange50: ColorValue("#fff7ed"),
        orange100: ColorValue("#ffedd5"),
        orange200: ColorValue("#fed7aa"),
        orange300: ColorValue("#fdba74"),
        orange400: ColorValue("#fb923c"),
        orange500: ColorValue("#f97316"),
        orange600: ColorValue("#ea580c"),
        orange700: ColorValue("#c2410c"),
        orange800: ColorValue("#9a3412"),
        orange900: ColorValue("#7c2d12"),
        amber50: ColorValue("#fffbeb"),
        amber100: ColorValue("#fef3c7"),
        amber200: ColorValue("#fde68a"),
        amber300: ColorValue("#fcd34d"),
        amber400: ColorValue("#fbbf24"),
        amber500: ColorValue("#f59e0b"),
        amber600: ColorValue("#d97706"),
        amber700: ColorValue("#b45309"),
        amber800: ColorValue("#92400e"),
        amber900: ColorValue("#78350f"),
        green50: ColorValue("#f0fdf4"),
        green100: ColorValue("#dcfce7"),
        green200: ColorValue("#bbf7d0"),
        green300: ColorValue("#86efac"),
        green400: ColorValue("#4ade80"),
        green500: ColorValue("#22c55e"),
        green600: ColorValue("#16a34a"),
        green700: ColorValue("#15803d"),
        green800: ColorValue("#166534"),
        green900: ColorValue("#14532d"),
        emerald50: ColorValue("#ecfdf5"),
        emerald100: ColorValue("#d1fae5"),
        emerald200: ColorValue("#a7f3d0"),
        emerald300: ColorValue("#6ee7b7"),
        emerald400: ColorValue("#34d399"),
        emerald500: ColorValue("#10b981"),
        emerald600: ColorValue("#059669"),
        emerald700: ColorValue("#047857"),
        emerald800: ColorValue("#065f46"),
        emerald900: ColorValue("#064e3b"),
        sky50: ColorValue("#eff6ff"),
        sky100: ColorValue("#dbeafe"),
        sky200: ColorValue("#bfdbfe"),
        sky300: ColorValue("#93c5fd"),
        sky400: ColorValue("#60a5fa"),
        sky500: ColorValue("#3b82f6"),
        sky600: ColorValue("#2563eb"),
        sky700: ColorValue("#1d4ed8"),
        sky800: ColorValue("#1e40af"),
        sky900: ColorValue("#1e3a8a"),
        blue50: ColorValue("#eff6ff"),
        blue100: ColorValue("#dbeafe"),
        blue200: ColorValue("#bfdbfe"),
        blue300: ColorValue("#93c5fd"),
        blue400: ColorValue("#60a5fa"),
        blue500: ColorValue("#3b82f6"),
        blue600: ColorValue("#2563eb"),
        blue700: ColorValue("#1d4ed8"),
        blue800: ColorValue("#1e40af"),
        blue900: ColorValue("#1e3a8a"),
        indigo50: ColorValue("#eef2ff"),
        indigo100: ColorValue("#e0e7ff"),
        indigo200: ColorValue("#c7d2fe"),
        indigo300: ColorValue("#a5b4fc"),
        indigo400: ColorValue("#818cf8"),
        indigo500: ColorValue("#6366f1"),
        indigo600: ColorValue("#4f46e5"),
        indigo700: ColorValue("#4338ca"),
        indigo800: ColorValue("#3730a3"),
        indigo900: ColorValue("#312e81"),
        purple50: ColorValue("#f6f5ff"),
        purple100: ColorValue("#edebfe"),
        purple200: ColorValue("#dcd7fe"),
        purple300: ColorValue("#cabffd"),
        purple400: ColorValue("#ac94fa"),
        purple500: ColorValue("#9061f9"),
        purple600: ColorValue("#7e3af2"),
        purple700: ColorValue("#6c2bd9"),
        purple800: ColorValue("#5521b5"),
        purple900: ColorValue("#4a1d96"),
        pink50: ColorValue("#fdf2f8"),
        pink100: ColorValue("#fce7f3"),
        pink200: ColorValue("#fbcfe8"),
        pink300: ColorValue("#f9a8d4"),
        pink400: ColorValue("#f472b6"),
        pink500: ColorValue("#ec4899"),
        pink600: ColorValue("#db2777"),
        pink700: ColorValue("#be185d"),
        pink800: ColorValue("#9d174d"),
        pink900: ColorValue("#831843"),
        rose50: ColorValue("#fff1f2"),
        rose100: ColorValue("#ffe4e6"),
        rose200: ColorValue("#fecdd3"),
        rose300: ColorValue("#fda4af"),
        rose400: ColorValue("#fb7185"),
        rose500: ColorValue("#f43f5e"),
        rose600: ColorValue("#e11d48"),
        rose700: ColorValue("#be123c"),
        rose800: ColorValue("#9f1239"),
        rose900: ColorValue("#881337")
    }
);

---

Padding

Create utility classes for padding and margin, making it easy to apply consistent spacing throughout your app.

Set(twPadding,
 {
        p0: 0,
        p1: 4,
        p2: 8,
        p3: 12,
        p4: 16,
        p5: 20,
        p6: 24,
        p8: 32,
        p10: 40,
        p12: 48,
        p16: 64,
        p20: 80,
        p24: 96,
        p32: 128,
        p40: 160,
        p48: 192,
        p56: 224,
        p64: 256
 } );