Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mikepjb/sail
:sailboat: Use Tailwind CSS in Clojure
https://github.com/mikepjb/sail
clojure css design tailwind
Last synced: about 20 hours ago
JSON representation
:sailboat: Use Tailwind CSS in Clojure
- Host: GitHub
- URL: https://github.com/mikepjb/sail
- Owner: mikepjb
- Created: 2020-02-08T00:13:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T16:05:58.000Z (about 1 year ago)
- Last Synced: 2024-09-23T14:03:14.451Z (2 days ago)
- Topics: clojure, css, design, tailwind
- Language: Clojure
- Homepage:
- Size: 210 KB
- Stars: 57
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Sail is a pure-Clojure generation tool for creating Tailwind CSS classes. This
includes the ability to only generate the classes that you use by analysing
the source code in your project.
## Getting Started
Include sail as a dependency in your project:
```clojure
[com.hypalynx/sail "0.8.15"]
{com.hypalynx/sail {:mvn/version "0.8.15"}}
```
Require it in a namespace, like dev.user:
```clojure
(require '[sail.core :as sail]')
```
Include the following in your build sequence to get your css:
```clojure
;; generates all tailwind classes to use in development and re-builds when changes occur
(sail/watch "target/public/styles.gen.css" {:paths ["./src/cljs"]})
;; generates all tailwind classes once, used for production builds
(sail/build "styles.test.gen.css" {:paths ["./src/cljs"]})
```
Write some frontend code using reagent:
```clojure
(defn my-fancy-component-with-styles []
[:div.bg-red-400.text-red-900.px-4.py-2.rounded.shadow-lg "look at this big red button!"])
```
## Development
If you add dependencies, you must add them to both deps.edn and pom.xml.. ideally we generate the pom file to be
honest but this works for now.
## Technical Differences
Sail aims to be 100% compliant with Tailwind CSS but there are some additional
classes added to make the library easier to use. For example classes with `/`
is them are not valid keywords when used directly so we have alternate tags in
addition to the originals e.g `w-1/2 & w-1-2`