Introduction

This Tailwind CSS plugin let's you target individual Strata section variants.

Installation

Install the NPM package with either npm or yarn

npm install @astrogoat/tailwindcss-section-variants

Configuration

In your tailwind.config file add it to your plugins. And also add you section variants that you wish to be able to use.

module.exports = {
    theme: {
        sectionVariants: [
            'primary',
            'secondary',
            // ...
        ],
        // ...
    },

    plugins: [
        require('@astrogoat/tailwindcss-section-variants'),
        // ...
    ],
}

Usage

Now you should be able to target Strata variants specifically.

Example:

<div
    @legoSection
    class="{{ $this->getVariant() }} {{ $this->getPadding() }}"
>
    <div class="primary:text-sea">
        Bibendum in maximus primis condimentum rutrum, augue feugiat ad mollis tempor habitasse...
    </div>
</div>

You can also combine the section variants selector with other Tailwind variants, such as: lg:secondary:bg-red-500 to only have the background be red on the "Secondary" variant AND when the viewport is large.