Eleventy-plugin-tailwind-components NPM

Hyper UI Plugin for 11ty

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

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);
};

{% 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

{% 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

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

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)

Components from HyperUI by Mark Mead

4 years ago

4 years ago