inline-tailwindcss

use tailwindcss for HTML emails and Embedding HTML in 3rd-party websites

• inline-tailwindcss
  • How to use?
    • Install
    • Create tailwind.config.js
    • CLI
      • npx inline-tailwindcss dev
      • npx inline-tailwindcss build
    • JS API
  • Options

How to use?

Install

npm i -D inline-tailwindcss tailwindcss / yarn add -D inline-tailwindcss tailwindcss

Create tailwind.config.js

npx tailwindcss init

CLI

and put your html fragments into this folder:

create a html file: index.html:

<h1 class="text-3xl font-bold underline text-pink-500 flex h-full ">
  Hello world!
</h1>

npx inline-tailwindcss dev

it will generate inline html in your dist/*.html files and keep watching your file changes.

npx inline-tailwindcss build

generate files without watch

JS API

// cjs
const { build } = require('inline-tailwindcss')

await build()

Options

export interface UserDefinedOptions {
  /**
   * @description html file abs path
   */
  filepath?: string
  /**
   * @description tailwind config path
   * @default `process.cwd() + tailwind.config.js`
   */
  tailwindConfigPath?: string
  /**
   * @description base tailwindcss
   * @default `@tailwind utilities;`
   */
  baseCss?: string
  /**
   * @description out put dir
   * @default 'dist''
   */
  outDir?: string
  /**
   * @description if write to disk
   * @default true
   */
  write?: boolean
  /**
   * @description juiceOptions
   */
  juiceOptions?: JuiceOptions
}