Simple tailwind like CLI tool for deno ๐ฆ
This tool uses twind internally.
deno install --allow-read=. --allow-write=. --allow-net=deno.land,esm.sh,cdn.esm.sh -fq https://deno.land/x/[email protected]/cli.ts
Call twd
command with input html files.
twd input.html
This outputs the tailwind compatible stylesheet which is needed by the input file.
You can specify more than 1 input file.
twd input-foo.html input-bar.html
This outputs the stylesheet for both input-foo.html and input-bar.html.
Or you can input the files under the directory by specifying the directory.
twd dir/
You can watch files with -w, --watch
option.
twd -w input-a.html input-b.html -o styles.css
When you use -w
option, you also need to specify -o, --output
option, which
specifies the output file for generated styles.
You can configure the output styles through config file 'twd.ts'.
You can create the boilerplate code with -i
(--init) option.
$ twd -i
Creating config file 'twd.ts'
Done!
This creates the config file 'twd.ts' like the below:
import { Config } from "https://deno.land/x/[email protected]/types.ts";
export const config: Config = {
preflight: true,
theme: {},
plugins: {},
};
Theming works almost the same way as theming in tailwind, or theming in twind.
The example of overriding values in the theme:
import { Config } from "https://deno.land/x/[email protected]/types.ts";
export const config: Config = {
preflight: true,
theme: {
fontFamily: {
sans: ["Helvetica", "sans-serif"],
serif: ["Times", "serif"],
},
extend: {
spacing: {
128: "32rem",
144: "36rem",
},
},
},
};
The Tailwind v2 compatible color palette is available from
https://deno.land/x/[email protected]/colors.ts
.
import { Config } from "https://deno.land/x/[email protected]/types.ts";
import * as colors from "https://deno.land/x/[email protected]/colors.ts";
export const config: Config = {
theme: {
colors: {
// Build your palette here
gray: colors.trueGray,
red: colors.red,
blue: colors.lightBlue,
yellow: colors.amber,
},
},
};
To extend the existing color palette use theme.extend:
import { Config } from "https://deno.land/x/[email protected]/types.ts";
import * as colors from "https://deno.land/x/[email protected]/colors.ts";
export const config: Config = {
theme: {
extend: {
colors: {
gray: colors.trueGray,
},
},
},
};
twd
automatically provides reset stylesheet,
modern-normalize, in the
same way as tailwind or
twind. By default
twd
inserts these styles at the beginning of the other styles.
This behavior can be disabled by preflight
option in 'twd.ts' config file.
import { Config } from "https://deno.land/x/[email protected]/types.ts";
export const config: Config = {
preflight: false,
};
You can provide plugins in config file. Plugins are not tailwind compatible, but it follows the rules of twind plugins.
In twd.ts:
export config: Config = {
plugins: {
'scroll-snap': (parts) => ({ 'scroll-snap-type': parts[0] }),
},
};
This generates the style .scroll-snap-x { scroll-snap-type: x; }
in the
output. See more details in twind plugin docs about what kind
of plugins are possible.
- Expose APIs like
generate(files, opts)
,watch(files, opts)
to enable easily integrate this tool into another tool.
MIT