Skip to content

Commit

Permalink
docs: add FAQ + postcss/config docs
Browse files Browse the repository at this point in the history
Introduce some documentation to contrast it against a standard
shadow-cljs + tailwind project.
  • Loading branch information
rschmukler committed May 9, 2021
1 parent 02f9d30 commit 7b77129
Showing 1 changed file with 26 additions and 5 deletions.
31 changes: 26 additions & 5 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ shadow's own `deps` or in your `deps.edn` file).

```clj
{com.teknql/shadow-cljs-tailwind-jit
{:mvn/version "0.1.0-SNAPSHOT"}}
{:mvn/version "0.1.0"}}
```

Next, add the required build hooks to your `shadow-cljs.edn` build configuration:
Expand Down Expand Up @@ -48,9 +48,30 @@ The following options are supported via namespaced keys within the `shadow-cljs`
`resources/public/css/site.css`
- `:tailwind/config` - A map that is used for the `tailwind.config.js`. Automatically encodes kebab
cased keys into camel cased.
- `:postcss/config` - A map that is used for the `postcss.config.js`. Automatically encodes kebab
cased keys into camel cased.

Note that editing either the `:tailwind/config` or `:postcss/config` could result in incompatible
configurations, so please be careful.

## FAQ

### How is this different from [jacekschae/shadow-cljs-tailwindcss](https://github.com/jacekschae/shadow-cljs-tailwindcss)?

The above project is a great example of how to get tailwindcss and postcss set up to use
along side a shadow-cljs project. When running it's `npm run dev` it will start shadow-cljs as well
as a postcss watch process to continuously recompile your stylesheets. Since it uses tailwind and
postcss directly, it is reliant on your project having some boilerplate (`tailwind.config.js`,
`postcss.config.js` and `src/css/tailwind.css`) that those tools expect to be in place.

This project differs in two major ways:

## How it works
1) It instead uses shadow-cljs' build-hooks machinery to manage the postcss process. The end result
is the same, but results in you being able to call `npx shadow-cljs server` and have the postcss
process started for you. If you use tools in your editor to manage your shadow process (eg. cider)
then this will require less configuration.

This library works by sourcing options in your `shadow-cljs.edn` to make a temporary project
project directory with the required files to configure PostCSS + Tailwind to compile CSS for
your project. We then shell out to `postcss-cli` using the temporary configs.
2) Rather than introduce the boilerplate files mentioned above, the build-hooks create a temporary
project with the required boilerplate, allowing you to omit the files from your project.
Configuration can still be provided using the `:tailwind/config` and `:postcss/config` entries
in the build configuration of your project in your `shadow-cljs.edn`

0 comments on commit 7b77129

Please sign in to comment.