If you’re like me, just writing strings for css styling also fills you with anxiety. So let’s use types for our css! A bonus feature is that we now get autocomplete:
(hmm, it seems like embedded webm in discourse broke. Link below)
Here’s a template (tailwind branch) where you can try this for yourself:
git clone --branch tailwind https://github.com/milesfrain/halogen.git myApp cd myApp npm install -g purescript spago parcel tailwindcss # or if you prefer local installation: # npm install npm run gen-css npm run build npm run serve
How it works
tailwindcssto generate the enormous
tailwind.cssfile. (There are additional customization options at this phase not covered in this guide).
- It also calls a
css/css2purs.pyscript which generates a
src/Tailwind.pursfile containing wrapped tailwind class strings. This is a pretty huge file (50k lines). It uses halogen-compatible
ClassNamewrappers, but you can tweak it as you wish. Symbols are stripped out of the class strings and some other transformations are applied to turn them into valid PS function names. For example:
hoverNegTranslateX1d2 = ClassName "hover:-translate-x-1/2"
- Now autocomplete works, and you’re protected against string typos with your classes. One downside is that rebuilds are more sluggish due to the massive
Tailwind.pursfile. This is about 4 seconds on my system (versus 1 second without tailwind), which is pretty noticeable with automatic rebuild and page refresh.
Edit: A compiler fix for this slowness issue has been merged, but if you’d like this faster behavior today (while waiting for
0.14.0), you can make a custom build from this branch, which applies the fix to
0.13.8. Reach out if you’d like more detailed instructions. The following section shows a workaround for vanilla
If you’re not planning on tweaking CSS while working on other parts of your project, and would like faster rebuilds, you can shrink the size of
src/Tailwind.purs to only contain the CSS classes that are actually being used in your project by running:
npm run lock-css
Remember to also “Restart/Reconnect purs IDE server” so it picks-up this smaller file.
Note that now autocomplete will no-longer be aware of all possible CSS classes, so re-run
gen-css when you’re ready again for the full CSS pallette.
tailwind.css file is 2MB, but we can throw away all the unused classes. Simply run:
npm run build-prod
It runs PurgeCSS to look at what classes are actually used in the bundle produced by purs (with dead-code-elimination applied), and removes everything it doesn’t see from
prod/tailwind.css. This is the same approach used by
lock-css, except the purged css file is then fed back into
css2purs.py to generate the input
In this template example the resulting CSS is shrunk down to 12KB (4KB minified, 1.5KB compressed).