Essential Tailwind CSS Classes to Make Your Hyvä Theme Better Without Major Customisation

Hyvä comes with the full Tailwind CSS library ready to use. Most merchants and developers use maybe 20% of what's available sticking to colours and basic padding. But Tailwind's real power is in the classes that handle layout, typography, interactivity, and visual polish all the things that separate a good-looking store from a great one.

Every class in this guide works in your existing Hyvä templates right now. No tailwind.config.js changes. No new build commands. Just open a .phtml file and start adding classes.

The Six Essential Class Categories

These six areas cover the vast majority of visual improvements you can make to a stock Hyvä store with zero customisation work. Each one targets a real pain point merchants notice unclear hierarchy, cramped layouts, flat buttons, poor mobile spacing.

Category 1 Layout: Flexbox & Grid

The most common issue in stock Hyvä stores is elements stacking vertically when they should sit side-by-side, or grids that don't respond properly to different screen sizes. These classes fix that immediately.

<div class="product-items">

<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">

<!-- Nav row: logo + search + icons perfectly aligned -->
<div class="flex items-center justify-between gap-4 py-3 px-4">
    <!-- Logo -->
    <a href="/" class="flex-shrink-0">...</a>
    <!-- Search -->
    <div class="flex-1 max-w-lg">...</div>
    <!-- Icons -->
    <div class="flex items-center gap-3 flex-shrink-0">...</div>
</div>
          

Category 2 Typography: Instant Hierarchy

Typography is where most Hyvä stores feel generic. The default size scale is functional but flat everything looks roughly the same weight. These classes add proper hierarchy in seconds.

<!-- ❌ Before: flat, no hierarchy -->
<p class="product-name"><?= $product->getName() ?></p>
<p class="price"><?= $block->getProductPrice($product) ?></p>

<!-- ✓ After: clear hierarchy, clean truncation -->
<h3 class="text-sm font-semibold text-gray-900 leading-snug line-clamp-2 mb-1">
    <?= $escaper->escapeHtml($product->getName()) ?>
</h3>
<p class="text-base font-bold text-primary">
    <?= $block->getProductPrice($product) ?>
</p>
      

Category 3 Spacing: The Premium Factor

No single change makes a store look more "premium" than consistent, generous spacing. Cramped elements signal low quality. These classes are the fastest ROI in this entire guide.

<ul>
  <li class="mb-2">...</li>
  <li class="mb-2">...</li>
  <li class="mb-2">...</li>
</ul>

<ul class="space-y-2">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Category 4 Borders & Radius: Make Cards Feel Intentional

Default Hyvä product cards often have either square corners (feels like a spreadsheet) or inconsistent border radii across elements. A single rounded-xl and a light border border-gray-100 transforms the visual quality of every card on the page.

Category 5 Transitions & Hover States

This is the category that makes the biggest perceived quality difference with the least code. A product card that subtly lifts on hover, a button that smoothly changes colour, an image that gently zooms these microinteractions signal that a store is well-made.

<div class="bg-white rounded-xl border border-gray-100
              shadow-sm hover:shadow-md hover:-translate-y-1
              transition-all duration-200 overflow-hidden">
    <!-- card content -->
</div>
          

<button
    class="w-full py-3 px-6 rounded-lg font-semibold text-sm text-white
           bg-primary hover:bg-teal-700 active:scale-95
           transition-all duration-150 cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
    Add to Cart
</button>
          

Category 6 Colour & Shadow: Visual Depth

Flat stores look flat because every section has the same background and every card has the same weight. These classes add depth subtle backgrounds that section content, shadows that layer elements, and colour utilities that reinforce hierarchy.

Bonus: Mobile-First Responsive Classes You Should Always Use

In Tailwind, every unprefixed class is the mobile baseline. Responsive prefixes (sm: md: lg:) add behaviour at that breakpoint and above. Here are the responsive patterns used most in Hyvä stores:

<!-- Stack on mobile, side-by-side from md up -->
<div class="flex flex-col md:flex-row gap-6">...</div>

<!-- Wider padding on larger screens -->
<div class="px-4 sm:px-6 lg:px-8">...</div>

<!-- Hide on mobile, show from md -->
<div class="hidden md:block">...</div>

<!-- Show only on mobile -->
<div class="block md:hidden">...</div>

<!-- Responsive text size -->
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight">
    <?= $escaper->escapeHtml($block->getPageTitle()) ?>
</h1>

<!-- Responsive grid 1 col mobile, 2 tablet, 4 desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">...</div>
      

The Quick-Reference Cheat Sheet

Pin this. These are the classes that appear in almost every high-quality Hyvä template:

Final Thoughts

You don't need a design agency or a major rebuild to make your Hyvä store look significantly better. The classes in this guide are available right now in your existing theme, and most improvements take under five minutes to apply.

Start with the highest-impact areas: product card layout, typography hierarchy on names and prices, hover states on buttons and cards, and consistent spacing via space-y-* and gap-*. Those four changes alone will transform how your store feels to shoppers.

Once you're comfortable with these, the next step is building reusable component classes with @apply which removes repetitive class strings from your templates and makes global style changes trivial. That's where the real long-term efficiency lives.