Skip to content

Commit

Permalink
Extend library to JVM clojure (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
rgm authored Dec 14, 2020
1 parent e3ebf5d commit 5d21238
Show file tree
Hide file tree
Showing 19 changed files with 654 additions and 1,406 deletions.
14 changes: 14 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Changelog

## [Unreleased]

## [0.2.0] - 2020-12-14

The only feature is expanding the project to support server-side Hiccup, and
thus renaming the project from *tailwind-cljs* to *tailwind-hiccup*.

### Changed

- Library now supports use in Clojure, not just Clojurescript
- Core namespace is now `tailwind-hiccup.core`, not `tw-cljs.core`
- Maven coordinates are now `[rgm/tailwind-hiccup "0.2.0"]`, not `-cljs`
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
test: node_modules
clojure -A:test -m kaocha.runner
clojure -A:test -M -m kaocha.runner
.PHONY: test

node_modules: package.json
Expand Down
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
[![Clojars Project](https://img.shields.io/clojars/v/rgm/tailwind-cljs.svg)](https://clojars.org/rgm/tailwind-cljs)
[![Clojars Project](https://img.shields.io/clojars/v/rgm/tailwind-hiccup.svg)](https://clojars.org/rgm/tailwind-hiccup)

# tailwind-cljs
# tailwind-hiccup

tailwindcss + clojurescript = 👍👍.
tailwindcss + hiccup = 👍👍.

## Rationale

By its nature, a functional/atomic/utility class approach to CSS like
[Tailwindcss][tw] turns out to be pretty pleasant to use with Hiccup-based
ClojureScript front-ends like [Reagent][reagent] or [Rum][rum].
ClojureScript front-ends like [Reagent][reagent] or [Rum][rum], or server-side
Hiccup templates.

Styling becomes a matter of composing from a standard library of utility
classes. Since they're just data, we can keep them in collections, give them
names, `conj` them together, etc.

Better still: the dead-JavaScript-elimination available through advanced
ClojureScript compilation sets up for impressive [dead-CSS-
elimination][purgecss] performance from PurgeCSS, since any Tailwind class name
Better still on the front-end side: the dead-JavaScript-elimination available
through advanced ClojureScript compilation sets up for impressive [dead-CSS-
elimination][purgecss] performance from PurgeCSS. Any Tailwind class name
strings present in unused components will have been dropped from the JS bundle
along with the component.
along with the component, so the Google Closure compiler is doing most of the
work of figuring out which components could ever be used at runtime.

## Getting started

Add tailwind-cljs as a dependency, eg. for tools.deps projects
Add tailwind-hiccup as a dependency, eg. for tools.deps projects

```clojure
;; deps.edn
{:paths [,,,]
:deps {,,,
rgm/tailwind-cljs {:git/url "https://github.com/rgm/tailwind-cljs"
:sha "6ef1080289c3e740af3bd650b37f6f7594dc050a"}}
:deps {,,, rgm/tailwind-hiccup {:mvn/version "0.2.0"} ,,,}
```

Setting up the css build can be a little complex. See the [basic usage
Expand All @@ -42,7 +42,7 @@ function `tw` that gives a easy-to-spot way to snap together collections of
utility classes in Hiccup props:

```clojure
(require '[tw-cljs.core :refer [tw]]
(require '[tailwind-hiccup.core :refer [tw]]

(def color-transition [:transition-colors :ease-in-out])
(def short-duration [:duration-300])
Expand All @@ -63,4 +63,4 @@ utility classes in Hiccup props:
[rum]: https://github.com/tonsky/rum
[stylefy]: https://github.com/Jarzka/stylefy
[purgecss]: https://tailwindcss.com/docs/controlling-file-size#removing-unused-css
[basic-example]: https://github.com/rgm/tailwind-cljs/tree/master/examples/basic
[basic-example]: https://github.com/rgm/tailwind-hiccup/tree/master/examples/basic
2 changes: 1 addition & 1 deletion bin/build
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#!/usr/bin/env bash

clojure -A:build -m hf.depstar.jar tailwind-cljs.jar
clojure -A:build -m hf.depstar.jar tailwind-hiccup.jar
2 changes: 1 addition & 1 deletion bin/deploy
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#!/usr/bin/env bash

clojure -A:build -m deps-deploy.deps-deploy deploy tailwind-cljs.jar true
clojure -A:build -m deps-deploy.deps-deploy deploy tailwind-hiccup.jar true

5 changes: 3 additions & 2 deletions deps.edn
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
:aliases {:test
{:extra-paths ["test"]
:extra-deps
{lambdaisland/kaocha-cljs {:mvn/version "0.0-71"}}}
{lambdaisland/kaocha {:mvn/version "1.0.732"}
lambdaisland/kaocha-cljs {:mvn/version "0.0-71"}}}
:build
{:extra-deps
{seancorfield/depstar {:mvn/version "1.0.94"}
deps-deploy {:mvn/version "0.0.9"}}}}}
deps-deploy/deps-deploy {:mvn/version "0.0.9"}}}}}
4 changes: 2 additions & 2 deletions examples/basic/Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ CLJ_SOURCES=$(shell find src)

dev: node_modules postcss.config.js styles.src.css $(CLJ_SOURCES)
NODE_ENV=development yarn postcss styles.src.css -o resources/public/styles.css
clojure -m figwheel.main -b dev -r
clojure -M -m figwheel.main -b dev -r

# need to build once first so that purgecss can react to style strings present in advanced js build
prd: clean node_modules postcss.config.js styles.src.css resources/public/index.html $(CLJ_SOURCES)
clojure -m figwheel.main -bo prd
NODE_ENV=production yarn postcss styles.src.css -o resources/public/styles.css
clojure -m figwheel.main -s
clojure -M -m figwheel.main -s

node_modules:
yarn && touch $@
Expand Down
7 changes: 3 additions & 4 deletions examples/basic/deps.edn
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{:paths ["src" "resources" "target"]
:deps {com.bhauman/figwheel-main {:mvn/version "0.2.4-20200416.204934-2"}
rgm/tailwind-cljs {:git/url "https://github.com/rgm/tailwind-cljs"
:sha "6ef1080289c3e740af3bd650b37f6f7594dc050a"}
rum {:mvn/version "0.11.4"}}}
:deps {com.bhauman/figwheel-main {:mvn/version "0.2.12"}
rgm/tailwind-hiccup {:local/root "../.."}
rum/rum {:mvn/version "0.11.4"}}}
2 changes: 1 addition & 1 deletion examples/basic/dev.cljs.edn
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
^{:css-dirs ["resources/public"]
:watch-dirs ["src"]}
{:main tw-cljs-example.core
{:main tailwind-hiccup-example.core
:output-to "resources/public/app.js"}
12 changes: 6 additions & 6 deletions examples/basic/package.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{
"name": "tailwind-cljs-basic-example",
"name": "tailwind-hiccup-basic-example",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/rgm/tailwind-cljs/examples/basic",
"repository": "https://github.com/rgm/tailwind-hiccup/examples/basic",
"author": "Ryan McCuaig <ryan@ryanmccuaig.net>",
"license": "EPL-2.0",
"dependencies": {
"@fullhuman/postcss-purgecss": "^2.0.6",
"@tailwindcss/ui": "^0.1.3",
"autoprefixer": "^10.1.0",
"cssnano": "^4.1.10",
"postcss": "^7.0.21",
"postcss-cli": "^6.1.3",
"tailwindcss": "^1.3.4"
"postcss": "^8.2.1",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.0.2"
}
}
4 changes: 2 additions & 2 deletions examples/basic/resources/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>tailwind-cljs example</title>
<title>tailwind-hiccup example</title>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
<body>
<div class="container mx-auto" id="app">loading app...</div>
<script src="/app.js"></script>
<script>tw_cljs_example.core.init()</script>
<script>tailwind_hiccup_example.core.init()</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(ns ^:figwheel-hooks tw-cljs-example.core
(ns ^:figwheel-hooks tailwind-hiccup-example.core
(:require
[rum.core :as rum]
[tw-cljs.core :refer [tw]]))
[rum.core :as rum]
[tailwind-hiccup.core :refer [tw]]))

(rum/defc
TestLayout
Expand Down
2 changes: 1 addition & 1 deletion examples/basic/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ module.exports = {
theme: {
extend: {},
},
plugins: [require("@tailwindcss/ui")],
plugins: [],
};
Loading

0 comments on commit 5d21238

Please sign in to comment.