Custom Styling

Customize the appearance of PyHard components

CSS Customization

1/* Override component styles */
2.pyhard-wallet-connect {
3  @apply bg-blue-600 text-white rounded-lg px-4 py-2;
4}
5
6.pyhard-subscription-card {
7  @apply bg-white border border-gray-200 rounded-lg p-4 shadow-sm;
8}
9
10.pyhard-qr-generator {
11  @apply bg-gradient-to-r from-purple-500 to-pink-500 text-white;
12}

Tailwind Configuration

1// tailwind.config.js
2module.exports = {
3  content: [
4    './src/**/*.{js,ts,jsx,tsx}',
5    './node_modules/pyhard-vendor-sdk/**/*.{js,ts,jsx,tsx}'
6  ],
7  theme: {
8    extend: {
9      colors: {
10        'pyhard-blue': '#3B82F6',
11        'pyhard-accent': '#8B5CF6'
12      }
13    }
14  }
15};