• Stars
    star
    1,083
  • Rank 42,723 (Top 0.9 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.

npm Tests

TailwindCSS Stimulus Components

Check out the demo

This is a set of components (Tabs, Modals, Dropdowns, etc) for TailwindCSS that uses StimulusJS controllers.

The goal is to make using TailwindCSS as easy as Bootstrap when it comes to adding Javascript components.

Install

This assumes that StimulusJS is already installed.

Add the tailwindcss-stimulus-components module:

yarn add tailwindcss-stimulus-components

or

npm install tailwindcss-stimulus-components

Basic Usage

First, you'll want to initialize StimulusJS and then you can import all the TailwindCSS components.

// 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, Toggle, 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)

This will start StimulusJS and load any controllers that you have locally and then register the TailwindCSS components.

Components

Styling

All of the styles for the Stimulus components are configurable. Our examples above show some example styles you can use, but these components themselves don't require any specific styles.

Stimulus simply requires the data- attributes to be defined correctly to trigger actions and find targets.

Some components like the modal have some styles that are necessary for proper use in the browser. The container and backgrounds are separate so that you can have a fixed size container and the modal inside of it.

Animations

Extending Components

You can use inheritance to extend the functionality of any Stimulus components.

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)
  }
}

These controllers will automatically have access to targets defined in the parent class.

If you override the connect, disconnect or any other methods from the parent, you'll want to call super.method() to make sure the parent functionality is executed.

Contributing

To develop locally, run npx serve and open your browser to the URL it serves on.

Bug reports and pull requests are welcome on GitHub at https://github.com/excid3/tailwindcss-stimulus-components. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

To run tests:

npm install
npm run test

License

This package is available as open source under the terms of the MIT License.

More Repositories

1

noticed

Notifications for Ruby on Rails applications
Ruby
2,415
star
2

simple_calendar

A wonderfully simple calendar gem for Rails
Ruby
1,476
star
3

jumpstart

Easily jumpstart a new Rails application with a bunch of great features by default
HTML
1,200
star
4

madmin

A robust Admin Interface for Ruby on Rails apps
JavaScript
514
star
5

receipts

Easy receipts and invoices for your Rails applications
Ruby
495
star
6

simple_discussion

A simple, extensible Rails forum
Ruby
368
star
7

prefixed_ids

Friendly Prefixed IDs for your Ruby on Rails models
Ruby
198
star
8

revise_auth

A pure Rails authentication system like Devise.
Ruby
192
star
9

stack_rescue

A gem for Rails to automatically search Google for exceptions raised in your Rails applications
Ruby
171
star
10

esbuild-rails

Esbuild Rails plugin
JavaScript
137
star
11

signalman

Development tools for Ruby on Rails
Ruby
92
star
12

beginnerbounties.com

Small Projects for Junior Developers
Ruby
77
star
13

dotfiles

My personal dotfiles for macOS: zsh, MacVim, iterm, and more.
Vim Script
70
star
14

stimulus-slimselect

A Stimulus wrapper around SlimSelect
JavaScript
66
star
15

python-apt

This is a Python library interface to libapt, which allows you to query and manipulat APT package repository information using the Python programming language.
C++
63
star
16

combined_time_select

A Rails time_select like Google Calendar with combined hour and minute time_select
Ruby
60
star
17

logbot

A minimal IRC bot for logging channels
Python
59
star
18

textual-solarized

A port of the Solarized theme to Textual IRC
JavaScript
31
star
19

simple_calendar-ajax-example

An example Rails application to demonstrate SimpleCalendar AJAX next/previous links
Ruby
29
star
20

scheduled_tweets

Ruby
28
star
21

gorails-forum

Ruby
24
star
22

betterminitest.com

Learn how to write better Minitest tests
CSS
21
star
23

Rails-Learning

List of resources to learning this amazing platform for building top-quality web apps with Ruby on Rails! ❀
20
star
24

railshackathon.com

The RailsHackathon.com website
HTML
19
star
25

ferrum_pdf

A PDF generator for Rails using Ferrum & headless Chrome
Ruby
19
star
26

trello-stimulus-reflex

A trello clone using Stimulus Reflex
Ruby
17
star
27

asdf-vars

An asdf extension that safely sets global and per-project environment variables, based upon rbenv
Shell
17
star
28

railsconf-2020-actiontext

Railsconf 2020 example app for showcasing ActionText
Ruby
16
star
29

nine_to_five

Ruby
14
star
30

oauthable

Setup, test, and implement the OAuth connections to over 70 different APIs.
Ruby
13
star
31

gorails-ruby

An interactive CLI for GoRails, Railsbytes, Jumpstart, and more.
Ruby
12
star
32

animatedgif.me-v2

Ruby
11
star
33

keryx

Python
11
star
34

current_projects

Lists a user's active github projects
Ruby
9
star
35

israilsdead.com

It's pretty self explanatory I think
HTML
9
star
36

urlgrabber

A high-level cross-protocol url-grabber
Python
8
star
37

Sublime-Ruby-on-Rails.tmLanguage

8
star
38

fluttrly

An elegantly simple todo list
Ruby
8
star
39

zapier

Zapier API Rubygem
Ruby
8
star
40

excid3-wordpress-theme

My wordpress theme for excid3.com
PHP
7
star
41

simpyl_pastebin

A simple python pastebin
Python
7
star
42

animatedgifme

A ruby library for http://animatedgif.me
Ruby
7
star
43

weather_underground

A Ruby gem for the Weather Underground API
Ruby
7
star
44

wistia-player-speed

Add 2x, 1.5x, 0.5x speeds and skip 30 seconds controls to your Wistia video player
HTML
7
star
45

mail_drop

Record and view Rails ActionMailer emails sent in development
Ruby
7
star
46

stimulus-js-2.0

A look at Stimulus JS 2.0's new Values and CSS Classes APIs
Ruby
6
star
47

railsconf-2021

Realtime Rails applications with Hotwire & ActionMailbox
Ruby
6
star
48

superleggera

Monitor your CSS in development to create a whitelist for PurgeCSS in Rails with Webpacker
Ruby
6
star
49

deploy_test

See how to deploy Rails to Ubuntu with Capistrano
Ruby
5
star
50

feedforward.io

Curating articles that inspire discussion
Ruby
5
star
51

clickable-simple_calendar

An example how to make the dates clickable with simple_calendar for creating new events
Ruby
5
star
52

particlesjs-rails-example

Ruby
5
star
53

webhookmonitor.com

A tool for recording and monitoring webhooks
Ruby
4
star
54

rpi-pms5003

Raspberry Pi air quality monitoring with PMS5003 and Ruby
Ruby
4
star
55

chef-rails-stack

Chef Solo recipes to setup a Rails stack on Ubuntu 12.04 LTS
Ruby
4
star
56

cfps

Conference talk submissions (CFPs)
4
star
57

landing

My new website landing page
CSS
4
star
58

vuejs-rails-markdown-field

Use VueJS to add markdown previews to any Rails form input field or text area.
Ruby
4
star
59

react-todolist

A react todo list application with Ruby on Rails
Ruby
4
star
60

better_resources

Resources routes that use the same for new and edit so users get less 404s
Ruby
3
star
61

rails-5.2-actiontext

Testing ActionText in Rails 5.2
Ruby
3
star
62

irc_bothost

A Django web application for maintaining python IRC bots
Python
3
star
63

simple_calendar-example

A simple calendar gem example with Rails 6
Ruby
3
star
64

sponsor-hub

A hub for your GitHub sponsors
Ruby
3
star
65

excid3

3
star
66

simple_calendar-full-day-example

Ruby
3
star
67

download_counter

A download counter implemented in Rails3 with an administration interface
Ruby
3
star
68

administrate-trix-editor

Episode 211: Adding the Trix Editor as an Administrate Custom Field
Ruby
3
star
69

excid3.com

Moving to Jekyll
HTML
3
star
70

gemspec-cheatsheet

An interactive GemSpec cheat sheet
3
star
71

reply_parser

Parser for email replies
Ruby
3
star
72

animatedgif.me

With Great Gifs Comes Great Responsibility
Ruby
3
star
73

turbolinks-3-example

Ruby
3
star
74

imageme

Ruby
2
star
75

unwrapt

A pure python layer for offline package managers
Python
2
star
76

chromium

cluster rendering
C
2
star
77

googleweather

Ruby client for the undocumented Google Weather API
Ruby
2
star
78

lithoslabs.com

2
star
79

keryx_profiler

A website to maintain user submitted profiles for Keryx
Ruby
2
star
80

cultivate

Ruby
2
star
81

blogspam

A Ruby and/or Rails client for Blogspam.net
Ruby
2
star
82

pastebot

An IRC bot that accepts pastes, uploads them, and notifies recipients
Python
2
star
83

excid3bot

A hubot
CoffeeScript
2
star
84

cdnjs-rails

A mechanized way to pull in one to many CDNJS libraries with fall back to local installed versions.
Ruby
2
star
85

panopticode

Social Volt Contest Entry
Ruby
2
star
86

hatchbox-marketing

2
star
87

rugby

A Ruby IRC bot
Ruby
2
star
88

trackler

A package tracker visualizing progress on Google Maps
Ruby
2
star
89

No-Net-Debs

List and download deb packages for updates (dist-upgrade included) or new package(s) for a computer without Internet. Hosting in case http://ubuntu.no.sapo.pt/nonetdebs/nonetdebs goes down.
2
star
90

fluttr-desktop

Fluttr desktop application in Python and GTK
Python
2
star
91

omniauth-stripeplatform

A strategy for omniauth and the new beta Stripe.com platofrm.
Ruby
1
star
92

simple_map

Ruby
1
star
93

hacker_rank

A Ruby interface to the HackerRank / InterviewStreet API
Ruby
1
star
94

anonykron

anonykron.com
Ruby
1
star
95

confab

A NodeJS IRC client in the browser
JavaScript
1
star
96

taip-parser

Ruby
1
star
97

ipcommerce

Ruby
1
star
98

omniauth-linode

An Omniauth Strategy for Linode's v4 API
Ruby
1
star
99

ice_rocket

A Rubygem for the IceRocket API
Ruby
1
star
100

combined_time_select-example

Ruby
1
star