Tailwind CSS Border Radius Playground

by tailkits

HTML

<script src="https://cdn.tailwindcss.com/4.0.0-alpha.25/tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <div class="container mx-auto px-4 py-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">Tailwind CSS Border Radius Playground</h1>
            <p class="text-gray-600">Explore and experiment with Tailwind's border radius utilities</p>
        </div>

        <div class="grid lg:grid-cols-2 gap-8">
            <!-- Controls Panel -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-2xl font-semibold text-gray-800 mb-6">Border Radius Controls</h2>
                
                <!-- All Corners -->
                <div class="mb-8">
                    <h3 class="text-lg font-medium text-gray-700 mb-4">All Corners</h3>
                    <div class="grid grid-cols-3 gap-3">
                        <button class="control-button bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-base" data-class="rounded-none">None</button>
                        <button class="control-button bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-base" data-class="rounded-sm">SM</button>
                        <button class="control-button bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-base active" data-class="rounded">Default</button>
                        <button class="control-button bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-base" data-class="rounded-md">MD</button>
                        <button class="control-button bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-base" data-class="rounded-lg">LG</button>
                        <button class="control-button bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg...

CSS

/* Custom styles for better visual feedback */
        .preview-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.3s ease;
        }
        
        .code-display {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .control-button {
            transition: all 0.2s ease;
        }
        
        .control-button:hover {
            transform: translateY(-1px);
        }
        
        .control-button.active {
            transform: scale(0.95);
        }

JavaScript

// CSS values mapping for Tailwind border radius classes
        const borderRadiusValues = {
            'rounded-none': '0px',
            'rounded-sm': '0.125rem /* 2px */',
            'rounded': '0.25rem /* 4px */',
            'rounded-md': '0.375rem /* 6px */',
            'rounded-lg': '0.5rem /* 8px */',
            'rounded-xl': '0.75rem /* 12px */',
            'rounded-2xl': '1rem /* 16px */',
            'rounded-3xl': '1.5rem /* 24px */',
            'rounded-full': '9999px',
            // Top corners
            'rounded-t-none': 'border-top-left-radius: 0px;\nborder-top-right-radius: 0px;',
            'rounded-t-sm': 'border-top-left-radius: 0.125rem /* 2px */;\nborder-top-right-radius: 0.125rem /* 2px */;',
            'rounded-t': 'border-top-left-radius: 0.25rem /* 4px */;\nborder-top-right-radius: 0.25rem /* 4px */;',
            'rounded-t-md': 'border-top-left-radius: 0.375rem /* 6px */;\nborder-top-right-radius: 0.375rem /* 6px */;',
            'rounded-t-lg': 'border-top-left-radius: 0.5rem /* 8px */;\nborder-top-right-radius: 0.5rem /* 8px */;',
            'rounded-t-xl': 'border-top-left-radius: 0.75rem /* 12px */;\nborder-top-right-radius: 0.75rem /* 12px */;',
            'rounded-t-2xl': 'border-top-left-radius: 1rem /* 16px */;\nborder-top-right-radius: 1rem /* 16px */;',
            'rounded-t-3xl': 'border-top-left-radius: 1.5rem /* 24px */;\nborder-top-right-radius: 1.5rem /* 24px */;',
            // Right corners
            'rounded-r-none': 'border-top-right-radius: 0px;\nborder-bottom-right-radius: 0px;',
            'rounded-r-sm': 'border-top-right-radius: 0.125rem /* 2px */;\nborder-bottom-right-radius: 0.125rem /* 2px */;',
            'rounded-r': 'border-top-right-radius: 0.25rem /* 4px */;\nborder-bottom-right-radius: 0.25rem /* 4px */;',
            'rounded-r-md': 'border-top-right-radius: 0.375rem /* 6px */;\nborder-bottom-right-radius: 0.375rem /* 6px */;',
            'rounded-r-lg':...