Tailwind replicated using css variables

tailwind-css-variables.css

:root {

  /* Fon family */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-default: var(--font-sans);

  /* Font size */
  --text-xs: .75rem/1rem var(--font-default);
  --text-sm: .875rem/1.25rem var(--font-default);
  --text-base: 1/1.5rem var(--font-default);
  --text-lg: 1.125rem/1.75rem var(--font-default);
  --text-xl: 1.25rem/1.75rem var(--font-default);
  --text-2xl: 1.5rem/2rem var(--font-default);
  --text-3xl: 1.875rem/2.25rem var(--font-default);
  --text-4xl: 2.25rem/2.5rem var(--font-default);
  --text-5xl: 3rem/1 var(--font-default);
  --text-6xl: 3.75rem/1 var(--font-default);
  --text-7xl: 4.5rem/1 var(--font-default);
  --text-8xl: 6rem/1 var(--font-default);
  --text-9xl: 8rem/1 var(--font-default);

  /* Letter spacing */
  --ls-tighter: -0.05em;
  --ls-tight: -0.025em;
  --ls-normal: 0em;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* Line height */
  --leading-3: .75rem;
  --leading-4: 1rem;
  --leading-5: 1.25rem;
  --leading-6: 1.5rem;
  --leading-7: 1.75rem;
  --leading-8: 2rem;
  --leading-9: 2.25rem;
  --leading-10: 2.5rem;
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Colors */
  --white: #fff;
  --black: #000;

  --grey-50: #F9FAFB;
  --grey-100: #F3F4F6;
  --grey-200: #E5E7EB;
  --grey-300: #D1D5DB;
  --grey-400: #9CA3AF;
  --grey-500: #6B7280;
  --grey-600: #4B5563;
  --grey-700: #374151;
  --grey-800: #1F2937;
  --grey-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;

  --yellow-50: #FFFBEB;
  --yellow-100: #FEF3C7;
  --yellow-200: #FDE68A;
  --yellow-300: #FCD34D;
  --yellow-400: #FBBF24;
  --yellow-500: #F59E0B;
  --yellow-600: #D97706;
  --yellow-700: #B45309;
  --yellow-800: #92400E;
  --yellow-900: #78350F;

  --green-50: #ECFDF5;
  --green-100: #D1FAE5;
  --green-200: #A7F3D0;
  --green-300: #6EE7B7;
  --green-400: #34D399;
  --green-500: #10B981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065F46;
  --green-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;

  --purple-50: #F5F3FF;
  --purple-100: #EDE9FE;
  --purple-200: #DDD6FE;
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6;
  --purple-600: #7C3AED;
  --purple-700: #6D28D9;
  --purple-800: #5B21B6;
  --purple-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;

  /* Spacing */
  --s0_: .125rem;
  --s1: .25rem;
  --s1_: .375rem;
  --s2: .5rem;
  --s2_: .625rem;
  --s3: .75rem;
  --s3_: .875;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s7: 1.75rem;
  --s8: 2rem;
  --s9: 2.25rem;
  --s10: 2.5rem;
  --s11: 2.75rem;
  --s12: 3rem;
  --s14: 3.5rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;
  --s28: 7rem;
  --s32: 8rem;
  --s36: 9rem;
  --s40: 10rem;
  --s44: 11rem;
  --s48: 12rem;
  --s52: 13rem;
  --s56: 14rem;
  --s60: 15rem;
  --s64: 16rem;
  --s72: 18rem;
  --s80: 20rem;
  --s96: 24rem;

  /* Border radius */
  --rounded-sm: .125rem;
  --rounded: .25rem;
  --rounded-md: .375rem;
  --rounded-lg: .5rem;
  --rounded-xl: .75rem;
  --rounded-2xl: 1rem;
  --rounded-3xl: 1.5rem;
  --rounded-full: 9999px;

  /* Border width */
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;
  --border: 1px;

  /* Box shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

}