eleventy-plugin-tailwind-components

Hyper UI Plugin for 11ty

This plugin gives shortcode access to a (currently) subset of HyperUI by Mark Mead.

Usage

Describe how to install your plugin, such as:

npm install eleventy-plugin-tailwind-components

Then, include it in your .eleventy.js config file:

const tailwind = require("eleventy-plugin-tailwind-components");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(tailwind);
};

Current templates

Card templates

{% tailwind card <cardtype> dataObject %}

property	Type	Description
title	string	A title for the card
description	string	a short description to show on the card
url	string	optional url
image	string	Url to an image to use in image-based cards

Card type	accepted data	description
gradient	title, description, url	Simple card with gradient border
image	title, description, image, url	Dark background card with image
borderImage	title, description, image, url	Simple light background, bordered card

Alert Templates

{% tailwind "alerts" "simple" data %}

property	Type	Description
title	string	A title for the card
color	string	A tailwind color (default: sky)
description	string	an optional short description to show on the card
url	string	optional url

Alert type	accepted data	description
simple	text, color, description, url	text alert banner

Announcement template

{% tailwind "announcements" "top" data %}

property	Type	Description
text	string	Text for the announcment
color	string	A tailwind color (default: sky)
url	string	optional url
linkText	string	Text for the optional link

Announcement type	accepted data	description
top	text, description, url, linkText	Announcement banner top of page
bottom	text, description, url, linkText	Announcement banner sticky bottom of page
floatingBottom	text, description, url, linkText	Announcement banner sticky bottom of page (not full width)

Credits

Components from HyperUI by Mark Mead