Glailglind - Tailwind for Gleam
Installs and invokes TailwindCSS CLI.
Heavily inspired by phoenixframework/tailwind.
Compatible with Erlang and Javascript targets. (Javascript target requires curl
to be available on the host)
Usage as module
Install Package
gleam add glailglind
Configure TailwindCSS
You can configure TailwindCSS in your gleam.toml
by adding a tailwind
table:
[tailwind]
version = "3.4.1" # optional
args = [
"--config=tailwind.config.js",
"--input=./src/css/app.css",
"--output=./priv/css/app.css"
]
path = "/path/to/tailwindcli" # optional
This lets you define the arguments being run.
Optionally define a specific TailwindCSS version or the direct path to the TailwindCSS CLI, if you don’t want it to be installed automatically.
Install TailwindCSS
gleam run -m tailwind/install
This downloads the Tailwind CLI to ./build/bin/tailwind-cli
and generates the tailwind.config.js
in the root of the project.
Import Tailwind in your CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
Run TailwindCSS
gleam run -m tailwind/run
Executes tailwind with the defined arguments.
Usage with LustreSSG
Install Package
gleam add glailglind
(Optional) Specify version in config
gleam.toml
[tailwind]
version = "3.3.5"
Install TailwindCSS
gleam run -m tailwind/install
Import Tailwind in your CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
Update build script
Import tailwind
and add the run step to your build script.
Example:
import gleam/list
import gleam/map
import gleam/io
import gleam/result
// Some data for your site
import app/data/posts
// Some functions for rendering pages
import app/page/index
import app/page/blog
import app/page/post
// Import the static site generator
import lustre/ssg
// Import Tailwind
import tailwind
pub fn main() {
let posts = map.from_list({
use post <- list.map(posts.all())
#(post.id, post)
})
let build =
ssg.new("./priv")
|> ssg.add_static_route("/", index.view())
|> ssg.add_static_route("/blog", blog.view(posts.all()))
|> ssg.add_dynamic_route("/blog", posts, post.view)
|> ssg.build
|> result.try(fn(_) {
[
"--config=tailwind.config.js",
"--input=./src/css/app.css",
"--output=./priv/css/app.css",
]
|> tailwind.run()
})
case build {
Ok(_) -> {
io.println("Build succeeded!")
}
Error(e) -> {
io.debug(e)
io.println("Build failed!")
}
}
}