3. Working 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.

TailwindCSS 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 TailwindCSS.

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 TailwindCSS 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ä.

Versions in Hyvä

The Hyvä Default Theme uses the following TailwindCSS versions in the theme:

• TailwindCSS v2.x in Default Theme v1.0.x / v1.1.x
• TailwindCSS v3.x in Default Theme v1.2.x / v1.3.x

Resources

General

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

Learning

• TailwindCSS v3 Cheatsheet: https://umeshmk.github.io/Tailwindcss-cheatsheet
• TailwindCSS v2 Cheatsheet: https://nerdcave.com/tailwind-cheat-sheet
• TailwindCSS v2 Video Course on Youtube: https://youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0

Tip

TailwindCSS plugins are available for IDEs and Editors, we have docs for PHPStorm and VSCode on the Editor Setup Docs which includes Intellisense to make it easier to write TailwindCSS without using one of the Cheatsheets.

Tip

If you have more Learning material we could reference here feel free to share it, on our Slack or create an issue on the gitlab page for our docs.