An esbuild plugin for libraries and packages that use TailwindCSS. Write multiline classes. They are compiled into a single line and candidates are written to a JSON file for consumers.

npm install -D @borela-tech/esbuild-plugin-multiline-tailwindcss

Table of Contents

• Quick Start
  • tsdown
  • tsup
• Candidates File
• Usage
  • JSX
  • Tagged Strings
    • tailwindcss
    • base64Asset
• Features
  • Spaces
  • Comments
• Contributing
• License

Quick Start

tsdown

import {defineConfig} from 'tsdown'
import {multilineTailwindCssPlugin} from '@borela-tech/esbuild-plugin-multiline-tailwindcss'

export default defineConfig({
  esbuildPlugins: [multilineTailwindCssPlugin],
})

tsup

import {defineConfig} from 'tsup'
import {multilineTailwindCssPlugin} from '@borela-tech/esbuild-plugin-multiline-tailwindcss'

export default defineConfig({
  esbuildPlugins: [multilineTailwindCssPlugin],
})

Candidates File

After building, a tailwindcss.candidates.json file is generated containing all TailwindCSS classes used in the package. Consumers import it via @source:

@import "tailwindcss";
@source "../node_modules/some-package/**/tailwindcss.candidates.json";

Usage

JSX

<div className="
  bg-[
    linear-gradient(
      to right,
      theme(colors.purple.600),
      theme(colors.purple.900),
    ),
  ]
">
  <div className="
    bg-[
      linear-gradient(
        to right,
        theme(colors.zinc.900/15%) 1px,
        transparent 1px,
      ),
      linear-gradient(
        to top,
        theme(colors.zinc.900/15%) 1px,
        transparent 1px,
      ),
    ]
    bg-[size:4px 4px]
    p-4
  ">
    Some content
  </div>
</div>

// Becomes:

<div className="bg-[linear-gradient(to_right,theme(colors.purple.600),theme(colors.purple.900))]">
  <div className="bg-[linear-gradient(to_right,theme(colors.zinc.900/15%)_1px,transparent_1px),linear-gradient(to_top,theme(colors.zinc.900/15%)_1px,transparent_1px)] bg-[size:4px_4px] p-4">
    Some content
  </div>
</div>

Tagged Strings

Tags are transformed at build time; the runtime function is never called in production. If a tag isn't processed (the plugin isn't configured for that file), it returns a descriptive error string as a fallback.

tailwindcss

import {tailwindcss} from '@borela-tech/multiline-tailwindcss'

const STYLES = tailwindcss`
  bg-[
    linear-gradient(
      to right,
      theme(colors.purple.600),
      theme(colors.purple.900),
    ),
  ]
  p-4
`

// Becomes:
const STYLES = `bg-[linear-gradient(to_right,theme(colors.purple.600),theme(colors.purple.900))] p-4`

base64Asset

import {base64Asset} from '@borela-tech/multiline-tailwindcss'

const NOISE = base64Asset`../assets/noise.png`
// Becomes:
const NOISE = `data:image/png;base64,iVBORw0KGgo...`

Features

Spaces

Tailwind requires underscores (_) in place of spaces within arbitrary values; however, with this plugin you use spaces directly:

<div className="bg-[size:4px 4px]">

// Becomes:

<div className="bg-[size:4px_4px]">

Comments

/* */ and // comments are supported within multiline class strings:

<div className="
  bg-red-500
  // This is a comment
  text-white
  /**
   * Another comment
   */
  p-4
">

// Becomes:

<div className="bg-red-500 text-white p-4">

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

License

This project is licensed under the Apache 2.0 License. See the LICENSE file for details.