Tailwind builder

Released under the MIT License.

Builds Tailwind CSS using docker, especially for yew or other rust and wasm style buildouts.

It expects your source files to be in $SOURCE_CODE/src/**/*.rs and $SOURCE_CODE/index.html.

USAGE

In your brand new yew project:

1. git submodule add https://github.com/matiu2/tailwind-yew-builder.git
2. git submodule init You should now have a sub directory called tailwind-yew-builder

Manual run (dev builds)

You only need to run it once and it'll generate the latest file - then you just keep using it while developing

1. cd tailwind-yew-builder
2. docker-compose up dev (This may take a while the first time, as it pulls the image from the docker hub) The output is in output/tailwind.css

Production / release

You could probably include this in your build.rs - but I haven't tried it yet, but the manual run is:

1. cd tailwind-yew-builder
2. docker-compose up prod (This may take a while the first time, as it pulls the image from the docker hub, although it's the same image as dev so if you already ran dev, it should be quick) The output is in output/tailwind.css

It'll search through your yew app root:

• src/**/*.rs
• index.html

..and regex all the files, looking for things that match tailwind.css's class names. Anything it doesn't find, will not make it into the tailwind.css file. Also, with prod builds, the tailwind.css file is minified/cleaned.

Production, but kind of still working on it

1. cd tailwind-yew-builder
2. docker-compose up watch It'll watch for file changes and re-run the prod script when they happen

This uses the input/watch.sh script. If you want to watch a different set of files for changes, you can change this script.

---

Using the output tailwind.css file

If you're using trunk to build your yew app (which you should be), just include in your index.html:

<link data-trunk rel="css" href="tailwind-yew-builder/output/tailwind.css"/>

Advanced usage

But my source isn't in ../ !

If your source is somewhere else, just tell it through the environment variable. Only it must start with a '.' or a '/' otherwise docker-compose will create an empty drive.

Good

SOURCE_CODE='./my_source' docker-compose up prod

Bad

SOURCE_CODE='my_source' docker-compose up prod

Configuring tailwind

In ./input/ you'll see the tailwind configuration files:

• tailwind.css - Configure that as shown here
• tailwind-config.js - Configure that as shown here

If you want you can copy these files to your own source tree, and modify them as needed, then just use the INPUT environment varible to show docker-compose where to look.

For example:

mkdir ../tailwind-css-config
cp input/* ../tailwind-css-config
# Make changes in ../tailwind-css-config as needed
# Now run docker compose
INPUT=../tailwind-css-config docker-compose up watch
# .. or with multiple environment variables:
INPUT=../tailwind-css-config SOURCE_CODE=../my_source docker-compose up watch

---

Super advanced

Getting a later version of node/npm/tailwind..

If I've been lazy and haven't updated the docker hub image for a while, you can build your own by:

1. If node.js was updated, in Dockerfile update the wget and tar xf commands to point to the later version
2. In docker-compose.yaml under image: matiu/tailwind-yew-builder add this line: build: .
3. docker-compose build

.. then carry on as normal.

Make your own image

You can change the image: matiu/tailwind-yew-builder to your own docker-hub address, build it and run with it.