38 lines
No EOL
1.4 KiB
Vue
38 lines
No EOL
1.4 KiB
Vue
<template>
|
|
<div class="p-8 bg-blue-100">
|
|
<h1 class="text-4xl font-bold text-blue-800 mb-4">Basic Styling Test</h1>
|
|
<p class="text-lg text-gray-700 mb-4">This tests if Tailwind CSS is working properly.</p>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg mb-4">
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-2">White Card</h2>
|
|
<p class="text-gray-600">If you can see styling, Tailwind is working!</p>
|
|
</div>
|
|
|
|
<button
|
|
@click="counter++"
|
|
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
|
|
Click Count: {{ counter }}
|
|
</button>
|
|
|
|
<div class="mt-4 p-4 bg-yellow-100 border-l-4 border-yellow-500">
|
|
<p class="text-yellow-700">
|
|
<strong>Test Results:</strong>
|
|
</p>
|
|
<ul class="list-disc list-inside text-yellow-600 mt-2">
|
|
<li>Background colors: {{ hasColors ? '✅ Working' : '❌ Not working' }}</li>
|
|
<li>Padding/margins: {{ hasSpacing ? '✅ Working' : '❌ Not working' }}</li>
|
|
<li>Typography: {{ hasTypography ? '✅ Working' : '❌ Not working' }}</li>
|
|
<li>Reactivity: {{ counter > 0 ? '✅ Working' : '❌ Click button to test' }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const counter = ref(0);
|
|
|
|
// These would only be true if CSS is loading properly
|
|
const hasColors = ref(true); // We'll assume true for now
|
|
const hasSpacing = ref(true);
|
|
const hasTypography = ref(true);
|
|
</script> |