{"id":29438608,"url":"https://github.com/rgm/tailwind-hiccup","last_synced_at":"2025-12-12T01:07:07.992Z","repository":{"id":42534153,"uuid":"252785104","full_name":"rgm/tailwind-hiccup","owner":"rgm","description":"tailwindcss + hiccup = 👍👍","archived":false,"fork":false,"pushed_at":"2023-10-08T05:31:23.000Z","size":296,"stargazers_count":45,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-07T06:53:21.832Z","etag":null,"topics":["clojurescript","hiccup","re-frame","reagent","rum","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rgm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-03T16:32:33.000Z","updated_at":"2024-01-10T03:02:00.000Z","dependencies_parsed_at":"2023-01-21T11:32:19.003Z","dependency_job_id":null,"html_url":"https://github.com/rgm/tailwind-hiccup","commit_stats":null,"previous_names":["rgm/tailwind-cljs"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rgm/tailwind-hiccup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgm%2Ftailwind-hiccup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgm%2Ftailwind-hiccup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgm%2Ftailwind-hiccup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgm%2Ftailwind-hiccup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rgm","download_url":"https://codeload.github.com/rgm/tailwind-hiccup/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgm%2Ftailwind-hiccup/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265108514,"owners_count":23712466,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojurescript","hiccup","re-frame","reagent","rum","tailwindcss"],"created_at":"2025-07-13T08:09:58.186Z","updated_at":"2025-12-12T01:07:07.922Z","avatar_url":"https://github.com/rgm.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Clojars Project](https://img.shields.io/clojars/v/rgm/tailwind-hiccup.svg)](https://clojars.org/rgm/tailwind-hiccup)\n\n# tailwind-hiccup\n\ntailwindcss + hiccup = 👍👍.\n\n## Rationale\n\nBy its nature, a functional/atomic/utility class approach to CSS like\n[Tailwindcss][tw] turns out to be pretty pleasant to use with Hiccup-based\nClojureScript front-ends like [Reagent][reagent] or [Rum][rum], or server-side\nHiccup templates.\n\nStyling becomes a matter of composing from a standard library of utility\nclasses. Since they're just data, we can keep them in collections, give them\nnames, `conj` them together, etc.\n\nBetter still on the front-end side: the dead-JavaScript-elimination available\nthrough advanced ClojureScript compilation sets up for impressive [dead-CSS-\nelimination][purgecss] performance from PurgeCSS. Any Tailwind class name\nstrings present in unused components will have been dropped from the JS bundle\nalong with the component, so the Google Closure compiler is doing most of the\nwork of figuring out which components could ever be used at runtime.\n\n## Getting started\n\nAdd tailwind-hiccup as a dependency, eg. for tools.deps projects\n\n```clojure\n;; deps.edn\n{:paths [,,,]\n :deps {,,, rgm/tailwind-hiccup {:mvn/version \"0.2.0\"} ,,,}\n```\n\nSetting up the css build can be a little complex. See the [basic usage\nexample][basic-example].\n\n## API\n\nInspired by [`stylefy.core/use-style`][stylefy], this library provides a\nfunction `tw` that gives a easy-to-spot way to snap together collections of\nutility classes in Hiccup props:\n\n```clojure\n(require '[tailwind-hiccup.core :refer [tw]]\n\n(def color-transition [:transition-colors :ease-in-out])\n(def short-duration [:duration-300])\n(def hover-colors [\"hover:text-white\" \"hover:bg-red-500\"])\n\n(defn MyButton\n  [button-text]\n  [:button.a-non-tw-class\n   (tw [:mx-3 :my-4 :font-bold]\n       hover-colors\n       color-transition short-duration\n       {:on-click #(js/alert \"surprise!\")})\n   button-text])\n```\n\n[tw]: https://tailwindcss.com\n[reagent]: https://github.com/reagent-project/reagent\n[rum]: https://github.com/tonsky/rum\n[stylefy]: https://github.com/Jarzka/stylefy\n[purgecss]: https://tailwindcss.com/docs/controlling-file-size#removing-unused-css\n[basic-example]: https://github.com/rgm/tailwind-hiccup/tree/master/examples/basic\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frgm%2Ftailwind-hiccup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frgm%2Ftailwind-hiccup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frgm%2Ftailwind-hiccup/lists"}