3. Working with TailwindCSS

Hyvä Theme leverages TailwindCSS for highly customizable, responsive, and lightweight templates, reducing page load times.

TailwindCSS is a utility-first CSS framework. Instead of writing custom CSS, you compose designs directly in your HTML using pre-defined utility classes.

Consider this example:

<div class="m-4 mt-8 p-2 bg-primary border border-secondary w-full md:w-1/2">

Which translates to:

div {
    margin: 1rem;
    margin-top: 2rem;
    padding: 0.5rem;
    background-color: #f1f1f1; /* the color for `primary` is defined in our config */
    border-width: 1px;
    border-color: #c9c9c9; /* the color `secondary` is defined in our config */
    width: 100%;
}

@media (min-width: 768px) {
    div {
        width: 50%;
    }
}

We *highly recommend* familiarizing yourself with TailwindCSS before starting with Hyvä Theme.

Understanding the example above will make grasping Hyvä's design concepts straightforward.

TailwindCSS Versions in Hyvä

Hyvä Default Theme uses these TailwindCSS versions:

• TailwindCSS v4.x in Default Theme v1.4.x
• TailwindCSS v3.x in Default Theme v1.2.x and v1.3.x
• TailwindCSS v2.x in Default Theme v1.0.x and v1.1.x

Resources

General

• TailwindCSS v4 Docs: v4.tailwindcss.com/docs
• TailwindCSS v3 Docs: v3.tailwindcss.com/docs
• TailwindCSS v2 Docs: v2.tailwindcss.com/docs

Learning

• TailwindCSS Cheatsheet: https://tailwindcheatsheets.com/