Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kt3k/twd
🚩 Simple tailwind like CLI tool for deno 🦕
https://github.com/kt3k/twd
deno tailwind twind
Last synced: 2 months ago
JSON representation
🚩 Simple tailwind like CLI tool for deno 🦕
- Host: GitHub
- URL: https://github.com/kt3k/twd
- Owner: kt3k
- License: mit
- Created: 2021-05-31T08:32:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-08-11T05:31:53.000Z (over 3 years ago)
- Last Synced: 2024-10-03T12:22:07.081Z (3 months ago)
- Topics: deno, tailwind, twind
- Language: TypeScript
- Homepage: https://deno.land/x/twd
- Size: 146 KB
- Stars: 45
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# twd v0.4.8
[](https://github.com/kt3k/twd/actions/workflows/ci.yml)
Simple tailwind like CLI tool for deno 🦕
This tool uses [twind](https://github.com/tw-in-js/twind) internally.
# Install
```
deno install --allow-read=. --allow-write=. --allow-net=deno.land,esm.sh,cdn.esm.sh -fq https://deno.land/x/[email protected]/cli.ts
```
# Usage
Call `twd` command with input html files.
```sh
twd input.html
```
This outputs the tailwind compatible stylesheet which is needed by the input
file.
You can specify more than 1 input file.
```sh
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.
```sh
twd dir/
```
## Watch files
You can watch files with `-w, --watch` option.
```sh
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.
```shellsession
$ twd -i
Creating config file 'twd.ts'
Done!
```
This creates the config file 'twd.ts' like the below:
```ts
import { Config } from "https://deno.land/x/[email protected]/types.ts";
export const config: Config = {
preflight: true,
theme: {},
plugins: {},
};
```
## Theme
Theming works almost the same way as
[theming in tailwind](https://tailwindcss.com/docs/theme), or
[theming in twind](https://twind.dev/handbook/configuration.html#theme).
The example of overriding values in the theme:
```ts
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",
},
},
},
};
```
## Colors
The Tailwind v2 compatible color palette is available from
`https://deno.land/x/[email protected]/colors.ts`.
```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:
```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: {
extend: {
colors: {
gray: colors.trueGray,
},
},
},
};
```
## Preflight
`twd` automatically provides reset stylesheet,
[modern-normalize](https://github.com/sindresorhus/modern-normalize), in the
same way as [tailwind](https://tailwindcss.com/docs/preflight) or
[twind](https://twind.dev/handbook/configuration.html#preflight). 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.
```ts
import { Config } from "https://deno.land/x/[email protected]/types.ts";
export const config: Config = {
preflight: false,
};
```
## Plugins
You can provide [plugins][twind-plugins] in config file. Plugins are not
tailwind compatible, but it follows the rules of [twind plugins][twind-plugins].
In twd.ts:
```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][twind-plugins] 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
[twind-plugins]: https://twind.dev/handbook/plugins.html