https://github.com/mikepjb/sail

:sailboat: Use Tailwind CSS in Clojure
https://github.com/mikepjb/sail

clojure css design tailwind

Last synced: 3 months 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 (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T16:05:58.000Z (over 1 year ago)
• Last Synced: 2024-09-29T10:44:36.641Z (4 months 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`