Using Tailwind CSS framework

Tailwind CSS is a popular CSS framework and enables styling and layouting without ever leaving the HTML-file. It uses CSS utility classes and in the ens a minified CSS file with only the parts used in included. This means that instead of writing UI component classes and then going to the CSS file to write a set of styles, classes are added to the html tag for each style.

Our themes with Tailwind CSS

All our themes with Tailwind CSS contains a make script for building the CSS file and development mode with CDN access built-in.

• Theme daisyUI - CMS theme with both Tailwind CSS and daisyUI component CSS framework built ontop of Tailwind.
• Theme eCommerce - eCommerce theme with Tailwind CSS and daisyUI.
• Theme barebone with Tailwind - A great starting point for developing with Tailwind CSS

HTML example with Tailwind

Tailwind CSS in HTML for an article card

<div class="p-2 flex flex-col gap-2 bg-zinc-100">
    <img class="h-[200px]" src="{{ article | img_url:0,200 }}" alt="{{ article.image.alt }}"/>
    <div class="flex flex-col justify-between grow">
        <a href="{{ article | url }}">
            <dt><h4 class="font-bold">{{ article.title }}</h4></dt>
            <dd>
                <time class="text-sm mb-2">{{ article.publishAt | date }}</time>
                {{ article.excerpt | truncatewords:20 }}
            </dd>
        </a>
        <p class="mt-2"><a class="p-1 px-2 bg-teal-100 hover:bg-teal-200" href="{{ article | url }}">Read</a></p> 
    </div>            
</div>

Regular CSS in HTML for the same article card

<div class="article-card">
    <img class="article-card-img" src="{{ article | img_url:0,200 }}" alt="{{ article.image.alt }}"/>
    <div class="article-card-body">
        <a href="{{ article | url }}">
            <dt><h4>{{ article.title }}</h4></dt>
            <dd>
                <time>{{ article.publishAt | date }}</time>
                {{ article.excerpt | truncatewords:20 }}
            </dd>
        </a>
        <p class="article-card-footer"><a class="btn" href="{{ article | url }}">Read</a></p> 
    </div>            
</div>

In the corresponding CSS file all the styles would be gathered under a class for the UI component, for example the article-card class would contain the following:

.article-card {
    background-color: #fafafa;
    padding: 1rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

When developping with tailwind it is useful to know a bit of CSS basics but being able to add the classes in the HTML speeds up basic styling quite a bit. And in the cases where the UI component is more advanced and the tailwind classes expands, there is no reason not to gather the CSS in a separate CSS file.

Tailwind docs for finding CSS classes

Development mode

The themes for Cradle CMS built with Tailwind CSS has a theme setting for development mode, this enables to usage of Tailwind CSS framework CDN when further developing the theme.

Add Tailwind CDN to any project

To use the CDN files/connection when developing, it is included with a simple one-liner.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

More information from Tailwind: https://tailwindcss.com/docs/installation/play-cdn

Creating output.css for production

For production there needs to be a CSS-file generated with all the classes used in the theme. Our themes with tailwind includes a build script to make generation of the CSS-file easier.

Here are the general guides from Tailwind for installation:
Installtion with npm
Standalone CLI: Use Tailwind CSS without Node.js

Tip

Add classes into a snippet that are not in the markup. - you might want to add in classes with theme settings, in order to get the classes into the CSS output you can create a snippet where the classes are included.

References

Gettings started with CSS - What is CSS at Mozilla web docs