Tailwind Config¶
Use this configuration to extend Tailwind CSS with MetrePay design tokens. This ensures that Tailwind utility classes reflect the MetrePay visual system.
tailwind.config.js¶
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx}',
'./pages/**/*.{html,js,jsx,ts,tsx}',
'./components/**/*.{html,js,jsx,ts,tsx}',
],
theme: {
extend: {
// =============================================
// FONTS
// =============================================
fontFamily: {
sans: ['Cabin', 'sans-serif'],
base: ['Cabin', 'sans-serif'],
},
// =============================================
// FONT SIZES
// =============================================
fontSize: {
'xs': ['12px', { lineHeight: '1.5' }],
'sm': ['13px', { lineHeight: '1.5' }],
'base': ['14px', { lineHeight: '1.7' }],
'md': ['15px', { lineHeight: '1.7' }],
'lg': ['18px', { lineHeight: '1.4' }],
'xl': ['20px', { lineHeight: '1.3' }],
'2xl': ['24px', { lineHeight: '1.2' }],
'3xl': ['32px', { lineHeight: '1.1' }],
'4xl': ['40px', { lineHeight: '1.1' }],
},
// =============================================
// COLORS
// =============================================
colors: {
mp: {
blue: '#6E96FF',
'blue-hover': '#6687DC',
'blue-light': '#EBF0FF',
purple: '#5C0390',
'purple-hover':'#3A005C',
'purple-light':'#F9EEFF',
violet: '#7E5FFA',
text: '#666666',
'text-dark': '#333333',
'text-muted': '#999999',
'text-input': '#555555',
border: '#E5ECFB',
'border-input':'#92A3C8',
'bg-page': '#F1F1F1',
'bg-card': '#FAFAFA',
error: '#c80000',
success: '#1a7f4b',
warning: '#92400e',
},
},
// =============================================
// SPACING
// =============================================
spacing: {
'1': '4px',
'2': '8px',
'3': '12px',
'4': '16px',
'5': '20px',
'6': '24px',
'8': '32px',
'10': '40px',
'12': '48px',
'16': '64px',
},
// =============================================
// BORDER RADIUS
// =============================================
borderRadius: {
'sm': '4px',
'md': '8px',
'lg': '10px',
'xl': '16px',
'2xl': '20px',
'full': '9999px',
},
// =============================================
// BOX SHADOWS
// =============================================
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)',
'btn': '0px 3px 2px 0px rgba(221, 221, 221, 1)',
},
// =============================================
// MAX WIDTHS
// =============================================
maxWidth: {
'container': '1280px',
'form': '720px',
'narrow': '480px',
'checkout': '900px',
},
// =============================================
// BACKGROUND IMAGES (Gradients)
// =============================================
backgroundImage: {
'mp-hero': 'linear-gradient(73deg, #6E96FF 20%, #5C0390 100%)',
'mp-btn': 'linear-gradient(90deg, #6E96FF 0%, #84a7ff 75%, #adc5ff 100%)',
'mp-accent': 'linear-gradient(to right, #5D0391 0%, #FFFFFF 100%)',
},
// =============================================
// TRANSITION DURATION
// =============================================
transitionDuration: {
'fast': '200ms',
'base': '300ms',
'slow': '400ms',
},
},
},
plugins: [],
}
Usage Examples¶
Colors¶
<!-- Blue primary button -->
<button class="bg-mp-blue hover:bg-mp-blue-hover text-white rounded-md px-5 py-2.5 font-semibold transition-base">
Pay Now
</button>
<!-- Purple recurrent button -->
<button class="bg-mp-purple hover:bg-mp-purple-hover text-white rounded-md px-5 py-2.5 font-semibold transition-base">
Subscribe
</button>
<!-- Ghost button -->
<button class="bg-mp-blue-light text-mp-blue rounded-md px-5 py-2.5 font-semibold transition-base">
View Details
</button>
Cards¶
<!-- Default flat card -->
<div class="bg-mp-bg-card rounded-lg p-6 transition-base hover:bg-white hover:shadow-hover hover:-translate-y-0.5">
Card content
</div>
<!-- White raised card -->
<div class="bg-white rounded-lg p-6 shadow-card">
Card content
</div>
Forms¶
<!-- Form container -->
<div class="w-full max-w-form mx-auto bg-white rounded-lg shadow-card p-6 md:p-8">
<!-- Field -->
<div class="mb-5">
<label class="block text-base font-semibold text-mp-text-dark mb-1.5">
Email
</label>
<input
type="email"
class="w-full h-10 px-3.5 border border-mp-border-input rounded-md text-md text-mp-text-input bg-white transition-fast focus:outline-none focus:border-mp-blue focus:ring-2 focus:ring-mp-blue/15"
placeholder="you@example.com"
>
</div>
<!-- Submit button -->
<button class="w-full h-10 bg-mp-blue hover:bg-mp-blue-hover text-white rounded-md font-semibold text-md transition-base hover:-translate-y-px hover:shadow-hover">
Continue
</button>
</div>
Hero Section¶
<section class="bg-mp-hero rounded-lg p-8 text-white">
<h1 class="text-4xl font-bold mb-2">Automate your payments</h1>
<p class="text-base opacity-80">Simple, fast, and reliable payment automation.</p>
</section>
Tags¶
<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-mp-purple-light text-mp-purple">
Recurrent
</span>
Tailwind CSS v4 (CSS-first config)¶
For Tailwind v4 projects, use CSS variables directly:
@import "tailwindcss";
@theme {
--color-mp-blue: #6E96FF;
--color-mp-blue-hover: #6687DC;
--color-mp-blue-light: #EBF0FF;
--color-mp-purple: #5C0390;
--color-mp-purple-hover: #3A005C;
--color-mp-purple-light: #F9EEFF;
--color-mp-text-dark: #333333;
--color-mp-text: #666666;
--color-mp-text-muted: #999999;
--color-mp-border: #E5ECFB;
--color-mp-bg-page: #F1F1F1;
--color-mp-bg-card: #FAFAFA;
--font-sans: 'Cabin', sans-serif;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-full: 9999px;
--shadow-card: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
--shadow-hover: 0 8px 16px -4px rgba(10, 10, 10, 0.1);
}