Tailwind Guidelines¶

How to implement MetrePay UI using Tailwind CSS. These guidelines ensure Tailwind projects stay visually consistent with Bulma and vanilla CSS implementations.

Setup¶

Always extend the Tailwind config with MetrePay tokens. See the full config in Tailwind Config.

// tailwind.config.js (summary)
module.exports = {
  theme: {
    extend: {
      colors: {
        'mp-blue':        '#6E96FF',
        'mp-blue-hover':  '#6687DC',
        'mp-blue-light':  '#EBF0FF',
        'mp-purple':      '#5C0390',
        'mp-purple-hover':'#3A005C',
        'mp-purple-light':'#F9EEFF',
        'mp-bg-page':     '#F1F1F1',
        'mp-bg-card':     '#FAFAFA',
        'mp-text-dark':   '#333333',
        'mp-text-body':   '#666666',
        'mp-text-muted':  '#999999',
        'mp-border':      '#E5ECFB',
        'mp-border-input':'#92A3C8',
      },
      fontFamily: {
        sans: ['Cabin', 'sans-serif'],
      },
      borderRadius: {
        'sm':  '4px',
        'md':  '8px',
        'lg':  '10px',
        'xl':  '16px',
        '2xl': '20px',
      },
      boxShadow: {
        'card':  '0px 0px 6px 3px rgba(127,146,189,0.1)',
        'form':  '0px 10px 16px rgba(0,14,45,0.1)',
        'hover': '0 8px 16px -4px rgba(10,10,10,0.1)',
      },
    },
  },
}

Component Classes¶

Button¶

<!-- Primary (blue) -->
<button class="inline-flex items-center justify-center px-5 h-[42px] bg-mp-blue hover:bg-mp-blue-hover text-white rounded-md font-semibold text-[15px] transition-all duration-300 ease-out hover:-translate-y-px hover:shadow-hover">
  Pay Now
</button>

<!-- Purple (recurrent) -->
<button class="inline-flex items-center justify-center px-5 h-[42px] bg-mp-purple hover:bg-mp-purple-hover text-white rounded-md font-semibold text-[15px] transition-all duration-300 ease-out hover:-translate-y-px">
  Subscribe
</button>

<!-- Outline -->
<button class="inline-flex items-center justify-center px-5 h-[42px] bg-transparent text-mp-blue border-2 border-mp-blue rounded-md font-semibold text-[15px] transition-all duration-300 ease-out hover:bg-mp-blue-light">
  Cancel
</button>

<!-- Ghost -->
<button class="inline-flex items-center justify-center px-5 h-[42px] bg-mp-blue-light text-mp-blue rounded-md font-semibold text-[15px] transition-all duration-300 ease-out hover:bg-blue-100">
  View Details
</button>

<!-- Full width submit -->
<button class="w-full flex items-center justify-center h-[42px] bg-mp-blue hover:bg-mp-blue-hover text-white rounded-md font-semibold text-[15px] transition-all duration-300 ease-out">
  Continue →
</button>

Input¶

<div class="mb-5">
  <label class="block text-sm font-semibold text-mp-text-dark mb-1.5">
    Full name
  </label>
  <input
    type="text"
    placeholder="John Smith"
    class="w-full h-[42px] px-3.5 border border-[1.5px] border-mp-border-input rounded-md font-sans text-[15px] text-mp-text-body bg-white transition-all duration-200 ease-out focus:outline-none focus:border-mp-blue focus:ring-[3px] focus:ring-mp-blue/15 placeholder:text-mp-text-muted"
  >
</div>

Card¶

<!-- Flat card (default) -->
<div class="bg-mp-bg-card rounded-lg p-6 transition-all duration-300 ease-out hover:bg-white hover:shadow-hover hover:-translate-y-0.5">
  <!-- content -->
</div>

<!-- White card (raised) -->
<div class="bg-white rounded-lg p-6 shadow-card">
  <!-- content -->
</div>

Tag / Badge¶

<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-mp-blue-light text-mp-blue-hover">Active</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Paid</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Pending</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">Failed</span>

Alert¶

<!-- Error -->
<div class="p-3 rounded border text-sm" style="background:rgba(248,215,218,1); border-color:rgba(220,53,69,1); color:rgba(114,28,36,1);">
  ⚠️ Payment failed. Please check your card details.
</div>

<!-- Success -->
<div class="p-3 rounded border text-sm bg-green-50 border-green-300 text-green-800">
  ✓ Payment confirmed!
</div>

Payment Form (Tailwind)¶

<div class="min-h-screen bg-mp-bg-page flex items-center justify-center p-5 font-sans">
  <div class="w-full max-w-[480px] rounded-[20px] overflow-hidden shadow-form">

    <!-- Hero -->
    <div class="bg-mp-blue px-8 py-6 text-white">
      <p class="text-[13px] opacity-80 mb-1">Acme Corp</p>
      <p class="text-[22px] font-bold mb-1">Monthly Invoice</p>
      <p class="text-[28px] font-bold">$150.00</p>
    </div>

    <!-- Form body -->
    <div class="bg-white px-8 py-7">
      <span class="block text-xs font-semibold tracking-widest uppercase text-mp-blue mb-1">STEP 1 OF 2</span>
      <h2 class="text-xl font-bold text-mp-text-dark mb-5">Your information</h2>

      <div class="mb-5">
        <label class="block text-sm font-semibold text-mp-text-dark mb-1.5">Full name</label>
        <input type="text" placeholder="John Smith"
          class="w-full h-[42px] px-3.5 border-[1.5px] border-mp-border-input rounded-md text-[15px] text-mp-text-body focus:outline-none focus:border-mp-blue focus:ring-[3px] focus:ring-mp-blue/15">
      </div>

      <div class="mb-5">
        <label class="block text-sm font-semibold text-mp-text-dark mb-1.5">Email</label>
        <input type="email" placeholder="john@example.com"
          class="w-full h-[42px] px-3.5 border-[1.5px] border-mp-border-input rounded-md text-[15px] text-mp-text-body focus:outline-none focus:border-mp-blue focus:ring-[3px] focus:ring-mp-blue/15">
      </div>

      <div class="mb-6">
        <label class="block text-sm font-semibold text-mp-text-dark mb-1.5">Document number</label>
        <input type="text" placeholder="12345678"
          class="w-full h-[42px] px-3.5 border-[1.5px] border-mp-border-input rounded-md text-[15px] text-mp-text-body focus:outline-none focus:border-mp-blue focus:ring-[3px] focus:ring-mp-blue/15">
      </div>

      <button class="w-full h-[42px] bg-mp-blue hover:bg-mp-blue-hover text-white rounded-md font-semibold text-[15px] transition-all duration-300 ease-out">
        Continue →
      </button>

      <p class="text-center text-xs text-mp-text-muted mt-4">Powered by MetrePay · Secure payment</p>
    </div>
  </div>
</div>

Rules¶

Tailwind rules

Always extend the config — never use arbitrary color values like bg-[#6E96FF]
Use font-sans (mapped to Cabin) — never font-mono or font-serif in product UI
Use h-[42px] for inputs and buttons — not h-10 (40px) or h-11 (44px)
Use border-[1.5px] for inputs — not border (1px)
Use rounded-md (8px) for inputs/buttons, rounded-lg (10px) for cards
Use shadow-card and shadow-form — never shadow-md or shadow-lg
Use tracking-widest + uppercase for step labels