CodeSnips

javascript

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["container"]

  connect() {

Toast notifications with Stimulus and Tailwind

stimulus ux notifications

by Jordan Lee 3 tabs

yaml

web: bin/rails server
css: bin/rails tailwindcss:watch

Tailwind CSS with Rails asset pipeline

tailwind css rails

by Jordan Lee 3 tabs

css

.turbo-progress-bar {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--progress-start, #6366f1),
    var(--progress-end, #ec4899)

Customize Turbo progress bar styling with Tailwind/CSS

rails hotwire turbo

by codesnips 3 tabs

typescript

import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme

Dark mode with Tailwind and localStorage persistence

react tailwind dark-mode

by Maya Patel 3 tabs