Tailwind CSS in Practice: Styling Your Tobesee Site Without Writing Custom CSS

Tobesee uses Tailwind CSS for all its styling. If you are customizing the look of your site, you will be working with utility classes instead of writing traditional CSS files. This article explains how Tailwind works in the context of a Next.js application and provides practical recipes for common styling tasks.

What Makes Tailwind Different

Traditional CSS requires you to invent class names, write rules in separate files, and manage specificity conflicts. Tailwind takes a different approach: it provides a comprehensive set of pre-built utility classes that you apply directly to HTML elements.

Instead of this:

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

<div class="article-card">...</div>

You write this:

<div class="p-6 rounded-lg bg-white shadow-sm">...</div>

The result is the same, but you never leave your component file. No naming decisions, no file switching, no specificity wars.

Tobesee Design System

Tobesee uses an emerald/green color palette inspired by Apple design aesthetics. The key design tokens are:

Primary gradient: from-emerald-50 to-teal-50 for backgrounds
Heading text: text-emerald-700
Body text: text-emerald-600
Accent colors: emerald-600, green-600, teal-600
Font: Inter from Google Fonts

When customizing your site, maintain consistency with these colors or define your own palette in tailwind.config.js.

Responsive Design

Tailwind uses mobile-first breakpoints. Classes without a prefix apply to all screen sizes. Prefixed classes apply at that breakpoint and above:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
</div>

The breakpoints are:

sm: 640px and up
md: 768px and up
lg: 1024px and up
xl: 1280px and up
2xl: 1536px and up

Common Styling Recipes

Article Card

<div class="bg-white rounded-xl shadow-sm border border-emerald-100 p-6 hover:shadow-md transition-shadow">
  <h3 class="text-lg font-semibold text-emerald-700 mb-2">Article Title</h3>
  <p class="text-emerald-600 text-sm mb-4">Article description goes here...</p>
  <span class="text-xs text-emerald-500">February 17, 2026</span>
</div>

Navigation Bar

<nav class="bg-white/80 backdrop-blur-md border-b border-emerald-100 sticky top-0 z-50">
  <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-emerald-700">Tobesee</a>
    <div class="flex gap-6">
      <a href="/posts" class="text-emerald-600 hover:text-emerald-800 transition-colors">Posts</a>
      <a href="/resources" class="text-emerald-600 hover:text-emerald-800 transition-colors">Resources</a>
    </div>
  </div>
</nav>

Hero Section

<section class="bg-gradient-to-br from-emerald-50 to-teal-50 py-20">
  <div class="max-w-4xl mx-auto px-4 text-center">
    <h1 class="text-4xl md:text-5xl font-bold text-emerald-800 mb-6">
      Your Site Title
    </h1>
    <p class="text-lg text-emerald-600 max-w-2xl mx-auto">
      A brief description of what your site offers.
    </p>
  </div>
</section>

Footer

<footer class="bg-emerald-900 text-emerald-100 py-12">
  <div class="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
    <div>
      <h4 class="font-semibold text-white mb-4">About</h4>
      <p class="text-emerald-300 text-sm">Site description...</p>
    </div>
    <div>
      <h4 class="font-semibold text-white mb-4">Links</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="/posts" class="text-emerald-300 hover:text-white">Posts</a></li>
        <li><a href="/resources" class="text-emerald-300 hover:text-white">Resources</a></li>
      </ul>
    </div>
    <div>
      <h4 class="font-semibold text-white mb-4">Legal</h4>
      <ul class="space-y-2 text-sm">
        <li><a href="/privacy" class="text-emerald-300 hover:text-white">Privacy</a></li>
        <li><a href="/terms" class="text-emerald-300 hover:text-white">Terms</a></li>
      </ul>
    </div>
  </div>
</footer>

Customizing the Tailwind Configuration

Tobesee includes a tailwind.config.js file where you can extend the default theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#ecfdf5',
          100: '#d1fae5',
          500: '#10b981',
          600: '#059669',
          700: '#047857',
          800: '#065f46',
          900: '#064e3b',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
};

After modifying the config, restart your development server for changes to take effect.

Shadcn/UI Components

Tobesee also includes Shadcn/UI, a collection of accessible, customizable React components built on top of Tailwind CSS. These components provide consistent styling for common UI elements like buttons, cards, dialogs, and form inputs.

Unlike traditional component libraries, Shadcn/UI components are copied into your project (not installed as a dependency), giving you full control over their styling and behavior.

Performance Considerations

Tailwind CSS generates a large number of utility classes, but the production build only includes classes that are actually used in your code. This is handled by Tailwind purge feature (enabled by default in Tobesee), which scans your source files and removes unused styles.

The result is a CSS file that is typically 10-30KB gzipped — much smaller than most CSS frameworks.

Summary

Tailwind CSS gives you the power to style any element without leaving your component file. Combined with Tobesee emerald design system and Shadcn/UI components, you have everything you need to create a professional, responsive website. Start with the existing styles, customize the color palette to match your brand, and use the recipes above as starting points for your own components.