Installation & Usage

Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.

Installation #

npm install kutty --save

This plugin requires Tailwind CSS 3 or later. Tailwind CSS is not included in this package. Learn how to install tailwind here.

Usage #

For CSS #

Require the installed plugin directly to your Tailwind config:

// tailwind.config.js
plugins: [require("kutty")],

For JS #

We bundle AlpineJS v2.8.0 for reactivity in our components. Learn more about AlpineJS here. Place the following script tag before the closing body tag.

<!-- All components in one -->
<script src=""></script>
<!-- Single component -->
<!-- Include AlpineJS first -->
<script src=""></script>
<!-- And then the single component -->
<script src=""></script>

For Vue #

By default, this project uses AlpineJS' @click shorthand for dynamic content such as dialogs or drawers. However, this clashes with Vue’s @click shorthand, which takes precedence. Therefore, if you want to leverage these features, you’ll have to change any @click bindings in the documentation/components to x-on:click.

Development #

You need Hugo to run the dev server. If you have Homebrew you can do the following:

brew install hugo

Check this Hugo installation page for installing on other systems.

Then clone the repo, install dependencies, and start the server locally.

git clone
cd kutty
npm i
npm start

Open http://localhost:1313 in your browser.

npm startStarts a local Hugo server and Tailwind Watcher
npm run productionFor generating production docs files