### Color Preview Example Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/index.html Example of a color input and preview component. The 'A' likely represents the alpha channel or a label. ```html Color A # ``` -------------------------------- ### Run Tests for TailwindCSS Stimulus Components Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/README.md Install project dependencies and run the test suite using npm. ```bash npm install npm run test ``` -------------------------------- ### Toggle Button Example Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/index.html A basic toggle button implementation. This example shows a toggle that reveals hidden text when activated. ```html Toggle button This is hidden text... ``` -------------------------------- ### Install TailwindCSS Stimulus Components with npm Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/README.md Use this command to add the tailwindcss-stimulus-components module to your project using npm. ```bash npm install tailwindcss-stimulus-components ``` -------------------------------- ### Install TailwindCSS Stimulus Components with Yarn Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/README.md Use this command to add the tailwindcss-stimulus-components module to your project using Yarn. ```bash yarn add tailwindcss-stimulus-components ``` -------------------------------- ### Basic Toggle Component Usage Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/toggle.md This example demonstrates the basic usage of the Toggle component. Clicking the question area will toggle the visibility of the answer area, which is initially hidden by the 'hidden' class. ```html

What is the question?

``` -------------------------------- ### Basic Tabs HTML Structure Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/tabs.md Example HTML structure for the Tabs component. Use `data-controller="tabs"` to initialize the controller and `data-tabs-target` attributes to define tabs and panels. ```html

``` -------------------------------- ### Change Tabs Externally Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/tabs.md Examples of how to change tabs programmatically from external elements using `data-action` with `data-index` or `data-id`. ```html Change tab by data-index Change tab by data-id ``` -------------------------------- ### Install TailwindCSS Stimulus Components with Rails importmaps Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/README.md Use this command to pin the tailwindcss-stimulus-components module for Rails importmaps. ```bash bin/importmap pin tailwindcss-stimulus-components ``` -------------------------------- ### Tabs with Data Attributes Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/index.html Example of changing tabs using data attributes for index and ID. This allows programmatic control over tab selection. ```html [Change tab by data-index](#) [Change tab by data-id](#) or change by select First Second Third ``` -------------------------------- ### Extend a Stimulus Component with Inheritance Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/README.md This JavaScript example demonstrates how to extend the `Dropdown` component from `tailwindcss-stimulus-components` using inheritance. Ensure to call `super.method()` if overriding parent methods. ```javascript import { Dropdown } from "tailwindcss-stimulus-components" export default class ButtonDropdown extends Dropdown { static targets = ["button"] connect() { super.connect(); console.log("the value of button : ", this.buttonTarget.value) } } ``` -------------------------------- ### Modal Component HTML Structure Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/modal.md Example HTML structure for the Modal component. It requires a main container with `data-controller="modal"`, a dialog element with `data-modal-target="dialog"`, and buttons for opening and closing. ```html

``` -------------------------------- ### HTML Structure for Alert Component Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/alert.md Example HTML structure for rendering an alert notification. It includes the Stimulus controller registration, dynamic styling classes, and a close button. The alert animates into view and can be dismissed by clicking the 'X' button. ```html

Stimulus is the JS of the future!

``` -------------------------------- ### Toggle Component with Custom Class Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/toggle.md Customize the Toggle component's behavior by specifying a different class to be toggled using the `data-toggle-class` attribute. This example uses 'bg-red-900' for the visible state. ```html

What is the question?

This is the answer

``` -------------------------------- ### Register Autosave Controller Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/autosave.md Register the Autosave controller with your Stimulus application. This is a required setup step before using the autosave functionality. ```javascript import { Autosave } from "tailwindcss-stimulus-components" application.register('autosave', Autosave) ``` -------------------------------- ### Apply Autosave to a Form Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/autosave.md Apply the autosave controller to an HTML form using data attributes. This example shows how to configure the controller to target the form and trigger save events on keyup within the title field. ```erb <%= form_with(model: post, data: { controller: "autosave", autosave_target: "form", action: "turbo:submit-end->autosave#success turbo:fetch-request-error->autosave#error" }) do |form| %>

<%= form.label :title %> <%= form.text_field :title, class: 'form-control', data: { action: "keyup->autosave#save" } %>

<%= form.submit %> <% end %> ``` -------------------------------- ### Toggle with Custom Classes Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/index.html Demonstrates a toggle button with custom classes applied, allowing for more flexible styling and behavior. ```html Toggle button with custom classes This is toggleable text... ``` -------------------------------- ### Color Picker with Live Preview Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/color-preview.md Use this HTML structure with the 'color-preview' Stimulus controller to implement a color picker that updates a preview element. The 'data-color-preview-target="preview"' element displays the color, and the input with 'data-color-preview-target="color"' triggers the update. ```html

``` -------------------------------- ### Initialize StimulusJS and Register TailwindCSS Components Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/README.md This JavaScript code initializes StimulusJS and registers all available TailwindCSS components. Import only the components you need to reduce bundle size. ```javascript // Start StimulusJS import { Application } from "@hotwired/stimulus" const application = Application.start(); // Import and register all TailwindCSS Components or just the ones you need import { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Slideover } from "tailwindcss-stimulus-components" application.register('alert', Alert) application.register('autosave', Autosave) application.register('color-preview', ColorPreview) application.register('dropdown', Dropdown) application.register('modal', Modal) application.register('popover', Popover) application.register('slideover', Slideover) application.register('tabs', Tabs) application.register('toggle', Toggle) ``` -------------------------------- ### HTML Structure for Custom Transitions Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/transition.md This HTML demonstrates how to integrate the custom Stimulus controller with transition animations. It includes data attributes to link targets, actions, and to optionally override default animation classes defined in the controller. ```html

Show Hide

``` -------------------------------- ### Implement Custom Transitions with Stimulus Controller Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/transition.md Use this JavaScript code to define a Stimulus controller that leverages the `transition` function for custom animations. It allows for dynamic control over enter and leave transitions, with options to override default animation classes. ```javascript import { transition } from "tailwindcss-stimulus-components" import { Controller } from "@hotwired/stimulus" class CustomController extends Controller { static targets = ['content'] static classes = ['enter', 'enterFrom', 'enterTo', 'leave', 'leaveFrom', 'leaveTo', 'toggle'] showContent() { transition(this.contentTarget, true, this.defaultOptions()) } hideContent() { transition(this.contentTarget, false, this.defaultOptions()) } defaultOptions() { return { enter: this.hasEnterClass ? this.enterClasses.join(' ') : 'transition ease-out duration-100', enterFrom: this.hasEnterFromClass ? this.enterFromClasses.join(' ') : 'transform opacity-0 scale-95', enterTo: this.hasEnterToClass ? this.enterToClasses.join(' ') : 'transform opacity-100 scale-100', leave: this.hasLeaveClass ? this.leaveClasses.join(' ') : 'transition ease-in duration-75', leaveFrom: this.hasLeaveFromClass ? this.leaveFromClasses.join(' ') : 'transform opacity-100 scale-100', leaveTo: this.hasLeaveToClass ? this.leaveToClasses.join(' ') : 'transform opacity-0 scale-95', toggleClass: this.hasToggleClass ? this.toggleClasses.join(' ') : 'hidden', } } } application.register('custom', CustomController) ``` -------------------------------- ### Basic Popover HTML Structure Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/popover.md Use this HTML structure to implement a popover that appears on hover. The popover content is hidden by default and shown via Stimulus actions. ```html

Hover me

``` -------------------------------- ### Basic Dropdown HTML Structure Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/dropdown.md This HTML structure sets up a functional dropdown. It includes a button to toggle the dropdown and a menu that appears/disappears. It utilizes various data attributes for Stimulus controller, actions, and targets. ```html

``` -------------------------------- ### Customize Alert Appearance with Ruby Helper Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/alert.md Define a helper method in Ruby to map flash types to Tailwind CSS classes for custom alert styling. This allows dynamic styling based on notice, error, or other message types. ```ruby module ApplicationHelper def tailwind_classes_for(flash_type) { notice: "bg-green-400 border-l-4 border-green-700 text-white", error: "bg-red-400 border-l-4 border-red-700 text-black", }.stringify_keys[flash_type.to_s] || flash_type.to_s end end ``` -------------------------------- ### Basic Slideover HTML Structure Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/slideover.md Implement a slideover using Stimulus and Tailwind CSS. The dialog element is controlled by the 'slideover' data attribute, and actions are defined for opening and closing. ```html

``` -------------------------------- ### Dropdown Show/Hide Actions Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/dropdown.md These data actions can be used to explicitly show or hide the dropdown menu. Use these when you need to control the dropdown's visibility programmatically. ```html data-action="click->dropdown#show" ``` ```html data-action="click->dropdown#hide" ``` -------------------------------- ### Register Modal Controller Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/modal.md Import and register the Modal controller with your Stimulus application. This is typically done in your application's JavaScript entry point. ```javascript import { Modal } from "tailwindcss-stimulus-components" application.register('modal', Modal) ``` -------------------------------- ### Slideover Animations Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/index.html CSS for slideover animations, including slide-in and slide-out effects from the left. Also includes styles to prevent interaction during closing. ```css dialog.slideover[open] { animation: slide-in-from-left 200ms forwards ease-in-out; } dialog.slideover[closing] { pointer-events: none; animation: slide-out-to-left 200ms forwards ease-in-out; } @keyframes slide-in-from-left{ from { transform: translateX(-100%); } } @keyframes slide-out-to-left{ to { transform: translateX(-100%); } } ``` -------------------------------- ### Register Stimulus Components Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/index.html Registers all available components from 'tailwindcss-stimulus-components' with the Stimulus application. Ensure you have the necessary imports. ```javascript import { Application } from "@hotwired/stimulus"; import { Alert, ColorPreview, Dropdown, Modal, Popover, Slideover, Tabs, Toggle } from "tailwindcss-stimulus-components"; (() => { const application = Application.start(); application.register('alert', Alert); application.register('color-preview', ColorPreview); application.register('dropdown', Dropdown); application.register('modal', Modal); application.register('popover', Popover); application.register('slideover', Slideover); application.register('tabs', Tabs); application.register('toggle', Toggle); })(); ``` -------------------------------- ### Toggle Component - Show Action Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/toggle.md Utilize the `show` action to ensure the toggleable element is always visible when the associated element is clicked. This complements the `hide` action for scenarios requiring explicit display. ```html

What is the question?

``` -------------------------------- ### Register Dropdown Controller Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/dropdown.md Register the Dropdown controller with your Stimulus application. This is typically done once in your application's JavaScript entry point. ```javascript import { Dropdown } from "tailwindcss-stimulus-components" application.register('dropdown', Dropdown) ``` -------------------------------- ### Modal Animations Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/index.html CSS for modal animations, including fade-in and fade-out effects. Applied to dialog elements with specific classes. ```css dialog.modal[open] { animation: fade-in 200ms forwards; } dialog.modal[closing] { animation: fade-out 200ms forwards; } ``` -------------------------------- ### Register Toggle Component Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/toggle.md Register the Toggle controller with your Stimulus application. Ensure this is done before using the toggle component. ```javascript import { Toggle } from "tailwindcss-stimulus-components" application.register('toggle', Toggle) ``` -------------------------------- ### Register Popover Controller Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/popover.md Register the Popover controller with your Stimulus application. This is typically done once when your application initializes. ```javascript import { Popover } from "tailwindcss-stimulus-components" application.register('popover', Popover) ``` -------------------------------- ### Register Alert Component with Stimulus Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/alert.md Register the Alert component with your Stimulus application. This is typically done once when initializing your Stimulus controller. ```javascript import { Alert } from "tailwindcss-stimulus-components" application.register('alert', Alert) ``` -------------------------------- ### Register Slideover Controller Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/slideover.md Register the Slideover controller with your Stimulus application. This is typically done once in your application's JavaScript entry point. ```javascript import { Slideover } from "tailwindcss-stimulus-components" application.register('slideover', Slideover) ``` -------------------------------- ### Toggle Component - Hide Action Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/toggle.md Use the `hide` action to ensure the toggleable element is always hidden when the associated element is clicked. This is useful for specific UI flows where only hiding is desired. ```html

What is the question?

``` -------------------------------- ### Register Tabs Controller Source: https://github.com/excid3/tailwindcss-stimulus-components/blob/main/docs/tabs.md Register the Tabs controller with your Stimulus application. This is required to use the tabs component. ```javascript import { Tabs } from "tailwindcss-stimulus-components" application.register('tabs', Tabs) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.