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.
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")
}
);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
} );