TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page
  • Install required scripts
  • Create resources/js/alpine.js
  • resources/app.js
  • Add to layout

Was this helpful?

  1. Installation
  2. Manual installation

Javascript

Install required scripts

Tailwind 3

npm install -D laravel-mix alpinejs @alpinejs/focus @alpinejs/collapse tailwindcss@latest postcss@latest postcss-import autoprefixer@latest @tailwindcss/forms@latest @tailwindcss/typography@latest @tailwindcss/aspect-ratio@latest --save-dev

Tailwind 2

npm install -D laravel-mix alpinejs @alpinejs/focus @alpinejs/collapse tailwindcss@2.2.19 postcss-import postcss-nesting autoprefixer@10.2.6 @tailwindcss/forms@0.3.4 @tailwindcss/typography@0.4.1 @tailwindcss/aspect-ratio@0.3.0 --save-dev

Create resources/js/alpine.js

import Alpine from 'alpinejs'
import focus from '@alpinejs/focus'
import collapse from '@alpinejs/collapse'

window.Alpine = Alpine

Alpine.plugin(focus)
Alpine.plugin(collapse)
Alpine.start()

export default Alpine

resources/app.js

import './bootstrap'
import './alpine'

Add to layout

Stack scripts AFTER Livewire scripts in your main layout file. (app.blade.php)

<body>
...
@livewireScripts
@stack("scripts")
</body>
PreviousCss & ThemeNextTailwind

Last updated 3 years ago

Was this helpful?