Skip to content

Instantly share code, notes, and snippets.

@AntonNiklasson
Created May 3, 2021 09:59
Show Gist options
  • Save AntonNiklasson/0ed76e826b800ace1ac148a71fcebdf8 to your computer and use it in GitHub Desktop.
Save AntonNiklasson/0ed76e826b800ace1ac148a71fcebdf8 to your computer and use it in GitHub Desktop.
Tailwind Default Colors as CSS Variables
:root {
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
--red-50: #FEF2F2;
--red-100: #FEE2E2;
--red-200: #FECACA;
--red-300: #FCA5A5;
--red-400: #F87171;
--red-500: #EF4444;
--red-600: #DC2626;
--red-700: #B91C1C;
--red-800: #991B1B;
--red-900: #7F1D1D;
--amber-50: #FFFBEB;
--amber-100: #FEF3C7;
--amber-200: #FDE68A;
--amber-300: #FCD34D;
--amber-400: #FBBF24;
--amber-500: #F59E0B;
--amber-600: #D97706;
--amber-700: #B45309;
--amber-800: #92400E;
--amber-900: #78350F;
--emerald-50: #ECFDF5;
--emerald-100: #D1FAE5;
--emerald-200: #A7F3D0;
--emerald-300: #6EE7B7;
--emerald-400: #34D399;
--emerald-500: #10B981;
--emerald-600: #059669;
--emerald-700: #047857;
--emerald-800: #065F46;
--emerald-900: #064E3B;
--blue-50: #EFF6FF;
--blue-100: #DBEAFE;
--blue-200: #BFDBFE;
--blue-300: #93C5FD;
--blue-400: #60A5FA;
--blue-500: #3B82F6;
--blue-600: #2563EB;
--blue-700: #1D4ED8;
--blue-800: #1E40AF;
--blue-900: #1E3A8A;
--indigo-50: #EEF2FF;
--indigo-100: #E0E7FF;
--indigo-200: #C7D2FE;
--indigo-300: #A5B4FC;
--indigo-400: #818CF8;
--indigo-500: #6366F1;
--indigo-600: #4F46E5;
--indigo-700: #4338CA;
--indigo-800: #3730A3;
--indigo-900: #312E81;
--violet-50: #F5F3FF;
--violet-100: #EDE9FE;
--violet-200: #DDD6FE;
--violet-300: #C4B5FD;
--violet-400: #A78BFA;
--violet-500: #8B5CF6;
--violet-600: #7C3AED;
--violet-700: #6D28D9;
--violet-800: #5B21B6;
--violet-900: #4C1D95;
--pink-50: #FDF2F8;
--pink-100: #FCE7F3;
--pink-200: #FBCFE8;
--pink-300: #F9A8D4;
--pink-400: #F472B6;
--pink-500: #EC4899;
--pink-600: #DB2777;
--pink-700: #BE185D;
--pink-800: #9D174D;
--pink-900: #831843;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment