Supabase Va Tailwind CSS Giao Dien Dep Khong Can CSS

<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-2xl font-bold text-gray-800 mb-4">Hello World</h2>
  <p class="text-gray-600">This is a card component.</p>
</div>

.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.card h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1a202c;
  margin-bottom: 1rem;
}

.card p {
  color: #718096;
}

npm install -D tailwindcss
npx tailwindcss init

Bước 3: Cấu hình Tailwind
Tạo file tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Bước 4: Import Tailwind trong CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Xây dựng giao diện với Tailwind CSS

Layout cơ bản

<div class="min-h-screen bg-gray-50">
  <nav class="bg-white shadow-sm border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center">
          <h1 class="text-xl font-bold text-gray-900">My App</h1>
        </div>
        <div class="flex items-center space-x-4">
          <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            Sign In
          </button>
        </div>
      </div>
    </div>
  </nav>

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Nội dung chính -->
  </main>
</div>

Card component

<div class="bg-white rounded-lg shadow-lg overflow-hidden">
  <div class="px-6 py-4">
    <h3 class="text-lg font-semibold text-gray-900 mb-2">User Information</h3>
    <p class="text-gray-600">Name: John Doe</p>
    <p class="text-gray-600">Email: [email protected]</p>
  </div>
  <div class="bg-gray-50 px-6 py-4">
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
      Edit Profile
    </button>
  </div>
</div>

Form validation

<form class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <input type="email" 
           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           required>
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
    <input type="password" 
           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           required>
  </div>
  <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
    Sign In
  </button>
</form>

Kết nối Supabase với frontend

Authentication

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

// Đăng nhập
async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password
  })
  return { data, error }
}

// Đăng ký
async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password
  })
  return { data, error }
}

Query dữ liệu

// Lấy dữ liệu từ database
async function getUsers() {
  const { data, error } = await supabase
    .from('users')
    .select('*')
    .order('created_at', { ascending: false })

return { data: data || [], error }
}

// Insert dữ liệu
async function createUser(userData) {
  const { data, error } = await supabase
    .from('users')
    .insert([userData])
    .select()
    .single()

return { data, error }
}

Realtime subscriptions

// Lắng nghe thay đổi dữ liệu
const mySubscription = supabase
  .from('messages')
  .on('*', (payload) => {
    console.log('Thay đổi dữ liệu:', payload)
    // Cập nhật UI ở đây
  })
  .subscribe()

Kết luận: Sức mạnh của sự kết hợp

Việc kết hợp Supabase và Tailwind CSS mang lại một workflow phát triển web cực kỳ hiệu quả:

– Tốc độ: Setup nhanh chóng, không cần viết boilerplate code.
– Đơn giản: Không cần quản lý backend phức tạp hay viết CSS truyền thống.
– Mở rộng: Cả hai đều có khả năng scale tốt khi ứng dụng phát triển.
– Cộng đồng: Hệ sinh thái lớn với nhiều tài nguyên học tập.

Với những dự án vừa và nhỏ, sự kết hợp này giúp bạn tập trung vào việc xây dựng tính năng thay vì lo lắng về infrastructure. Đối với các dự án lớn hơn, bạn vẫn có thể mở rộng dần dần khi cần.

Hãy thử nghiệm và trải nghiệm – bạn sẽ ngạc nhiên về tốc độ và chất lượng mà bạn có thể đạt được với bộ đôi này!