Plugins

Buttons

The buttons plugin generates classes for standard button styling. The plugin generates the btn, btn-sm, and btn-lg classes. The btn classes handle aspects like display, padding, font size, and line height. You'll need to specify text, background, and/or border colors in each place you use one of the btn classes.

The plugin can be installed by adding require('@northeastern/kernl-ui/plugins/buttons.js') to the "plugins" array in your tailwind.config.js file.

Example markup:

<a href="#" class="btn text-white bg-black hover:bg-gray-800"> Solid Button </a>

For more usage examples, see the Button page.

Columns

The columns plugin generates simple row/column classes that are available to use if you'd prefer abstracting some of the flexbox functionality.

The plugin can be installed by adding require('@northeastern/kernl-ui/plugins/columns.js') to the "plugins" array in your tailwind.config.js file.

The plugin provides a row class that can be used on a container to set flex, flex-wrap, and negative margin. The plugin also provides a column class that can be used on child items to provide consistent spacing between each child item.

To set the width of each child item, use Tailwind's standard responsive width utilities.

Example markup:

<div class="max-w-5xl mx-auto px-8">
    <div class="row">
        <div class="column w-full sm:w-1/2 lg:w-1/3">
            <!-- Child content here -->
        </div>
        <div class="column w-full sm:w-1/2 lg:w-1/3">
            <!-- Child content here -->
        </div>
        <div class="column w-full sm:w-1/2 lg:w-1/3">
            <!-- Child content here -->
        </div>
        <div class="column w-full sm:w-1/2 lg:w-1/3">
            <!-- Child content here -->
        </div>
    </div>
</div>

Tailwind Aspect Ratio

For building images with specific aspect ratios, we suggest using the Tailwind Aspect Ratio plugin. Follow the plugin's documentation for installation and usage.

Tailwind Forms

For styling most form elements, we suggest using the Tailwind Forms plugin. The kernl(ui) package extends the default forms configuration with some of our preferred styling automatically.

Follow the plugin's documentation for installation and usage.

Tailwind Typography

For styling big blocks of HTML content (blog posts, news articles, etc.), we suggest using the Tailwind typography plugin. The kernl(ui) package extends the default typography configuration with some of our preferred styling automatically.

Follow the plugin's documentation for installation and usage.