twd v0.3.0

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.3.0/cli.ts

Usage

Call twd command with html file input.

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-a.html input-b.html

This outputs the stylesheet which include classes needed by any of the input files.

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.3.0/types.ts";

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

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.3.0/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.3.0/colors.ts.

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

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

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.3.0/types.ts";

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

TODOs

• Provide tailwind compatible purging
• Do not require net permission in install command (this is required to import twd.ts from cwd)

License

MIT