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