Skip to content

3. Working with TailwindCSS

Writing CSS with TailwindCSS

We are using the excellent TailwindCSS framework to create templates that are very easy to customize, look beautiful on all devices and create extremely small CSS stylesheets that reduce the amount of data your sites visitors have to download.

Tailwind is a utility-based CSS framework. This means you don’t typically write CSS classes yourself, but you compose the design of elements with classes that are defined within Tailwind.

Take a look at this example:

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

It 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%;
    }
}

It is highly recommended to look into Tailwind CSS before getting started with your Hyvä Theme.

If the example above does not make sense to you, it will be hard to grasp the design concepts used in Hyvä.

Here’s a YouTube playlist with an excellent crash course introduction to TailwindCSS by its creators.

We also like this Tailwind Cheat Sheet.