Pinemix

https://pinemix.com/docs
Admin
Pinemix is a handcrafted library of free, ready-to-use Alpine.js components designed with Tailwind...
Tokens:1,245
Snippets:27
Trust Score:7.5
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Alpine.js Packages

Source: https://pinemix.com/docs/getting-started

Install Alpine.js and the focus plugin using npm. These are essential for interactive components.

```bash
npm install alpinejs @alpinejs/focus

```

--------------------------------

### Install Tailwind CSS Plugins

Source: https://pinemix.com/docs/getting-started

Install the necessary Tailwind CSS plugins for form and typography enhancements. Ensure these are installed before proceeding with configuration.

```bash
npm install @tailwindcss/forms @tailwindcss/typography -D

```

--------------------------------

### Include Alpine.js via CDN

Source: https://pinemix.com/docs/getting-started

Include Alpine.js and its focus plugin in your HTML head using CDNs for quick setup. This method is suitable for projects not using a build system.

```html
<!-- Alpine Plugins -->
<script
  defer
  src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"
></script>

<!-- Alpine Core -->
<script
  defer
  src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>

```

--------------------------------

### Initialize Alpine.js with Focus Plugin

Source: https://pinemix.com/docs/getting-started

Import and initialize Alpine.js with the focus plugin in your JavaScript bundle. This enables Alpine's reactivity and focus management.

```javascript
import Alpine from "alpinejs";
import focus from "@alpinejs/focus";

window.Alpine = Alpine;

Alpine.plugin(focus);
Alpine.start();

```

--------------------------------

### Tailwind CSS Configuration

Source: https://pinemix.com/docs/getting-started

Configure Tailwind CSS with custom themes, animations, and dark mode settings. This CSS file enables all customizations needed for Pinemix components.

```css
/* Tailwind CSS */
@import "tailwindcss";

/* Class based dark mode */
@variant dark (&:where(.dark, .dark *));

/* Customizations */
@theme {
  /* Fonts */
  --default-font-family: "Inter";

  /* Animations */
  --animate-full-tl: full-tl 25s linear infinite;
  --animate-full-tr: full-tr 25s linear infinite;

  @keyframes full-tl {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes full-tr {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }
}

/* Alpine x-cloak style (https://alpinejs.dev/directives/cloak) */
@layer base {
  [x-cloak] {
    display: none !important;
  }
}

```

--------------------------------

### Include Inter Font

Source: https://pinemix.com/docs/getting-started

Optionally, include the Inter web font from bunny.net in your HTML head for consistent typography. This font is GDPR compliant.

```html
<!-- Inter web font from bunny.net (GDPR compliant) -->
<link rel="preconnect" href="https://fonts.bunny.net" />
<link
  href="https://fonts.bunny.net/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
  rel="stylesheet"
/>

```
Tokens:
Raw