twd v0.4.1

Simple tailwind like CLI tool for deno 🦕

This tool uses twind internally.

Install

deno install --allow-read=. --allow-write=. --allow-net=deno.land,esm.sh,cdn.esm.sh -fq https://deno.land/x/twd@v0.4.1/cli.ts

Usage

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/

Watch files

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.

Config

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/twd@v0.4.1/types.ts";

export const config: Config = {
  preflight: true,
  theme: {},
  plugins: {},
};

Theme

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/twd@v0.4.1/types.ts";

export const config: Config = {
  preflight: true,
  theme: {
    fontFamily: {
      sans: ["Helvetica", "sans-serif"],
      serif: ["Times", "serif"],
    },
    extend: {
      spacing: {
        128: "32rem",
        144: "36rem",
      },
    },
  },
};

Colors

The Tailwind v2 compatible color palette is available from https://deno.land/x/twd@v0.4.1/colors.ts.

import { Config } from "https://deno.land/x/twd@v0.4.1/types.ts";
import * as colors from "https://deno.land/x/twd@v0.4.1/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/twd@v0.4.1/types.ts";
import * as colors from "https://deno.land/x/twd@v0.4.1/colors.ts";

export const config: Config = {
  theme: {
    extend: {
      colors: {
        gray: colors.trueGray,
      },
    },
  },
};

Preflight

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/twd@v0.4.1/types.ts";

export const config: Config = {
  preflight: false,
};

Plugins

You can provide plugins. 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.

TODOs

Expose APIs like generate(files, opts), watch(files, opts) to enable easily integrate this tool into another tool.

License

MIT