How To Use

Pines, is super easy to use. If your application uses Alpine and Tailwind, you can copy and paste an element into your page and it will work flawlessly. If you want to test an element on a single HTML page, you can copy/paste this snippet below into any `.html` file:

Use in Production

The snippet below uses the TailwindCDN which should not be used in your production apps, instead you should bundle Tailwind and Alpine with a bundler like Vite.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pines UI</title>
    <style>[x-cloak]{display:none}</style>
    <!-- Include the Alpine library on your page -->
    <script src="https://unpkg.com/alpinejs" defer></script>
    <!-- Include the TailwindCSS library on your page -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-start justify-center h-full bg-gray-50">
    <div class="flex items-center justify-center w-full max-w-full">
        <!-- Element Here -->
    </div>
</body>
</html>

Paste in your element

Replace the `` line with the element snippet and you're ready to rock and roll.

The Pines Playground

You may also open up the and edit any element or design your own. Keep in mind that the data entered into the playground will not be saved, so if you leave the page you may lose any changes. However, it may be the easiest way to make a few modifications to an element or create your own.

Re-usability

Pines isn't a standalone library, but rather a collection of elements for Alpine and Tailwind projects. This will make it a delight to integrate with your TALL stack applications; however, some of these elements you may want to make re-usable. One such element is the tooltip element, which you may want to extract it into it's own Alpine plugin, allowing you to do something like this:

<div x-tooltip="Your tooltip text here">
    hover me
</div>

By doing this, you can include multiple tooltips in your application and modify the appearance and functionionality in one place.

In the next section you will learn how to extract an element into its own plugin.