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.
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.
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="https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js"></script>
<!-- Single component --> <!-- Include AlpineJS first --> <script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/alpinejs.min.js"></script> <!-- And then the single component --> <script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/dropdown.min.js"></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
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 https://github.com/praveenjuge/kutty.git cd kutty npm i npm start
http://localhost:1313 in your browser.
||Starts a local Hugo server and Tailwind Watcher|
||For generating production docs files|