TALL kit

Before using TALL kit, make sure that you have already created Laravel project and installed Livewire, Tailwind CSS and Alpine.js.

Requirements

PHP ^8.0
Laravel ^10.0
Livewire ^2.12
Alpine.js ^3.12
Tailwind CSS ^3.3

Install the package for components

composer require tall-kit/components

Install the package for plugins

npm install @tall-kit/plugins

Extend your Tailwind config file

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./vendor/tall-kit/components/resources/**/*.blade.php",
    ],
    theme: {
        extend: {
            colors: {
                primary: {
                    lighter: colors.sky[100],
                    light: colors.sky[200],
                    DEFAULT: colors.sky[500],
                    dark: colors.sky[600],
                    darker: colors.sky[900],
                },
                secondary: {
                    lighter: colors.gray[100],
                    light: colors.gray[300],
                    DEFAULT: colors.gray[600],
                    dark: colors.gray[700],
                    darker: colors.gray[900],
                },
                neutral: {
                    lighter: colors.slate[100],
                    light: colors.slate[200],
                    DEFAULT: colors.slate[400],
                    dark: colors.slate[500],
                    darker: colors.slate[600],
                },
                success: {
                    lighter: colors.green[100],
                    light: colors.green[300],
                    DEFAULT: colors.green[500],
                    dark: colors.green[600],
                    darker: colors.green[900],
                },
                warning: {
                    lighter: colors.yellow[100],
                    light: colors.yellow[300],
                    DEFAULT: colors.yellow[500],
                    dark: colors.yellow[600],
                    darker: colors.yellow[900],
                },
                error: {
                    lighter: colors.red[100],
                    light: colors.red[200],
                    DEFAULT: colors.red[500],
                    dark: colors.red[700],
                    darker: colors.red[800],
                },
            }
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('./vendor/tall-kit/components/resources/js/theme.cjs'),
    ],
}

Please note that some components may require additional plugins such as Alpine.js official plugins or TALL kit custom plugins. The installation process for these plugins will be described separately on the corresponding component page.

Here is an example of how your app.js file could look if you want to use the popover component :

import Alpine from 'alpinejs'

import focus from '@alpinejs/focus'
import {
    floating,
    popover,
} from "@tall-kit/plugins"

Alpine.plugin(focus)
Alpine.plugin(floating)
Alpine.plugin(popover)

window.Alpine = Alpine

Alpine.start()